我有一个react 项目.这个项目有一个布尔值,来自一个useGate钩子,来自Statsig.该值可以是True,也可以是False.

如果为true,则某些数据将被特定值替换.如果为false,则数据与来自端点的数据完全匹配.

代码是这样的:

const showCustomData = !useGate("shipments_custom_toggle").value;

useEffect(() => {
    dispatch(getTheShipments({ shouldShowCustomData: showCustomData }))
}, [])

问题是,在Cypress中,这个值始终为False,因为运行测试的用户不能被配置为将useGate设置为True.

我怎么能对Cypress 说:当你找到showCustomData个数据时,把它替换成true

我曾try 以这种方式使用Cypress环境变量:

useEffect(() => {
    dispatch(getTheShipments({ shouldShowCustomData: Cypress.env('GET_CUSTOM_DATA') || showCustomData }))
}, [])

但这些Cypress.env在Reaction文件中不可用,它只是特定于规范.

我也试过了:

useEffect(() => {
    dispatch(getTheShipments({ shouldShowCustomData: window.Cypress ? true : showCustomData }))
}, [])

而这一次似乎奏效了.然而,不确定它是否安全和/或有更好的方法来实现它

推荐答案

使用window.Cypress是正确的,而且不应该是不可靠的,因为Cypress属性将出现在e2e控制的浏览器中,但不会出现在生产中.

您可以像这样略微改进代码,使测试覆盖更加明显,也可以从测试中进行配置

const showCustomData = !useGate("shipments_custom_toggle").value;

const shouldShowCustomData = window.showCustomData || showCustomData;

useEffect(() => {
    dispatch(getTheShipments({shouldShowCustomData}))
}, [])

test

cy.visit('/', {
  onBeforeLoad: (contentWindow) => {
    contentWindow.showCustomData = true
  },
})

听起来您想要模仿钩子,在这种情况下,切换到组件测试并使用这个How to mock react custom hook returned value?

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

获取点击的国家/地区名称react 映射

禁止直接访问Next.js中的页面,同时允许从应用程序内部访问

尽管所有页面在 Reactjs 中都是公开的,但始终导航到特定页面

如何在react 中过滤数组的数组?

如何使用服务器中的数据自动填充表单字段?

在 React 中将 MUI 样式外包到单独的文件中?

REACT: UseState 没有更新变量(ant design 模态形式)

如何根据用户在react.js中的 Select , Select 多个心形图标?

如何在 React 过滤器中包含价格过滤器逻辑?

如何渲染子路径并触发react 路由父加载器?

无法设置 null 的属性(设置src)

卸载 React 组件时未清除本地存储项目

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

React 测试库 - 如何断言异步函数之间的中间状态?

null 不是对象(判断RNSound.IsAndroid)

如何将我的 ID 值传递给下一个组件?

如何跨微前端 React 应用管理状态管理?

如何用实际的br标签替换axios响应中的br标签?