Тестирование с этим файлом и поверхностный рендеринг с ферментом:
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
, но я видел, что этот подход использовался во многих местах.
Что я делаю не так и как это исправить?