CODEWITHSUNDEEP
unit-testingvue.jsvuejs2jestjsvue-test-utils
FrancescoMussi
FrancescoMussi

Reputation: 21610

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

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

enter image description here

With vue-radial-progress the error is:

SyntaxError: Unexpected token <

enter image description here

HOW TO REPRODUCE:

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 ?

Upvotes: 5

Views: 3135

Answers (3)

Non404
Non404

Reputation: 1293

In addition to @FrancescoMussi's answer, after editing my jest.config.js, in case you get the error: jest-transform-stub not found, just install it. in my case I didn't had installed jest-transform-stub and jest-serializer-vue. after installing those my tests started working.

npm install --save-dev jest-serializer-vue

https://www.npmjs.com/package/jest-serializer-vue

and

npm install --save-dev jest-transform-stub

https://www.npmjs.com/package/jest-transform-stub

Upvotes: 1

Andy Pattenden
Andy Pattenden

Reputation: 276

In addition to @FrancescoMussi's solution, if it is still not working for you, make sure your Babel config is in the correct place as per the Jest docs

I had moved my Babel config to package.json which Babel wasn't detecting due to Vue CLI installing Babel 7. Moving Babel config back to babel.config.js resolved the issue for me.

Upvotes: 0

FrancescoMussi
FrancescoMussi

Reputation: 21610

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/'
}

Upvotes: 8

Related Questions