浅谈Vue组件单元测试究竟测试什么

在进行Vue组件单元测试时，我们主要测试以下方面：

1. 组件的行为是否正确

组件的行为包括用户交互和事件响应机制。我们可以使用Jest和 vue-test-utils库对组件进行测试，以便确保它们在视觉上展现正确，并能检查它们是否正确地响应用户行为和事件。

例如，以下代码对一个简单的Vue组件进行了测试，该组件接收一个数字作为prop，每次点击按钮时对该数字进行加一。

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

describe('Counter', () => {
  it('increments the count when button is clicked', async () => {
    const wrapper = mount(Counter);
    const button = wrapper.find('button');
    const count = wrapper.find('div');

    expect(count.text()).toMatch('0');

    await button.trigger('click');

    expect(count.text()).toMatch('1');
  });
});

2. 组件的渲染是否正确

组件的渲染测试可以检查它是否正常呈现给用户。在Vue中，可以使用vue-test-utils库中的mount方法，为Vue组件创建wrapper实例，然后使用toMatchSnapshot方法进行快照测试，以确保组件的视觉方面没有意外改变。

例如，以下代码测试了一个简单的Vue组件是否被正确渲染：

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent);

    expect(wrapper.element).toMatchSnapshot();
  });
});

在代码中，当组件的呈现方式没有任何预期的变化时，组件的快照测试将成功。当组件的快照测试失败时，可以检查新的变化是否受欢迎，或者是由于错误导致的。

总之，在Vue组件的单元测试中，我们主要测试组件的行为和渲染是否正确。而组件的测试需要针对不同的组件作出合理的测试方案，以确保组件的质量和可重用性。