vuejs / vue-cli

πŸ› οΈ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.32k forks source link

Cannot find module '@jest/globals' from '<my-test-file>.spec.js' #5505

Closed prooli22 closed 4 years ago

prooli22 commented 4 years ago

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 :

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.

haoqunjiang commented 4 years ago

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

prooli22 commented 4 years ago

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'
  ]
}
haoqunjiang commented 4 years ago

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.

liuyangcharlie commented 4 years ago

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.

jamesarosen commented 4 years ago

In my case, this was because I had installed jest@^24.1.0 but babel-preset-jest@^26.0.0.

Kolobamanacas commented 3 years ago

Same here, but in order to make it work I was forced to bring all three of these libs to the same version: jest, ts-jest and babel-jest.

chengchengpei commented 1 year ago

@Kolobamanacas any idea why jest, ts-jest and babel-jest should be the same version?

Kolobamanacas commented 1 year ago

@Kolobamanacas any idea why jest, ts-jest and babel-jest should be the same version?

I didn't make any research on this, so unfortunately I don't have a clue.