vue test utils TypeError：无法解构“未定义”或“空”的属性“配置”

Question

我正在使用 vue test utils 进行简单的单元测试。 但它不起作用。 我一点头绪都没有…… 帮帮我

我安装了这个东西.....

> $ npm i -D jest @vue/test-utils vue-jest jest-serializer-vue babel-jest babel-core@bridge

> $ npm i -D @babel/core @babel/preset-env

我制作了 jest.config.js 文件

module.exports = {
  moduleFileExtensions: [
    'vue',
    'js'
  ],

  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],

  testURL: 'http://localhost',

  transform: {
    '^.+\\.vue$' : 'vue-jest',
    '^.+\\.jsx?$' : 'babel-jest'
  }
}

和测试/Parent.test.js

import { mount } from '@vue/test-utils'
import Parent from './Parent.vue'

test('Mount', () => {
  const wrapper = mount(Parent)
  expect(wrapper.html()).toBe('')
})

但是 npm run test:unit 错误是这样的

 FAIL  tests/Parent.test.js
  ● Test suite failed to run

    TypeError: Cannot destructure property `config` of 'undefined' or 'null'.

      at Object.getCacheKey (node_modules/vue-jest/lib/index.js:10:5)
      at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:280:41)
      at ScriptTransformer._getFileCachePath (node_modules/@jest/transform/build/ScriptTransformer.js:351:27)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:588:32)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:815:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.512 s
Ran all test suites.

enter image description here

Answer 1

该软件包正在从 语义版本控制 中移出，以支持各种 Vue 版本（2.x、3.x）和 Jest 版本（26.x、27.x）。所以，如果你使用Vue 3.x和Jest 27.x，你需要安装vue3-jest，而不是vue-jest。

npm i vue3-jest -D

# or

yarn add vue3-jest --dev

然后，更新您的jest.config.js 如下：

module.exports = {
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx'],
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue3-jest',
    '^.+\\js$': 'babel-jest',
  },
}

在撰写此答案时，包命名和版本控制是这样的：

您可以阅读有关新命名和版本控制策略here 的更多信息。

Answer 2

如果您使用的是版本 27 的 jest，请尝试降级到版本 26。确保将 babel-jest 和 ts-jest 也降级到版本 26。我收到以下错误，这对我来说是这样的：

无法按原样解构“未定义”的属性“配置” 未定义。

Answer 3

在尝试使 Vue3、Jest 和 Typescript 一起工作时遇到了同样的问题。 这就是我设法使它工作的方式。问题在于将行星与依赖项对齐。

• 首先我建议从任何提到依赖的笑话中清除 package.json（特别是如果你像我一样花几天时间尝试放置和删除依赖项，同时拿着马蹄铁表演雨舞）。

• 添加到 package.json
  "devDependencies": { "@babel/core": "^7.14.5", "@babel/preset-env": "^7.14.7", "babel-core": "^7.0.0-bridge.0", "typescript": "^4.3.5", "@vue/test-utils": "^2.0.0-rc.9", "jest": "^26.5.6", "ts-jest": "^26.5.6", "babel-jest": "^26.5.6", "vue-jest": "^5.0.0-alpha.10", "@vue/cli-plugin-unit-jest": "5.0.0-beta.2" } （确保这些依赖具有相同的版本：jest、ts-jest 和 babel-jest）

• 还在 package.json 添加脚本"scripts": { "test": "jest" },

• npm 我

• npm 运行测试

对我来说它现在正在工作。希望它可以帮助别人。

Answer 4

如果您将 Jest 升级到 27.x.x，您将收到此错误以及其他问题，具体取决于您的设置。 使用 Vue3/TS/Jest 设置升级到 Jest 27 后，我遇到了问题。

1. 升级所有与 jest 相关的软件包。我不得不升级 jest、jest-junit、ts-jest 包
2. 添加正确的 vue-jest。您可能必须删除现有的 vue-jest 包并安装正确的包。我不得不使用@vue/vue3-jest。使用下表选择正确的包

或阅读这里https://github.com/vuejs/vue-jest

1. 修复 jest 配置

   变换：{ "^.+\.js$": "babel-jest", ".*\.(vue)$": "@vue/vue3-jest" }

作为参考，这是我的 devDependencies。