Javascript 我能'；t访问另一个模块中修改的window.location对象jest

我想模拟

窗口.位置.搜索

config.test.js

import config from './config'
import { MULTIPLE_VIDEOS } from './Constants/flagKeys'

describe('', () => {
  const flag = { [MULTIPLE_VIDEOS]: true }

  global.window = Object.create(window)

  Object.defineProperty(window, 'location', {
    value: {}
  })

  afterAll(() => {
    global.window = null
  })

  it('Mark query string flag as true', () => {
    global.window.location.search = `?${MULTIPLE_VIDEOS}=true`
    expect(config.flags).toEqual(flag)
  })
})

config.js

export default { flags: getFlagsFromQueryString() }

function getFlagsFromQueryString () {
  const queryString = qs.parse(window.location.search.slice(1))
  const flags = {}

  Object.entries(queryString).forEach(([name, value]) => {
    flags[name] = value.toLowerCase() === 'true'
  })

  return flags
}

虽然我在调用

config.flags

之前在location对象中设置了搜索值，但我无法在函数中访问它，它总是返回空字符串

我希望

window.location.search.slice（1）

在

getFlagsFromQueryString

函数中返回

？multipleVideos=true

，而不是空字符串，因为我更改了测试文件中的值

我注意到一件事，当我导出函数并调用测试文件时，它可以工作

用于此类复杂用途。我建议您创建一个窗口服务/util类并从中公开方法。易于测试和模拟。

样本：

//Window.js

class Window {
  constructor(configs) {}
  navigate(href) {
    window.location.href = href;
  }
}
export default new Window({});

现在您可以轻松地模拟

Window.js

。它类似于DI模式