Question

这是我的本机组件，组件中的所有功能都正常工作。

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

我们如何测试连接的组件？我能够测试正常组件。

Answer 1

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

基本上，您有2种方法可以进行此测试，但我更喜欢将组件包装到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)
});

});

如您所见，我们使用了configureStore中的'redux-mock-store'来模拟商店。然后，我们调用mockStore(initialState)以创建商店（具有initialState），并将其传递给提供者（<Provider store={store}>）。

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

如何使用玩笑来测试连接的组件？

1 个答案: