javascript - 使用 Jest，在 vue.js 中对单个文件组件进行单元测试时如何监视扩展组件的方法

Question

我目前正在尝试使用 Jest 和 vue-test-utils 测试单个文件组件 ( ComponentB ) 单元。 ComponentB延伸ComponentA ，它有一个方法 update(product)定义在其中。

/* -------- Component B -------- */
<script>
import ComponentA from './ComponentA'
export default {
  extends: ComponentA,
  props: [...],
  data: () => {
    productData: {foo: 'bar', baz: 'shiz'}
  },
  methods: {
    updateProduct() {
      this.update(this.productData)
    }
  }
}
</script>

/* -------- Component A -------- */
<script>
export default {
  props: [...],
  data: () => {...},
  methods: {
    update(productData) {
      ...
    }
  }
}
</script>

然后我尝试进行单元测试，其中我 shallowMount()我的ComponentB并尝试jest.spyOn那update(productData) ComponentA 中定义的方法。测试如下所示:

it('calls update with data when input is added to the field', () => {
  const spy = jest.spyOn(ComponentA, 'update);
  const wrapper = shallowMount(ComponentB, { propsData: { ... } });
  const contractIdInput = wrapper.find('#contract-id-input > b-form-input');    

  contractIdInput.element.value = 'foobar';
  contractIdInput.trigger('input')

  expect(spy).toHaveBeenCalledWith(...someDataHere...)
});

当我运行此测试时，我得到 Cannot spy the update property because it is not a function; undefined given instead .

我不完全确定为什么这不起作用，尽管我确实有一些想法。

首先，因为我是shallowMount()正在阅读我的ComponentB ，它不会知道有关其父组件的任何信息，因此无法访问 update(productData) ComponentA 上定义的方法.

第二，也许我不会打电话jest.spyOn()在正确的时间，应该在创建 ComponentB 的包装对象后调用它。但是，我尝试改变这一点，但没有任何成功或不同的行为。

所以我的问题是，当我浅安装被测组件时，如何监视扩展组件提供的方法？

Answer 1

只是添加到@user2718281，SetMethods上面的答案中它已被弃用，因此您最好在实例化之前定义指向 ComponentB 的 spy :

// create a spy before the instance is created
const spySomeMethod = jest.spyOn(ComponentB.methods, 'someMethod')

const spyUpdate = jest.spyOn(ComponentB.methods, 'update')

const wrapper = shallowMount(ComponentB, { propsData: { ... } });

// your tests ...

// verify the spy was called
expect(spyUpdate).toHaveBeenCalled();

// remove the spy
spyUpdate.mockReset();

关于这个问题，也许您忘记添加 ComponentA.methods 像这样:

const spySomeMethod = jest.spyOn(ComponentB.methods, 'someMethod')

但是如果您想测试一些生命周期方法事件，例如 mounted 或 created，请像这样删除 .methods:

const spySomeMethod = jest.spyOn(ComponentB, 'created')