当它被包装在提供者组件中时，如何使用 mocha + 酶 + chai 测试反应原生组件

Posted 2023-03-25

【中文标题】当它被包装在提供者组件中时，如何使用 mocha + 酶 + chai 测试反应原生组件

【英文标题】：How can I test react-native component with mocha + enzyme + chai when it's wrapped in a Provider component

【发布时间】：2017-05-29 17:13:41

【问题描述】：

我正在使用 mocha、enzyme、chai 和一些模拟库来使测试成为可能。所以，TestComponent.js的内容如下，我配置了store并传递给provider，而DeskScreen是连接组件：

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 后，它会生成以下内容：

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)

也许原因是我使用了 shallow 而不是 mount，但据我所知 mount 不适用于 react-native。无论如何，我想以某种方式测试连接的组件。

【参考方案1】：

我认为解决问题的方法有两种。

1。导出普通组件

在您的组件文件中将组件导出为命名导出，您可以在测试中使用它。

// Export the plain component as named component
export class MyComponent 
    // ...


export default connect(mapStateToProps)(MyComponent);

您的测试通过命名导入导入普通组件：

import  MyComponent  from './MyComponent';

// Use it in your tests

2。通过shallow 提供上下文

如果您通过上下文提供商店，则可以使用连接的组件。这就是<Provider> 所做的。

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
);

【讨论】：

你的 2 上的疯狂道具。通过浅层提供上下文——帮了我很多！