I'm very new to React and am trying to integrate a unit test framework into an existing React-redux application. I've got the following test to test a 'Cancel' button:
import React from 'react';
import DependencySystemCreatePage from "../../_components/dependencySys/DependencySystemCreatePage";
import {depSysCreateProps, depSysCreateContext, depSysCreateState} from "./TestConstants";
import { Provider } from "react-redux";
import configureStore from "redux-mock-store";
import renderer from 'react-test-renderer';
const mockStore = configureStore();
test("Test Cancel button", () => {
let store = mockStore(depSysCreateState);
store.dispatch = jest.fn();
let component = renderer.create(
<Provider store={store}>
<DependencySystemCreatePage {...depSysCreateProps} />
</Provider>
)
expect(component.toJSON()).toMatchSnapshot();
renderer.act(() => {
component.root.findByType('button').props.onClick();
});
expect(store.dispatch).toHaveBeenCalledTimes(1);
})
To which I get the following error:
TypeError: _reactTestRenderer.default.act is not a function
24 | expect(component.toJSON()).toMatchSnapshot();
25 |
> 26 | renderer.act(() => {
| ^
27 | component.root.findByType('button').props.onClick();
28 | });
29 | expect(store.dispatch).toHaveBeenCalledTimes(1);
In case it helps, my react, react-dom and react-test-renderer versions are all 15.4.0 and jest is 29.6.4. I understand that most existing online solutions to this issue suggest that react, react-dom and react-test-renderer all be the same version, which I have, but I'm still running into this.
Thanks for your help!
import * as renderer from 'react-test-renderer';
orimport {act} from 'react-test-renderer';
.TypeError: renderer.act is not a function
. Any idea why JS doesnt recognize renderer.act as a function?