How can I write tests for my Vue components using Jest?

How can I write tests for my Vue components using Jest?

You can write tests for your Vue components using Jest by creating a test file with a .spec.js extension. Start by importing the component and using Jest's describe and it functions to structure your tests.

Can you show me a simple example?

Sure! Here's a basic example:

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent);
    expect(wrapper.text()).toContain('Hello World');
  });
});

What if I want to test a method in my component?

You can test methods by calling them directly on the component instance. For example:

it('calls the method when button is clicked', async () => {
  const wrapper = mount(MyComponent);
  await wrapper.find('button').trigger('click');
  expect(wrapper.vm.myMethod).toHaveBeenCalled();
});

Are there any best practices for testing Vue components?

Yes! Some best practices include keeping tests isolated, using descriptive test names, and testing both the UI and functionality of your components.