Vue-cli: Cannot find module '@jest/globals' from '<my-test-file>.spec.js'

Created on 20 May 2020 · 5Comments · Source: vuejs/vue-cli

Version

4.3.1

Environment info

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 69.0.1
    Safari: 13.1
  npmPackages:
    @progress/kendo-base-components-vue-wrapper:  2020.2.513 
    @progress/kendo-charts-vue-wrapper: ^2020.1.406 => 2020.2.513 
    @progress/kendo-gauges-vue-wrapper: ^2020.1.406 => 2020.2.513 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.3.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.3.1 
    @vue/cli-plugin-babel: ^4.3.1 => 4.3.1 
    @vue/cli-plugin-e2e-cypress: ^4.3.1 => 4.3.1 
    @vue/cli-plugin-eslint: ^4.3.1 => 4.3.1 
    @vue/cli-plugin-router:  4.3.1 
    @vue/cli-plugin-unit-jest: ^4.3.1 => 4.3.1 
    @vue/cli-plugin-vuex:  4.3.1 
    @vue/cli-service: ^4.3.1 => 4.3.1 
    @vue/cli-shared-utils:  4.3.1 
    @vue/component-compiler-utils:  3.1.2 
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.2.3 => 5.2.3 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.11 => 2.6.11 
    vue-cli-plugin-moment: ^0.1.1 => 0.1.1 
    vue-cli-plugin-vuetify: ^2.0.5 => 2.0.5 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.5 
    vue-loader:  15.9.2 
    vue-router: ^3.1.6 => 3.2.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuedraggable: ^2.23.2 => 2.23.2 
    vuetify: ^2.2.23 => 2.2.29 
    vuetify-loader: ^1.4.3 => 1.4.3 
    vuex: ^3.2.0 => 3.4.0 
  npmGlobalPackages:
    @vue/cli: 3.12.1

Steps to reproduce

All my tests were working and then after a package update I presume, some of them are not working anymore, because it cannot find the Jest/globals module.

The content of my tests folder looks like this :

── tests
│   └── unit
│       ├── component // ALL GOOD
│       ├── store
│       │   ├── Device.spec.js // FAIL
│       │   ├── Notification.spec.js // FAIL
│       │   ├── Room.spec.js // FAIL
│       │   ├── Unit.spec.js // FAIL
│       │   ├── User.spec.js // FAIL
│       │   └── store.spec.js // GOOD
│       └── utils
│           ├── ApiService.spec.js // FAIL

Every tests suites that are not in components folder except for store/store.spec.js are getting the error.

What is expected?

All the tests to work.

What is actually happening?

Some of my tests are not working

I'm guessing that after a package update, some of my tests suites stop working, because the globals of jest are not "injected" in the test file. I've come to this stackoverflow link which is the same result I'm getting, but the answer didn't help me so I'm asking here.

The content of my jest.config.js is :

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^. \\.vue$': 'vue-jest',
    '. \\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    'jest-transform-stub',
    '^. \\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/',
    '/internals/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost:8080/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
};

I tried :

remove node_modules and run npm install => didn't work
clear jest cache => didn't work
npm cache verify then npm install => didn't work

I know my packages are not up to date, but I rolled back to the last commit I add which I knew the tests passed.

needs reproduction

Source

prooli22

👍2

All 5 comments

I'm sorry but we need actual code to reproduce the bug and debug.

sodatea on 21 May 2020

👎1

So when trying to reproduce the error in a new project it didn't happened. I noticed that the jest.config.js file was a bit different and I think this was the problem. So here's its content :

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

prooli22 on 21 May 2020

👍1

I think it could because of your Jest (or some of the jest-related dependencies') versions.
If I'm not mistaken, @jest/globals is only used in Jest >25, while Vue CLI generates projects with Jest 24.

Anyway, that's the best guess I can give without seeing the actual code.

sodatea on 21 May 2020

👍1

a notable change is the 'babel-jest' in transform. was '<rootDir>/node_modules/babel-jest' originally. seems some package upgrades require a change of this config.

met the same problem as well, fix inspired by this.