Simple text input value mutation.

[hally9k]

• react-testing-library version: 2.3.0
• node version: v8.9.1
• npm (or yarn) version: yarn@1.6.0

What you did:
I am just testing out this lib to see if I want to propose a switch from enzyme and I'm having trouble with the most basic stuff.

What happened:
Simply attempting to render a text input, snapshot it, change the value and snapshot it again.

Reproduction repository: https://github.com/hally9k/react-testing-library-example

Problem description: Changing the value of the text input doesn't reflect in the snapshot or invoke the onChange handler.

Suggested solution: Explain to me what I'm missing as I clearly misunderstand something here.

[alexkrolick]

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()
	})
})

[hally9k]

@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?

[kentcdodds]

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!