Vue-test-utils | Jest: How to handle dependencies?

Question

THE SITUATION:

I am implementing unit-testing in my Vue app, using vue-test-utils with Jest configuration.

When I am testing simple components everything is fine. But when I am testing components that import other dependencies, the test fails.

CONFIGURATION:

Vue version: 2.5.17
@vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest: 23.0.1

THE ERROR MESSAGE:

The exact error message depends on which dependency I am importing.

For example with epic-spinners the error is:

SyntaxError: Unexpected token import

With vue-radial-progress the error is:

SyntaxError: Unexpected token <

HOW TO REPRODUCE:

Make a fresh install of vue (with Jest as unit testing suite)
Run the example test, it should pass
Install a dependency (for example: npm install --save epic-spinners)
Import the dependency inside the HelloWorld component
Run the test again (without changing anything)

If I do these steps, the test fails with the above error message.

THE QUESTION:

How can I handle dependencies import in vue-test-utils / Jest ?

FrancescoMussi FrancescoMussi · Accepted Answer · 2018-10-16T11:40:30

The problem was that some modules may not be compiled correctly.

The solution is to use the transformIgnorePatterns property of the Jest settings. That is, from the docs:

An array of regexp pattern strings that are matched against all source file paths before transformation. If the test path matches any of the patterns, it will not be transformed.

In my case, this is how I have solved the issue:

transformIgnorePatterns: [
  "node_modules/(?!epic-spinners|vue-radial-progress)"
],

EDIT:

This is my jest.config.js

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    "node_modules/(?!epic-spinners|vue-radial-progress)"
    // "node_modules/(?!epic-spinners)",
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}

Vue-test-utils | Jest: How to handle dependencies?

3 Answers