如何使用 jest 测试连接的组件？答案

【问题标题】：How to test connected component using jest?如何使用 jest 测试连接的组件？
【发布时间】：2020-12-02 22:47:47
【问题描述】：

这是我在 react native 中的组件，组件中的所有功能都运行良好。

import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';

export class ABC extends React.Component {
    render() {
        return (
            <View style={{ width: '100%', height: '100%', backgroundColor: '#ff22ff', justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ color: '#000000' }}>{ this.props.data }</Text>
            </View>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        data: state.appReducer.hi
    };
};

export default connect(mapStateToProps)(ABC);

我们如何测试一个连接的组件？我可以测试正常的组件。

【问题讨论】：

标签： reactjs react-native react-redux jestjs

【解决方案1】：

Ciao，当我对连接组件进行测试时，我遵循了 this 非常有用的指南。

基本上你有两种方法来做这个测试，但我更喜欢将组件包装到 Provider 中的方式。我解释得更好：

（我想你已经知道笑话和酶是如何工作的，所以我跳过这部分）

首先你需要这些依赖：

"react-addons-test-utils" // Not used directly but required as enzyme dependency 
"react-test-renderer" // Used to grab snapshot of DOM tree rendered by React DOM/ React Native components
"redux-mock-store" // Used to mock our Redux store.

然后你的测试：

import configureStore from 'redux-mock-store'
...

describe('Testing ABC connected component',()=>{
const initialState = {data:10}
const mockStore = configureStore()
let store,wrapper

beforeEach(()=>{
    store = mockStore(initialState)
    wrapper = mount( <Provider store={store}><ABC /></Provider> )
})

it('Check Prop matches with initialState', () => {
   expect(wrapper.find(ABC).prop('data')).toEqual(initialState.data)
});

});

如您所见，我们使用来自'redux-mock-store' 的configureStore 来模拟商店。然后，我们调用 mockStore(initialState) 来创建我们将传递给 Provider (<Provider store={store}>) 的存储（带有初始状态）。

现在我们将组件包装在 Provider 中，并初始化了存储。完毕！现在您可以测试初始状态是否已传递给您的组件。您可以使用不同的data 触发调度，并验证组件是否接收到该数据...您要使用连接的组件进行的所有测试。

【讨论】：