使用 jest 进行 Redux 测试答案

【问题标题】：Redux testing using jest使用 jest 进行 Redux 测试
【发布时间】：2017-12-29 11:33:59
【问题描述】：

我正在尝试测试使用 redux 的 react-navigation 无状态组件，如下所示

import 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { createStore } from 'redux';
import AppNavigator, { mapStateToProps } from '../../src/navigation';
import { Pages } from '../../src/data';

const nav = { routeName: Pages.AFFIRMATION };

describe('Testing App Navigation', () => {
    let state = null;
    it('renders as expected', () => {
        const wrapper = shallow(
            <AppNavigator store={createStore(() => nav)} />
        );
        expect(toJson(wrapper)).toMatchSnapshot();
    });
});

AppNavigator 组件如下所示：

import React from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import { Navigator } from './routes';

const AppNavigator = ({ dispatch, nav }) => (
    <Navigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);

const mapStateToProps = state => ({
    nav: state.nav,
});

export default connect(mapStateToProps)(AppNavigator);

当我检查代码覆盖率npm test -- --coveraage 时遇到的挑战，我意识到这一行 (11) <Navigator navigation={addNavigationHelpers({ dispatch, state: nav })} /> 和调用它的函数未被发现。

我错过了什么，为什么第 11 行没有被发现？

【问题讨论】：

标签： reactjs react-native enzyme jestjs

【解决方案1】：

解决方案是将 AppNnavigator 函数分离到不同的文件中，然后进行测试

【讨论】：