6

我目前正在尝试ComponentB使用 Jest 和 vue-test-utils 对单个文件组件 () 进行单元测试。ComponentBextends 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.spyOnupdate(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. 但是，我尝试改变它并没有任何成功或不同的行为。

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

4

2 回答 2

17

只是为了添加到@user2718281 的上述答案，SetMethods它已被弃用，因此您最好在像这样实例化之前定义指向 ComponentB 的 spyOn：

// 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')
于 2020-06-25T20:21:43.873 回答
8

ComponentA是一个组件定义，update作为methods属性的子级，因此update不会在ComponentA或上找到ComponentB。spyOn应改为应用于组件的实例。

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

// create a spy on the instance method
const spyUpdate = jest.spyOn(wrapper.vm, 'update')

// replace the instance method with the spy
wrapper.setMethods({ update: spyUpdate });

// your tests ...

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

// remove the spy
spyUpdate.mockReset();
于 2019-04-18T00:10:25.700 回答