Question

我在用嘲笑方式模拟/测试此负载脚本包时遇到了麻烦： https://www.npmjs.com/package/load-script

import Footer from './Footer'
import { shallowMount } from '@vue/test-utils'
import { mocks } from '@test/components.spec-helper'
import load from 'load-script'

describe('Footer Component', () => {
  const wrapper = shallowMount(PageFooter, { mocks })
  jest.spyOn('load-script', 'load')
  it('should render the component correctly', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should call load function', () => {
    expect(load).toHaveBeenCalledWith('mockUrl')
  })

Footer.vue

import load from 'load-script'

export default {
  name: 'Footer',
  mounted () {
    load('mockUrl')
  },

错误：无法对原始值进行spyOn；给定的字符串

主要问题似乎是开玩笑，不会让我窥探'load-script'包中的load方法...不确定此行应如何工作：

jest.spyOn（'load-script'，'load'）

第一个参数不应该是字符串，它应该是作为对象的模块，但是我不确定当程序包被称为“ load-script”时应该是什么

Answer 1

要监视load方法，您需要在测试中进行一些更改。

使用*导入，例如：import * as loadScript from 'load-script'
确保首先导入库，然后再导入组件，以便可以在组件加载之前注入间谍程序。因此，将./Footer导入移动到'load-script'导入下方
您需要在渲染组件之前进行监视，因为如果在组件安装后进行监视将为时已晚。

const loadSpy = jest.spyOn(loadScript, 'load')
const wrapper = shallowMount(PageFooter, { mocks })

您检查所监视的方法是否被调用

expect(loadSpy).toHaveBeenCalledWith('mockUrl')

所以完整的代码应该像

import * as loadScript from 'load-script'
import { shallowMount } from '@vue/test-utils'
import { mocks } from '@test/components.spec-helper'
import Footer from './Footer'

describe('Footer Component', () => {
  const loadSpy = jest.spyOn(loadScript, 'load')
  const wrapper = shallowMount(PageFooter, { mocks })

  it('should render the component correctly', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should call load function', () => {
    expect(loadSpy).toHaveBeenCalledWith('mockUrl')
  })
})

如何用玩笑来模拟加载脚本？

1 个答案: