I'm trying to create a snapshot test for a component, however, my store keeps coming up as undefined and I cannot figure out why. What do I need to pass into my store to make this correct? I've done snapshot testing with other components that don't require mapStateToProps or withRouter with no issue before.
WorkflowForm.jsx
const mapStateToProps = (state, ownProps) => {
return {
...ownProps,
userID: state.data.userID,
userObj: state.ui.userObj
};
};
export default withRouter(
connect(mapStateToProps, null)(WorkflowForm)
);
WorkflowForm.test.jsx
import React from 'react';
import renderer from 'react-test-renderer';
import { Provider } from 'react-redux';
import { BrowserRouter } from "react-router-dom";
import WorkflowForm from "../WorkflowForm";
import { cleanup } from '@testing-library/react';
import configureMockStore from 'redux-mock-store';
afterEach(cleanup);
const mockStore = configureMockStore();
const store = mockStore({
userID: "121",
userObj: "Name"
});
describe('Test suits for WorkflowForm', () => {
it('should match with snapshot', () => {
const tree = renderer
.create(
<Provider store={store}>
<BrowserRouter>
<WorkflowForm />
</BrowserRouter>
</Provider>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
});
This is the error I get when I run the test
TypeError: Cannot read property 'userID' of undefined
392 | return {
393 | ...ownProps,
> 394 | userID: state.data.userID,
| ^
395 | userObj: state.ui.userObj
396 | };
397 | };
You didn't provide the state
to mocked store correctly. It should be:
const store = mockStore({
data: { userID: '121' },
ui: { userObj: 'Name' },
});