测试和模拟 window.close 间谍未被调用

Question

我正在使用 vitest 和 vue test utils 来对我的 vue 组件的方法进行单元测试。测试项目之一是按钮应在单击时调用 close() 方法，该方法又调用浏览器

window.close()

方法：

const close = () => {
  console.log('close() called')
  window.close()
}

我有一个模拟

window.close

的单元测试，但测试未通过：

expected "spy" to be called once, but got 0 times

我确信组件的 close() 方法正在被调用，因为我在测试日志中看到了 console.log 输出。

测试方法如下：

import { test, vi, expect } from "vitest";
import { mount } from "@vue/test-utils";

test('window.close is called when button is clicked', async () => {
  const wrapper = mount(MyComponent, {
    global: {
      plugins: [router]
    }
  })
  const btn = wrapper.find('#exit-button')
  await btn.trigger('click')
  window.close = vi.fn()
  expect(window.close).toHaveBeenCalledOnce()
})

Answer 1

在假 DOM 中替换

window.close

可能不会产生负面影响，但通常不鼓励这样做。

spyOn

是方法的首选，因为它可以恢复原始实现。

在调用之前应该设置一个spy，它应该是：

  vi.spyOn(window, 'close')
  const btn = wrapper.find('#exit-button')
  await btn.trigger('click')
  expect(window.close).toHaveBeenCalledOnce()