面试题：Vue项目中如何使用Jest进行单元测试

Question

在一个简单的Vue组件中，假设该组件有一个data属性和一个方法，使用Jest框架为这个组件编写单元测试，以验证data属性的初始值和方法的返回值是否正确，简述测试步骤并给出核心代码示例。

Answer 1

测试步骤

1. 安装必要依赖，包括 @vue/test-utils 和 jest。
2. 引入要测试的Vue组件以及 @vue/test-utils 中的 mount 方法。
3. 挂载组件，获取组件实例。
4. 验证 data 属性的初始值。
5. 调用组件方法，验证方法的返回值。

核心代码示例

假设我们有一个简单的Vue组件 MyComponent.vue：

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Jest!'
    };
  },
  methods: {
    getMessage() {
      return this.message;
    }
  }
};
</script>

测试代码 MyComponent.test.js：

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

describe('MyComponent', () => {
  test('data属性初始值正确', () => {
    const wrapper = mount(MyComponent);
    expect(wrapper.vm.message).toBe('Hello, Jest!');
  });

  test('方法返回值正确', () => {
    const wrapper = mount(MyComponent);
    expect(wrapper.vm.getMessage()).toBe('Hello, Jest!');
  });
});