How do I set up Jest for a Vue.js project?

How do I set up Jest for a Vue.js project?

To set up Jest for a Vue.js project, you need to install Jest and Vue Test Utils. Would you like a step-by-step guide?

Yes, please provide the steps.

First, install Jest and Vue Test Utils using npm:

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

Next, create a jest.config.js file in your project root with the following configuration:

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\.vue$': 'vue-jest',
    '^.+\.js$': 'babel-jest',
  },
};

Finally, add a test script in your package.json:

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

Now you can run your tests using npm test. Do you need help with writing a test?

Yes, how do I write a simple test for a Vue component?

To write a simple test for a Vue component, you can create a test file, for example, MyComponent.spec.js. Here's a basic example:

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

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

This test checks if the component renders correctly. Would you like to know more about testing specific functionalities?