Search code examples
playwrightreact-query

How can I disable React Query Devtools in my playwright visual tests?

I want to use Playwright for local visual regression testing. The problem is I have ReactQuery Devtools installed and so my visual snapshots all have that open and displayed, covering up a bunch of the content I want to protect against visual regressions. ReactQuery Devtools

I could make it so the test clicks the close button. That would mean I only get the little ReactQuery icon displayed, but if these tests work well I may want to use them in CI, so I don't really want any visual discrepancies between local and CI renders.

What I'm wondering is if there's something I could put in my test to disable the Devtools even though process.env.NODE_ENV === 'development'.

Note: I tried launching the tests, and the dev server with the NODE_ENV environment variable set to testing. NextJS warned me that was a bad idea, and it did nothing to help :/

Solution

  • You could conditionally render the dev tools based on a bespoke environment variable.

    {process.env.REACT_APP_SHOW_DEV_TOOLS : <ReactQueryDevtools/> ? null}

    Add REACT_APP_SHOW_DEV_TOOLS=false to your playwrite envrionment variables.