javascript - 在导入依赖项之前开 Jest 模拟窗口对象

Question

在导入依赖项之前，我需要在窗口对象中设置一个值。说我有这个代码

// foo.test.js
import { dependency } from './foo'

describe('...', () => {
  it('...', () => {
    // use dependency
  })
})

但是要导入依赖项，我需要在 window.myValues 中定义一个值

// foo.js
export const dependency = {
  key: window.myValue.nestedValue
}

导入文件时，该代码会给我一个错误，因为 window.myValue.nestedValue正在尝试访问属性 nestedValue的未定义。

我怎样才能做到这一点？

编辑
关注 christianeide's answer下面我收到以下错误

  ● Test suite failed to run

    TypeError: Cannot convert undefined or null to object

      2 |   delete global.window.myValue
      3 |   global.window = Object.create(window)
    > 4 |   global.window.myValue = {
        |                 ^
      5 |     nestedValue: 'someValue'
      6 |   }
      7 | }

      at module.exports (jest.setup.js:4:17)
      at node_modules/@jest/core/build/runGlobalHook.js:82:17
      at ScriptTransformer.requireAndTranspileModule (node_modules/@jest/transform/build/ScriptTransformer.js:684:24)
      at node_modules/@jest/core/build/runGlobalHook.js:72:27
      at pEachSeries (node_modules/p-each-series/index.js:8:9)
      at async _default (node_modules/@jest/core/build/runGlobalHook.js:58:5)
      at async runJest (node_modules/@jest/core/build/runJest.js:345:5)

Answer 1

es6 导入是“提升的”，这意味着无论您在代码中何处编写它们，它们都会在导入模块执行之前得到处理，因此导入的模块总是在导入模块之前执行。在你的情况下，这意味着 foo.js 在 foo.test.js 之前执行，所以即使你正确地模拟了 window 的属性在您的测试中， foo.js 不会看到您的模拟。
您可以通过在测试中使用 require 在 window 的属性之后导入 foo.js 来解决此问题。被 mock 了。

// foo.test.js
window.myValue = { nestedValue: MOCK_NESTED_VALUE };

const { dependency } = require('./foo');

describe('...', () => {
  it('...', () => {
    // use dependency
  })
})

正如其他答案所指出的，如果 myValue是 window 的现有“系统”属性之一如 window.location ，您可能必须先将其删除。删除的时候不要忘记备份，以便测试后清理时可以恢复。