Menu
When testing a form, I am using userEvent to type 'hello' into a textbox, then when testing the value of said textbox straight after, using toHaveValue(), it returns the string backwards...
render(<Form />)
userEvent.clear(screen.getAllByRole('textbox')[0])
userEvent.type(screen.getAllByRole('textbox')[0], 'hello')
expect(screen.getAllByRole('textbox')[0]).toHaveValue('hello')
The error in console after running yarn test:
Package versions:
"react-scripts": "^3.4.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.1.9",
223
The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.
You NEVER need to wrap userEvent or fireEvent in act. They are *already* wrapped in act. Some have noticed that they see an "act warning" go away when wrapping these in an async act. The warning would go away just as well if you added: `await act(async () => {})` on the next line.
getByText will query inside baseElement. screen.getByText will query inside document.body. We usually don't specify a custom container or baseElement inside the render function, this causes it to default to document. body . Therefore getByText and screen.
I experienced the same thing, and I was previously on jest ^24.8.0, and after upgrading to the latest (jest ^27.2.1) the issue was resolved.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
