Vue 3 and Jest Setup

Install/Update vue cli

Make sure you have the latest vue cli version. Run the following command to update it. You can do so with yarn as well.

npm i -g @vue/cli

Create a new project using vue cli

vue create project

Running the above command will give you some options to select. Choose vue3 and select the defaults.

Jest setup

You will be needing the following packages to setup jest in your project.

• jest@26: currently version 26.x.x works with vue.
• vue-jest@latest: to support imported vue file extensions in test/spec files.
• babel-jest: to support es6 import in test files
• @testing-library/vue@next: next version works with vue 3
• @testing-library/user-event: optional
• @testing-library/dom: optional

 npm i -D jest@26 babel-jest@26 vue-jest@next @testing-library/vue@next @testing-library/user-event @testing-library/dom

Once you install all mentioned packages, add the below code in package.json or jest.config.js file.

 "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
  }

That’s it! Try to create a test and execute it. It should work perfectly.