当包装在提供程序组件中时,如何使用Mocha + Enzyme + Chai测试反应本机组件 [英] How can I test react-native component with mocha + enzyme + chai when it's wrapped in a Provider component
问题描述
我正在使用 mocha,enzy,chai 和一些模拟库来使测试成为可能.因此, TestComponent.js 的内容如下,我配置了存储并将其传递给提供程序,而 DeskScreen 是连接的组件:
I'm using mocha, enzyme, chai and some mocking libraries to make the testing possible. So, the content of TestComponent.js is below, I configure the store and pass it to the provider, while DeskScreen is connected component:
import mockery from "mockery";
import 'babel-polyfill';
import reactNativeSvgMock from "react-native-svg-mock";
mockery.enable();
mockery.registerMock("react-native-svg", reactNativeSvgMock);
var DeskScreen = require( '../app/containers/DeskScreen/DeskScreen');
import React, {View, Text, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import {shallow, render, mount} from 'enzyme';
import {expect} from 'chai';
import configureStore from 'redux-mock-store';
import reducer from "../app/reducers";
import Button from "../app/containers/Common/Button";
import ButtonWithNoFlex from "../app/containers/Common/ButtonWithNoFlex";
const mockStore = configureStore([]);
describe('<Test />', () => {
it('it should render 1 view component', () => {
const store = mockStore(reducer);
var comp = shallow(
<Provider store={store}>
<DeskScreen/>
</Provider>
);
expect(button).to.have.length(1);
expect(comp.find(View)).to.have.length(1);
});
});
运行命令npm test后,它将产生以下内容:
After running the command npm test it produces the following:
1) it should render 1 view component
0 passing (1s)
1 failing
1) <Test /> it should render 1 view component:
AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0
at Context.<anonymous> (test/TestComponent.js:22:41)
也许原因是我使用了浅表而不是mount,但据我所知mount无法用于react-native.无论如何,我想以某种方式测试连接的组件.
Maybe the reason is I use the shallow instead of mount, but as I know mount is not available for react-native. Anyway, I'd like to test connected component somehow.
推荐答案
我认为有两种方法可以用来解决问题.
I think there are two ways to use solve the problem.
在组件文件中,将组件导出为命名导出,可以在测试中使用.
In your component file export the component as named export which you can use in your tests.
// Export the plain component as named component
export class MyComponent {
// ...
}
export default connect(mapStateToProps)(MyComponent);
您的测试通过命名的import导入普通组件:
Your test import the plain compenent via named import:
import { MyComponent } from './MyComponent';
// Use it in your tests
2.通过shallow
提供上下文
如果您通过上下文提供商店,则可以使用连接的组件.这就是<Provider>
的作用.
2. Provide context via shallow
You can use the connected component if you provide the store via context. This is what <Provider>
does.
import { shallow } from 'enzyme';
import { createStore } from 'redux';
// reducer could be a real reducer or a mock fake reducer.
const store = createStore(reducer);
it('my test', () => {
const wrapper = shallow(
<MyComponent>,
{ context: { store } }
);
// test your component here
});
这篇关于当包装在提供程序组件中时,如何使用Mocha + Enzyme + Chai测试反应本机组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!