javascript - 如何在连接的 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));

我正在使用 Enzyme、Chai 和其他模拟适配器来测试此组件。测试 block 如下:

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

I just want to test two things :

1.) fetchContextUser is called 2.) fetchContextUser is called before the component gets mounted

Answer 1

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

• 为了在 enzyme 中调用componentWillMount，您需要使用mount，而不是shallow
• 该答案假定 fetchContextUser 是一个 prop，并且可以用 spy 替换。在这种情况下，您可能希望在测试中 stub 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());
  });
});