Nuxt集成Jest测试框架时遇TypeError问题求助

在Nuxt项目中接入Jest测试框架，测试简单组件时触发报错：

TypeError: Cannot destructure property 'createComponentInstance' of 'Vue.ssrUtils' as it is undefined

相关配置与测试代码如下：

测试用例文件 #

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"
  },
  "config": {
    "nuxt": {
      "host": "0.0.0.0"
    }
  }
}

Jest配置文件 #

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",
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/pages/**/*.js'
  ]
}

这个报错大多是测试依赖版本不兼容、Nuxt SSR环境未正确模拟导致的，按以下步骤修复：

1. 统一测试依赖版本 #

如果你的项目是Nuxt 2（基于Vue 2），必须对应使用兼容版本的测试工具，卸载现有依赖后重装：

npm uninstall @vue/test-utils vue-jest babel-jest
npm install -D @vue/test-utils@1.3.0 vue-jest@4.0.1 babel-jest@26.6.3

2. 修正Jest配置 #

删除重复的transform规则，调整路径映射符合Nuxt默认逻辑，同时更新测试环境配置：

module.exports={
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  testEnvironment: "jsdom", // 新版jest中jest-environment-jsdom已简化为jsdom
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/pages/**/*.js'
  ],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
}

3. 添加Jest初始化文件模拟Nuxt上下文 #

在项目根目录新建jest.setup.js，手动补全Vue.ssrUtils并模拟Nuxt全局变量：

import Vue from 'vue'

// 模拟Nuxt全局上下文
global.$nuxt = {
  $router: { push: jest.fn() },
  $route: { path: '/' }
}

// 修复Vue.ssrUtils未定义的问题
Vue.ssrUtils = Vue.ssrUtils || {
  createComponentInstance: jest.fn(() => ({})),
}

4. 修正测试命令 #

package.json中test命令存在多余空格，修改为：

"scripts": {
  // ...其他脚本
  "test": "jest -u --runInBand --coverage --passWithNoTests"
}

5. 适配Nuxt页面组件测试 #

Nuxt页面组件可能依赖框架上下文，改用shallowMount并传入模拟数据：

import { shallowMount } from '@vue/test-utils'
import test from '../pages/test.vue'

describe('test', () => {
  test('is a Vue instance', () => {
    const wrapper = shallowMount(test, {
      mocks: {
        $nuxt: { $route: { path: '/test' } }
      }
    })
    expect(wrapper.vm).toBeTruthy()
  })
})

内容的提问来源于stack exchange，提问作者Bravo