我在测试组件时遇到了一个有趣的错误,现在不修复(
我用玩笑,酶,反应,还原。
在应用程序的前端部分,所有功能均正常运行。
我现在可以看到什么错误:
● Body Component › Body Component is loading › Is loading
Invariant Violation: Could not find "store" in the context of "Connect(Body)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Body) in connect options.
25 | };
26 |
> 27 | const BodyComponent = shallow(<Body />);
| ^
28 | });
29 | });
30 | });
我的setupTests.js:
import Enzyme, { shallow, render, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
//import toJson from 'enzyme-to-json'
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });
global.shallow = shallow;
global.render = render;
global.mount = mount;
//global.toJson = toJson
// Fail tests on any warning
console.error = message => {
throw new Error(message);
};
我的组件测试:
import React from "react";
import Body from "./Body";
import { shallow, render, mount } from "enzyme";
describe("Body Component", () => {
const props = {
data: {
time: undefined,
products: [],
filteredProducts: [],
search: undefined
}
};
describe("Body Component is loading", () => {
it("Is loading", () => {
const nextProps = {
...props,
data: {
products: [{}, {}],
filteredProducts: [{ name: "sdffd" }, { name: "sdf" }],
search: "sdf"
}
};
const BodyComponent = shallow(<Body />);
});
});
});
我也可以发送组件:
import React from "react";
import ProductListItem from "./ProductListItem";
import { connect } from "react-redux";
const names = ["Seattle", "Bellevue", "Tacoma", "Puyallup"];
const Body = props => {
const { products, filteredProducts, search } = props;
console.log("FILTERED IN BODY", filteredProducts);
console.log(products);
return (
<div className="main">
{names.map(name => (
<ProductListItem
name={name}
data={search ? filteredProducts : products}
key={Math.random()}
/>
))}
</div>
);
};
const mapStatesToProps = state => {
return {
products: state.data.products,
filteredProducts: state.data.filteredProducts,
search: state.data.search
};
};
export default connect(mapStatesToProps)(Body);
有人可以告诉我我做错了什么吗? 我认为{shallow}有问题。 也许有人知道如何解决此错误?
非常感谢您!
答案 0 :(得分:1)
您需要创建一个模拟的store
并将其作为道具传递给组件。 connect(mapStatesToProps)(Body)
语句将创建一个包装的组件。因此,您需要使用wrapper.find(Body)
中的enzyme
来获得Body
无状态功能组件。
index.tsx
:
import React from 'react';
import ProductListItem from './ProductListItem';
import { connect } from 'react-redux';
const names = ['Seattle', 'Bellevue', 'Tacoma', 'Puyallup'];
export const Body = props => {
const { products, filteredProducts, search } = props;
console.log('FILTERED IN BODY', filteredProducts);
console.log(products);
return (
<div className="main">
{names.map(name => (
<ProductListItem name={name} data={search ? filteredProducts : products} key={Math.random()} />
))}
</div>
);
};
const mapStatesToProps = state => {
return {
products: state.data.products,
filteredProducts: state.data.filteredProducts,
search: state.data.search
};
};
export default connect(mapStatesToProps)(Body);
index.spex.tsx
:
import React from 'react';
import ConnectedBody, { Body } from './';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';
const initialState = {
data: {
time: undefined,
products: [],
filteredProducts: [],
search: undefined
}
};
const mockStore = configureMockStore();
const store = mockStore(initialState);
describe('Body Component', () => {
const props = {
data: {
time: undefined,
products: [],
filteredProducts: [],
search: undefined
}
};
describe('Body Component is loading', () => {
it('Is loading', () => {
const nextProps = {
...props,
data: {
products: [{}, {}],
filteredProducts: [{ name: 'sdffd' }, { name: 'sdf' }],
search: 'sdf'
}
};
const wrapper = shallow(<ConnectedBody store={store} />);
const BodyComponent = wrapper.find(Body);
expect(BodyComponent.prop('products')).toEqual(props.data.products);
expect(BodyComponent.prop('filteredProducts')).toEqual(props.data.filteredProducts);
expect(BodyComponent.prop('search')).toEqual(props.data.search);
});
});
});
单元测试结果:
PASS src/stackoverflow/57942218/index.spec.tsx
Body Component
Body Component is loading
✓ Is loading (37ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.771s, estimated 5s
以下是完整的演示:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57942218