Vue中的Jest测试

npm install --save-dev jest @vue/test-utils vue-jest babel-jest

"scripts": {
  "test": "jest"
}

<template>
  <div>{{ message }}</div>
</template>

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

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders message when component is created', () => {
    const wrapper = shallowMount(HelloWorld);
    expect(wrapper.text()).toMatch('Hello, Jest!');
  });
});

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

describe('MyComponent.vue', () => {
  it('fetches async data on mount', async () => {
    const wrapper = shallowMount(MyComponent);
    await wrapper.vm.fetchData();
    expect(wrapper.vm.data).toEqual({ /* expected data */ });
  });
});

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

describe('MyComponent.vue', () => {
  it('renders correctly', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.html()).toMatchSnapshot();
  });
});