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

Question

我想用剧作家用于局部视觉回归测试。问题是我有React 查询开发工具安装，所以我的视觉快照都打开并显示，覆盖了一堆我想防止视觉回归的内容。

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

我想知道的是，即使 process.env.NODE_ENV === 'development'，我是否可以在我的测试中添加一些东西来禁用 Devtools。

注意：我尝试启动测试，并将 NODE_ENV 环境变量设置为 testing 的开发服务器。 NextJS 警告我这是个坏主意，但它没有任何帮助：/

Answer 1

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

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

添加 REACT_APP_SHOW_DEV_TOOLS=false 到你的 playwright 环境变量。