jeudi 25 octobre 2018

How to write a test for a React component which on componentDidMount will be un-rendered?

I have a component Start which gets a prop appInitMount from Redux. If the prop is true then the application has just been mounted. It returns the CheckUrl component which dispatches a Redux action. This updates the Redux store in a few ways and also sets appInitMount to false, meaning that the Main component is now rendered instead.

const Start = ({ appInitMount }) => {
  return <>{appInitMount ? <CheckUrl /> : <Main />}</>;
};

const mapStateToProps = ({ main }) => {
  return {
    appInitMount: main.appInitMount
  };
};

This is working but now I'm trying to write a test which asserts that if appInitMount is true then <CheckUrl /> is returned. When I debug the component I can see that <Main /> is being rendered.

test("Start", () => {
  const wrapper = render(
    <Provider store={store}>
      <Start appInitMount={true} />
    </Provider>
  );

  wrapper.debug();
});

I think that the component is actually working correctly. So <CheckUrl /> is returned initially, but after it dispatches it's aciton <Main /> is then returned. How can I test that <CheckUrl /> is in fact being rendered first?

Aucun commentaire:

Enregistrer un commentaire