Nuxt.js: Enable Vue-Test-Utils to work with Nuxt

[ghost]

What problem does this feature solve?

I cannot find a working solution that let's me use ava or jest to run unit tests that utilize the Vue Test Utils library. Given that both Vue Test Utils and Nuxt appear to hold strong positions within the Vue community, I think it makes sense to ensure that Vue Test Utils can be utilized for both Nuxt universal and Nuxt SPAs

What does the proposed changes look like?

Nuxt should seamlessly let developers run tests with runners like jest or ava while using Vue-test-utils as well as modern ES features (import statements). Importing .vue SFCs from your test files would work fine, using the import statement would work fine, and utilizing Vue Test Util features like shallowMount would work fine.

_{This feature request is available on Nuxt community (#c7972)}

[paulgv]

What have you tried this far? I've been using VTU inside Nuxt projects for a while now.

Here are some code sample you might find useful for your setup:

.babelrc

{
  "env": {
    "test": {
      "presets": ["env", "vue-app"]
    }
  }
}

package.json

{
  "jest": {
    "setupFiles": [
      "<rootDir>/tests/unit/jest.setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^~/(.*)$": "<rootDir>/client/$1",
      "^~~/(.*)$": "<rootDir>/$1"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "client/components/**/*.vue"
    ]
  },
}

tests/unit/jest.setup.js

import Vue from 'vue';
import VueTestUtils from '@vue/test-utils';

Vue.config.silent = true;

// Mock Nuxt components
VueTestUtils.config.stubs['nuxt-link'] = '<a><slot /></a>';
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>';

[manniL]

A test example in /examples with Jest would be neat! :thinking:

[ghost]

Ah, I tried using babel-jest and vue-jest transformers during my very first attempt. I need to go back and see if I can get that setup working. I don't recall what I was doing wrong.

However, in the mean time, I did get an ava + nuxt + vue-test-utils exemplar working: https://github.com/ChrisDillinger/vue2-nuxt-exemplar

[ghost]

@paulgv Would you be willing to share a repo link with the minimally necessary setup for Nuxt (Universal or SPA) + Jest + Vue Test Utils?

[paulgv]

@ChrisDillinger sure, working on it now, I'll make a PR to add it as an example @manniL.

[aldarund]

There is also downside. Nuxt specific stuff like fetch/asyncData/middleware wont work

[paulgv]

@aldarund True, I actually only test components with VTU usually. Maybe the index.spec.js in the PR is confusing and should be removed?

[manniL]

Well, you can test asyncData and fetch (separately) with VTU. The functions are available in the $options of the component.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.