Closed sykesd closed 5 years ago
I think you are missing the act()
wrap from button.props.onClick()
?
act(() => {
button.props.onClick();
});
https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks
You might need to import it from the react-testing-library
import {act} from "react-testing-library";
I did some wrappers for this in the useSelector tests:
Doh! I had actually read that document on testing hooks, but then forgot about it completely.
Just for future reference, I was able to get it working with react-test-renderer
, it comes with its own act()
implementation. But it was necessary to wrap the call to create()
in act()
as well:
import { act, create } from "react-test-renderer";
...
let component: ReactTestRender;
act(() => {
component = create(
<HooksProvider store={store}>
<Search />
</HooksProvider>
);
});
...
act(() => {
button.props.onClick();
});
Thanks again.
After finding a work around for my type error in #3 I am now attempting to test a component written using
react-hooks
and it appears that the component does not receive the updates.The basic setup is: TypeScript 3.3.3, react-hooks 0.5.0, react 16.8.1, jest 23.x, redux 4.0.1, immer-reducer 0.6.0
What doesn't work, is a component like this:
My test case looks like:
An almost identical test, using a more traditional component that uses
react-redux
6.0.0 works correctly.My suspicion is that something about the way
react-hooks
sets up its subscription to the store does not work correctly when running under thereact-test-renderer
Is this a known problem?
Is there something else I need to be doing to get the update to work in tests?
The version of the component that does work looks like this:
The only difference in the test is to use the
react-redux
<Provider>
component instead of<HooksProvider>
.