面试题：Vue组件测试中如何使用 Jest 测试计算属性

Question

在Vue组件化开发中，假设你有一个包含计算属性的Vue组件，简述如何使用Jest框架来对该计算属性进行测试，需说明测试步骤以及可能用到的断言方法。

Answer 1

1. 测试步骤：
   • 安装依赖：确保项目中安装了jest和@vue/test - utils。如果没有，使用npm install --save - dev jest @vue/test - utils进行安装。
   • 引入必要模块：在测试文件中，引入{ mount }方法（来自@vue/test - utils）用于挂载Vue组件，引入要测试的Vue组件。例如：

   import { mount } from '@vue/test - utils';
   import MyComponent from '@/components/MyComponent.vue';
   

   • 挂载组件：使用mount方法挂载组件，创建一个包装器实例。

   const wrapper = mount(MyComponent);
   

   • 访问计算属性：通过包装器实例访问组件的计算属性。例如，如果计算属性名为computedProperty，可以使用wrapper.vm.computedProperty来访问。
   • 编写断言：对计算属性的值进行断言，验证其是否符合预期。
2. 可能用到的断言方法：
   • expect(actual).toBe(expected)：用于判断actual（实际值，即计算属性的值）是否严格等于expected（预期值）。例如：

   expect(wrapper.vm.computedProperty).toBe('expectedValue');
   

   • expect(actual).toEqual(expected)：用于判断actual（实际值，即计算属性的值）是否深度等于expected（预期值），适用于对象和数组等复杂数据类型。例如：

   expect(wrapper.vm.computedProperty).toEqual({ key: 'value' });
   

   • expect(actual).toBeTruthy()：用于判断计算属性的值是否为真值。例如，当计算属性返回一个布尔值，且期望为true时可以使用。

   expect(wrapper.vm.computedProperty).toBeTruthy();
   

   • expect(actual).toBeFalsy()：用于判断计算属性的值是否为假值。例如，当计算属性返回一个布尔值，且期望为false时可以使用。

   expect(wrapper.vm.computedProperty).toBeFalsy();