如何解决React 测试库快照测试无法读取存储属性
我正在尝试为一个组件创建一个快照测试,但是,我的商店不断出现未定义,我不知道为什么。我需要向我的商店传递什么才能使其正确?我已经对其他不需要 mapStatetoProps 或 withRouter 的组件进行了快照测试,之前没有任何问题。
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();
});
});
这是我运行测试时得到的错误
TypeError: Cannot read property 'userID' of undefined
392 | return {
393 | ...ownProps,> 394 | userID: state.data.userID,| ^
395 | userObj: state.ui.userObj
396 | };
397 | };
解决方法
您没有正确地向模拟商店提供 state
。应该是:
const store = mockStore({
data: { userID: '121' },ui: { userObj: 'Name' },});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。