在 Cypress 组件测试中，在组件渲染周期内对 window 对象所做的更改不会持续存在

Question

我需要通过 window 对象向 Cypress 组件测试公开我组件的一些内部结构，但我未能通过并正确读取它。考虑这段代码：

// component
import React, { FC } from 'react'

(window as any).publicDictionary = { }
export const getPublicDict = () => (window as any).publicDictionary
const addToPublicDict = (id: string) => (window as any).publicDictionary[id] = true

addToPublicDict('foo')

export const MyComponent: FC = () => {
   addToPublicDict('bar')
   return null
}

// test
it('Applies default value', () => {
   mount(<MyComponent/>)

   const dict = getPublicDict();

   cy.log({
      window,
      dict,
      foo: dict.foo,
      bar: dict.bar,
      dictKeys: Object.keys(dict),
   } as any)
})

当通过 Chrome devtools 检查时，这段代码表现得很奇怪：

... 直接记录 publicDict 时，foo 和 bar 属性似乎都存在 - 但是当我尝试访问它们时，结果是 bar为 undefined，因为它是在组件的渲染周期内设置的。 foo，另一方面，可以按预期读取和访问。

这是怎么回事？我该怎么做才能在组件测试中将组件的内部结构成功传递给赛普拉斯？

Answer 1

你正在导出 export const getPublicDict... 所以像这样导入它

import {getPublicDict} from '../src/my-component'

通过这次导入，属性显示出来。

请注意，window 对象在测试和应用程序中是不同的。在组件测试中，他们将组件安装在测试运行器上 window.

Answer 2

我还没有找到原因，但是我找到了解决方法。

window 对象仅适用于我，当我在链接在 cy.window command:

之后访问它时

import { getPublicDict } from './utils'

// This works:
it('works', () => {
  cy.window().then(() => {
    // Here, window and its properties work as expected
    const dict = getPublicDict();  
  })
})

// This doesn't:
it('works', () => {
  // Here, window tends to get quite quirky
  const dict = getPublicDict(); 
})

这种方式效果很好 - 我什至不必使用 cy.window 生成的 window 对象 - 我在 [=13= 之后链接时访问 window 就足够了].

如果有人知道这是为什么，我很好奇。

在 Cypress 组件测试中，在组件渲染周期内对 window 对象所做的更改不会持续存在

In Cypress component tests, changes to window object made inside component render cycle do not persevere

window-object

reactjs

cypress

cypress-component-test-runner