TypeError：无法解构“Vue.ssrUtils”的属性“createComponentInstance”，因为它未为 nuxt 和 jest 定义

Question

我正在尝试将 jest 测试框架加入我的 nuxt 项目，但是在这样做的同时，

我遇到了一个主要障碍，因为我无法测试简单的组件。我找不到与这个问题相关的任何合适的解决方案，如果有人遇到同样的问题，你能在这里帮忙吗。

我写的test spec文件是：

import { mount } from '@vue/test-utils'
import test from '../pages/test.vue'
describe('test', () => {
test('is a Vue instance', () => {
const wrapper = mount(test)
expect(wrapper.vm).toBeTruthy()
})
})

下面是我的package.json

{
 "name": "test",
 "version": "1.0.0",
 "description": "test",
 "private": true,
 "scripts": {
 "dev": "nuxt",
 "build": "nuxt build",
 "start": "nuxt start",
 "test": "jest -u - runInBand - coverage - passWithNoTests",
 "generate": "nuxt generate",
 "lint": "eslint - ext .js,.vue - ignore-path .gitignore .",
 "lint:fix": "eslint - fix - ext .js,.vue - ignore-path .gitignore .",
 "lint:css": "stylelint - fix ./**/*.{vue,scss,css}"
 },
 "lint-staged": {
 "*.{js,vue}": "npm run lint:fix",
 "*.{css,vue}": "npm run lint:css"
 },
 "husky": {
 "hooks": {
 "pre-commit": "lint-staged"
 }
 },
 "dependencies": {
 "@babel/core": "7.21.3",
 "@babel/preset-env": "7.20.2",
 "@nuxt/test-utils": "3.3.1",
 "@nuxtjs/axios": "⁵.12.2",
 "@nuxtjs/dotenv": "¹.4.0",
 "@nuxtjs/proxy": "².0.1",
 "@nuxtjs/pwa": "3.0.0–0",
 "@nuxtjs/vuetify": "1.11.3",
 "@vue/server-renderer": "3.2.47",
 "@vue/test-utils": "2.3.2",
 "axios": "⁰.21.0",
 "babel-jest": "26.6.0",
 "babel-polyfill": "⁶.26.0",
 "bootstrap-vue": "2.21.2",
 "cookie-universal-nuxt": "².1.4",
 "cross-env": "⁵.2.1",
 "file-exists": "⁵.0.1",
 "fs-extra": "¹¹.1.1",
 "jest": "26.6.0",
 "jest-circus": "26.6.0",
 "jest-resolve": "26.6.0",
 "jsonwebtoken": "⁸.5.1",
 "lodash": "⁴.17.20",
 "moment": "2.29.1",
 "nuxt": "2.0.0",
 "nuxt-i18n": "⁶.28.1",
 "vue-jest": "3.0.7",
 "vue-server-renderer": "2.7.14",
 "vuex-persist": "3.1.3"
 },
 "devDependencies": {
 "@nuxtjs/eslint-config": "².0.0",
 "@nuxtjs/eslint-module": "¹.0.0",
 "@nuxtjs/stylelint-module": "³.1.0",
 "babel-core": "⁷.0.0-bridge.0",
 "babel-eslint": "¹⁰.0.1",
 "eslint": "⁶.1.0",
 "eslint-plugin-nuxt": ">=0.4.2",
 "eslint-plugin-vue": "⁶.2.2",
 "lint-staged": "¹⁰.0.0",
 "node-sass": "⁶.0.1",
 "sass-loader": "¹⁰.3.1",
 "stylelint": "¹⁰.1.0",
 "stylelint-config-standard": "²⁰.0.0"
 },
 "config": {
 "nuxt": {
 "host": "0.0.0.0"
 }
 },
 "engines": {
 "node": "¹⁶.x"
 }
}

我的笑话配置：

module.exports={
 moduleNameMapper: {
 '^@/(.*)$': '<rootDir>/components',
 '^~/(.*)$': '<rootDir>/pages',
 '^vue$': 'vue/dist/vue.common.js',
 
 },
 moduleFileExtensions: [
 'js',
 'vue',
 'json'
 ],
 transform: {
 '^.+\\.js$': 'babel-jest',
 "^.+\.js$": "babel-jest",
 ".*\.(vue)$": 'vue-jest',
 '.*\\.(vue)$': 'vue-jest',
 
 },
 testEnvironment: "jest-environment-jsdom",
 //testResultsProcessor: "jest-sonar-reporter",
 collectCoverage: true,
 collectCoverageFrom: [
 '<rootDir>/components/**/*.vue',
 '<rootDir>/pages/**/*.vue',
 '<rootDir>/pages/**/*.js',
 
 ],
 
}

Answer 1

我看到 issue 在 GitHub 上关闭了。可能会有用

Answer 2

第一步：将@vue/test-utils降级到1.3.0报错

Cannot destructure property 'createComponentInstance' of 'Vue.ssrUtils'

第二步：npm install jest-environment-jsdom --save-dev for error

window is undefined, vue-test-utils needs to be run in a browser environment.

第 3 步：将此行添加到 jest 配置

testEnvironment: 'jsdom'

或

testEnvironment: "jest-environment-jsdom"

像你一样添加文件 .babelrc

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}