Simple text input value mutation. about react-testing-library HOT 3 CLOSED

You also need to simulate the change event:

  describe('Input > Text', () => {
	it('should render changes', () => {
		const mockOnChange = jest.fn()
		const { getByTestId } = render(
			<input type="text" value="hello" onChange={mockOnChange} data-testid="my-input" />
		)
		
		const input = getByTestId('my-input')

		expect(input).toMatchSnapshot()

		input.value = 'yo!'
+		Simulate.change(input)

		expect(input).toMatchSnapshot()
		expect(mockOnChange).toBeCalled()
	})
})

from react-testing-library.

@alexkrolick Thanks for your answer. Simulating the change event will get the onChange handler to fire but the snapshot still doesn't reflect the change in the input's value attr. In enzyme you have to call component.update() to flush the changes. Is there something I'm missing here?

from react-testing-library.

The problem is that your example is a controlled component: https://reactjs.org/docs/forms.html

It's impossible to update the value of that input as you have it written and it's because you specify the value as a hard coded string. If you just want to initialize the value, then you can use the defaultValue prop instead.

Good luck!

from react-testing-library.