How to setState in react-testing-library

Question

Overview:

• I refactoring script tests before I was used Enzyme to test, but now, I want to use @testing-library/react

Problem:

• I can't find a solution for setState in @testing-library/react

Answer 1

Using setState is dangerous approach regardless testing library used.

1. It depends on implementation details(say, property names inside the state) so it becomes much harder to maintain tests - more tests to change, easy to get test broken when app is fine etc.
2. You cannot call that once you convert class component to functional one with hooks. So you depends on implementation details even more.
3. And finally direct state manipulation may end with state you would never get in real world. This means your component will be broken because it's impossible to reach some state but your tests with direct initialization will be fine.

So what you better do? Provide props, change props, call props(wrapper.find('button').filter(button => button.text() === 'Cancel').props().onClick() for enzyme, fireEvent.click(getByText(/Cancel/i)) for RTL) and verify against what's rendered.

This way your tests will be shorter, most actual and need less changes after you update component under test.