如何在連接的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());
  });
});