¶ NuxtJS - Testing

A collection of relevant information to make testing NuxtJS sites more efficient.

¶ GOOD LINKS

• Testing vue-apollo Components with Jest

  Working on some tests for Vue single-file components with vue-apollo queries and mutations. Unfortunately, there are not so many guides on the topic so I decided to share my experience. This article doesn't pretend to be a best-practice but I hope it will help people to start testing GraphQL + Apollo in Vue with Jest.

• Starting watch mode" never finishes & test indicators' state never changes

• VS Code - The optimal flow for Jest based testing in VS Code

¶ CONFIGURATIONS

In a default NuxtJS project, ensure the following configurations are present.

In file ~/jest.config.js:

NOTE! the addition of 'gql' to ensure that Apollo GraphQL files in ~/apollo/queries/* don't interfere with the Jest functionality, and especially with VS Code Jest extension.

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json', 'gql'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  }
}

In ~/.vscode/settings.json file, ensure the following is present:

{
  "jest.pathToJest": "yarn run test",
  "jest.showCoverageOnLoad": true
}

In ~/package.json file, ensure the following is present:

"devDependencies": {
  <snip>
  "jest": "^XX.X.X",
  "jest-cli": "^XX.X.X",
  <snip>
}