如何在剧作家视觉测试中禁用 React Query Devtools？

Question

我想使用 Playwright 进行本地视觉回归测试。问题是我安装了 ReactQuery Devtools，所以我的视觉快照都打开并显示，掩盖了一堆我想要防止视觉回归的内容。

我可以做到这一点，以便测试单击关闭按钮。这意味着我只会显示小的 ReactQuery 图标，但如果这些测试运行良好，我可能想在 CI 中使用它们，所以我真的不希望本地和 CI 渲染之间出现任何视觉差异。

我想知道的是，我是否可以在测试中添加一些东西来禁用开发工具，即使

process.env.NODE_ENV === 'development'

。

注意：我尝试启动测试，并将 NODE_ENV 环境变量设置为

testing

的开发服务器。 NextJS 警告我这是一个坏主意，但它没有任何帮助:/

Answer 1

您可以根据定制的环境变量有条件地渲染开发工具。

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

将

REACT_APP_SHOW_DEV_TOOLS=false

添加到您的剧本环境变量中。

Answer 2

开发工具仅在生产中自动禁用。问题是为什么开发工具是开放的？你用

initialIsOpen

渲染它们吗？

如果没有，可能是因为您手动打开了它们，并将其保存到 localStorage，以便您下次访问该页面时它们将处于相同的状态。如果是这种情况，您可以让您的剧作家测试在隐身模式下运行，以避免共享相同的本地存储：

// Create a new incognito browser context
const context = await browser.newContext();
// Create a new page inside context.
const page = await context.newPage();
await page.goto('https://example.com');
// Dispose context once it's no longer needed.
await context.close();

Answer 3

另一种方法，无需触摸

.env.

文件。

如果您使用initialOpen = false进行渲染，您仍然可以使用按钮来删除它：

  await page.evaluate(() => {
    // Remove tanstack query button, it intercepts clicking on the expand menu button
    const element = document.querySelector('[aria-label="Open React Query Devtools"]');

    if (element) {
      element.remove();
    }
  });