对此文件进行测试,并使用酶进行浅渲染:
import React from "react";
import { shallow } from "enzyme";
import { Provider } from "react-redux";
import useStore from "redux-mock-store";
import Dashboard from "./Dashboard";
import { initUserState } from "../../reducers/user";
import { initProjectsState } from "../../reducers/projects";
import { initPagesState } from "../../reducers/pages";
import thunk from "redux-thunk";
describe('Dashboard', () => {
const middlewares = [ thunk ];
const setStore = useStore(middlewares);
const store = setStore({
user: initUserState,
projects: initProjectsState,
pages: initPagesState
});
it('should render correctly', () => {
const Component = shallow(
<Provider store={store}>
<Dashboard />
</Provider>
);
expect(Component).toMatchSnapshot();
});
});
将此错误返回到终端:
● Dashboard › should render correc
tly
expect(received).toMatchSnapshot
()
Snapshot name: `Dashboard should
render correctly 1`
- Snapshot
+ Received
- <ContextProvider
- value={
- Object {
- "store": Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- },
- "subscription": Subscription {
- "handleChangeWrapper": [Function],
- "listeners": Object {
- "notify": [Function],
- },
- "onStateChange": [Function],
- "parentSub": undefined,
- "store": Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- },
- "unsubscribe": null,
- },
- }
- }
- >
- <Dashboard />
- </ContextProvider>
+ ShallowWrapper {}
我不确定是否可以预期,但是它未通过测试,因此不正确。我尝试使用enzyme.mount
和enzyme.shallow
,但是都返回相同的包装器错误。也许是因为Provider
的还原,但是我看到很多地方都使用了这种方法。
我在做什么错,以及如何解决?