Making Jest work with Vuex, Nuxt.js, Firebase, and Vue components

It's not the easiest task to test Vue components that rely on the Vuex store and Nuxt.js. We have to prepare several things.

First of all, we must install jest-vue-preprocessor in order to tell Jest that Vue components files are valid. We must also install babel-preset-stage-2, otherwise Jest will complain about the ES6 spread operator. Run the following command:

npm install --save-dev jest-vue-preprocessor babel-preset-stage-2

Once the dependencies are installed, add the stage-2 entry to the .babelrc file:

// .babelrc
{
  "presets": ["es2015", "stage-2"]
}

Now we need to tell Jest that it should use the babel-jest transformer for the regular JavaScript files and the jest-vue-transformer for the Vue files. In order to do so, add the following to the jest entry in the package.json file:

// package.json
"jest": {
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir&gt...