如何测试从其他组件或JS文件导入的方法

Question

我对单元测试没有太多经验。测试从JS文件或其他组件导入的方法的正确方法是什么？

这是一个示例组件，我创建了一个localSum用于测试。

<template>
<div class="fixed-center text-center text-h2">
<p>{{ getSum }}</p>
</div>
</template>
<script>
import { sum } from './testComponent.js';
export default {
name: 'TestComponent',
data() {
return {
a: 10,
b: 20
}
},
computed: {
getSum() {
return sum(this.a, this.b);
}
},
methods: {
localSum(a, b) {
return a + b;
}
}
};
</script>

JS文件：

export function sum(a, b) {
return a + b;
}

这就是测试，也许我不应该使用wrapper.vm来访问该方法？注意：在实际组件上，我不想直接测试该方法，这就是为什么我没有从JS文件中导入sum。

import { mount } from '@vue/test-utils';
import TestComponent from '@components/TestComponent.vue';
describe('Testing component', () => { 
test('Testing local method', () => { 
const wrapper = mount(TestComponent);
expect(wrapper.vm.localSum(10, 20)).toBe(30);
});
test('Testing method from js file', () => { 
const wrapper = mount(TestComponent);
expect(wrapper.vm.getSum(10, 20)).toBe(30);
});
});

测试结果：

Testing component
✓ Testing local method (6 ms)
✕ Testing method from js file (2 ms)
● Testing component › Testing method from js file
TypeError: wrapper.vm.getSum is not a function

谢谢！

Answer 1

在您的示例中，getSum()是一个不接受任何参数的计算属性。因此，要测试它，你可能只需要做：

expect(wrapper.vm.getSum).toBe(30);

而不是：

expect(wrapper.vm.getSum(10, 20)).toBe(30);