javascriptreactjsunit-testingjestjsreact-strictmode

Should I use React.StrictMode in my test suite?


First time posting a question :)

I have a React application with:

// index.js

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root'),
);

I have 24 jest test suites, which, until now, were basically like:

act(() => {
  render(
    <Router>
      <SomeComponentIWantToTest />
    </Router>
  );
});

It occurred to me that it would be more appropriate to wrap the tests in StrictMode, to get closer to how the app is actually being rendered:

act(() => {
  render(
    <React.StrictMode>
      <Router>
        <SomeComponentIWantToTest />
      </Router>
    </React.StrictMode>
  );
});

After trying this, here's what I noticed:

  1. One good thing was that it threw some console warnings where I hadn't wrapped some of my test code in act. I was able to fix these places. Hurray!
  2. My tests slowed down significantly. I'm guessing this is because My React Component is rendering twice because of Strict Mode.

Also, in a quick glance at the docs, it seems that StrictMode is a development-only thing. So, does it make sense to wrap tests (which are theoretically concerned with what's going to happen in production), in React.StrictMode?


Solution

  • Nope, I don't think so. You should test your production system behavior.

    Ref: https://react.dev/reference/react/StrictMode

    Strict mode is for development only:

    All of these checks are development-only and do not impact the production build.

    What is the point to test a development only thing?

    And Strict mode will do double rendering and re-run effects. You definitely do not want your production system to behave like that. Thus do not write test cases for it because the behavior is not expected. It's just for development time.

    By the way, the official react-test-renderer does NOT support strict mode. It probably means, "officially" there is no need to test it.