如何在连接的React-Redux组件内部测试componentWillMount？

Question

我有以下智能组件，该组件使用componentWillMount生命周期方法进行异步调用以获取数据。 我正在为此编写测试，但是无法测试是否调用了该函数以及是否在组件安装之前调用了该函数。 它们是重要的案例。

智能组件的代码如下：

const mapStateToProps = (state) => {   const context = state.context;  return {
    isError: context.error,   }; };

const options = {   componentWillMount: (props) => {
    const { dispatch } = props;
    dispatch(fetchContextUser());   }, };

export function App(props) {   return (
    <div className="app">
      { props.isError ? (<ContextError />) : (<Main />) }
      { props.children }
    </div>   ); }

App.propTypes = {   children: PropTypes.object, // eslint-disable-line react/forbid-prop-types   isError: PropTypes.bool.isRequired, // eslint-disable-line react/forbid-prop-types };

export default connect(mapStateToProps, null)(functional(App, options));

我正在使用酶，柴和其他模拟适配器来测试此组件。 测试块如下：

describe.only('Render Connected Component', () => {   let store;   beforeEach(() => {
    store = mockStore({
      context: {
        error: false,
      },
    });   });   it('Should render connected components', () => {
    const connectedWrapper = mount(
      <Provider store={store}>
        <ConnectedApp />
      </Provider>
    );
    expect(connectedWrapper).to.be.present();   }); });

我只想测试两件事：

1.）调用fetchContextUser 2.）挂载组件之前调用fetchContextUser

Answer 1

我认为您只需要测试componentWillMount方法调用fetchContextUser操作，因为您必须相信ReactJS在挂载之前会调用componentWillMount方法，因此，前提条件是测试第二种情况。 因此，为了测试第一种情况，我认为您可以执行以下操作：

import sinon from 'sinon';
...

it('It calls fetchContextUser when calls componentWillMount', () => {
  const fetchContextUserSpy = sinon.spy();
  const wrapper = shallow(<App fetchContextUser={fetchContextUserSpy} />);
  fetchContextUserSpy.reset(); //reset the spy to avoid unwanted calls
  wrapper.instance().componentWillMount(); // Call componentWillMount directly
  expect(fetchContextUserSpy.calledOnce).to.be.true; // Expect that after call componentWillMount() the fetchContextUserSpy was called once

在此测试中，您只需直接调用componentWillMount（）函数，并期望调用fetchContextUserSpy即可测试案例1 。 我正在使用sinon.js来测试何时调用函数。

再一次，您的案例2不需要进行测试，因为ReactJS保证在组件安装之前调用componentWillMount方法。

================================================== =======================

尝试使用功能组件

it('It calls fetchContextUser when mounted', () => {
  const fetchContextUserSpy = sinon.spy();
  const wrapper = shallow(<App fetchContextUser={fetchContextUserSpy} />);
  expect(fetchContextUserSpy.calledOnce).to.be.true; // Expect that the component calls the fetchContextUserSpy
});

Answer 2

我认为@ pedro-jiminez很近，但是这里缺少两个元素：

• 为了在酶中调用componentWillMount ，您需要使用mount ，而不是shallow
• 该答案假定fetchContextUser是道具，并且可以用间谍代替。 在这种情况下，您可能想在测试中存根store.dispatch并断言它是使用fetchContextUser ，假设这只是一个纯函数。

因此测试看起来像：

describe.only('Render Connected Component', () => {
  let store;
  beforeEach(() => {
    store = mockStore({
      context: {
        error: false,
      },
    });
    // stub dispatch
    sinon.stub(store.dispatch);
  });
  it('Should render connected components', () => {
    const connectedWrapper = mount(
      <Provider store={store}>
        <ConnectedApp />
      </Provider>
    );
    expect(connectedWrapper).to.be.present();
    // Now test dispatch called
    expect(store.dispatch.calledOnce).to.be.true;
    expect(store.dispatch.args[0][0]).to.deepEqual(fetchContextUser());
  });
});