Nuxt.js & Vue.js jest returns error: “don’t know how to turn this value into a node”

Problem: Are you getting a similar error to the following output?

> MYAPP@1.0.0 test /Users/XXXXXX/Projects/MYAPP
> jest

ts-jest[versions] (WARN) Version 26.4.2 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=24.0.0 <25.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.0.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
 FAIL  test/Intro.spec.js
  ● Test suite failed to run

        /Users/XXXXXX/Projects/MYAPP/components/index/Intro.vue: don't know how to turn this value into a node

      at valueToNode (node_modules/@babel/core/node_modules/@babel/types/lib/converters/valueToNode.js:87:9)
      at Object.valueToNode (node_modules/@babel/core/node_modules/@babel/types/lib/converters/valueToNode.js:81:58)
      at Object.exit (node_modules/istanbul-lib-instrument/dist/visitor.js:641:30)
      at PluginPass.exit (node_modules/babel-plugin-istanbul/lib/index.js:158:38)
      at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:175:21)
      at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
      at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
      at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:101:8)
      at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:112:16)
      at TraversalContext.visitSingle (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:84:19)

According to:

• https://github.com/facebook/jest/issues/10089
• https://github.com/vuejs/vue-jest/issues/241

Problem is stemming from conflicts from vue-jest@latest and it’s compatibility with jest@latest.

jest V25 and v26 is not compatible with vue-jest v4 or v5 currently. And stacktrace is pointing to babel as one of the causes too according to:

Babel transformation error: "don't know how to turn this value into a node" · Issue #11614 ·…

So what can we do about it for now?

Solution 1: Wait for the latest npm package conflicts to resolve

Wait for the vue-jest team to update their package to work with latest jest package.

Solution 2: Downgrade jest and vue-jest npm packages to these specific versions. (Temporary Recommended Solution)

1. Downgrade vue-jest and jest versions. This is temporary solution until vue-jest is compatible with the latest jest npm package.

2. Ensure your jest.config.js file is mapping correctly to your tests and folders and it should run smoothly like before.

3. Be sure to check back to the github page for `vue-jest` to see if a new package is working with latest jest versions.

npm install --save-dev jest@24.9.0

npm install --save-dev vue-jest@4.0.0-beta.3

npm run test

Extra. Configuration Files

jest.config.js

//jest.config.js
module.exports = {
  preset: 'ts-jest',
  verbose: true,
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
    '@nuxtjs/composition-api': '@nuxtjs/composition-api/lib/cjs/entrypoint.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.{vue,ts}',
    '<rootDir>/pages/**/*.{vue,ts}',
    '<rootDir>/store/**/*.ts',
  ],
};

Happy Coding! Cheers! :)

tags: #nuxt.js #vue.js #jest #coverage #unittesting #babel #vue-jest #nodejs #npm #vuejs #nuxtjs