Question

Whats'up，

我正在尝试测试一些使用redux的反应组件。

默认行为应该通过休息调用加载选择输入中的选项列表。此调用位于我的组件中的方法componentDidMount（）。

组件工作正常，但我无法在测试中模拟相同的行为。

我无法从Provider包装的实例中调用方法componentDidMount（）。

任何人都可以帮助我吗

import React from 'react'
import {expect} from 'chai'
import {mount, shallow} from 'enzyme'
import sinon from 'sinon'

import { reducer as formReducer } from 'redux-form'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'

import ConnectedComponent from '../../../src/components/Component'

describe('Component <Component />', () => {
    let store = createStore(combineReducers({ form: formReducer }))
    let wrapper = mount(<Provider store={store}><ConnectedComponent /></Provider>)

    // this call does not works
    wrapper.instance().componentDidMount()

    it('should load select input on component mount', () => {
        expect(wrapper.find('select option')).to.have.length(12)
    })
})

Answer 1

我能够做到以下几点：

import React from 'react';
import {connect} from "react-redux";

export class Mock extends React.Component {
    constructor(props) {
        super(props);
    }
    myMethod() {
        return 123
    }
    render() {
        return (
            <div>Test</div>
        )
    }
}

Mock = connect()(Mock);

export default Mock;

Jest测试片段：

const wrapper = mount(
    <Provider store={store}>
        <Mock/>
    </Provider>
)
let result = wrapper.find(Mock).children().instance().myMethod();
expect(result).toEqual(123);

希望能帮助别人！

React + Redux - 调用为Redux Provider包装的组件的方法

1 个答案: