开玩笑 Nuxt 无法读取未定义的属性“孩子”答案

【问题标题】：Jest Nuxt Cannot read property 'child' of undefined开玩笑 Nuxt 无法读取未定义的属性“孩子”
【发布时间】：2021-12-29 08:05:26
【问题描述】：

我在启动 Nuxt/Vue 组件的 Jest 测试时遇到问题。昨天我连接了所有需要测试的东西，并解决了许多与 jsdom 和 babel 问题有关的错误，但无法解决 Vue 组件的问题。

错误是

    TypeError: Cannot read property 'child' of undefined

      4 | describe('Компонент Counter', () => {
      5 |       test("renders properly", () => {
    > 6 |               const wrapper = shallowMount(Greeting); // or mount - it's doesn't metter
        |                               ^
      7 |               console.log(wrapper);
      8 |       });
      9 |

我的组件问候

<template>
  <div> Hello World! </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

我的 Greeting.spec.js

import {mount, shallowMount} from '@vue/test-utils';
import Greeting from '../../components/Greeting.vue';
require('jsdom-global')();
describe('Компонент Counter', () => {
    test("renders properly", () => {
        const wrapper = shallowMount(Greeting);
        console.log(wrapper);
    });
});

jest.config.js

module.exports = {
    moduleFileExtensions: ["js", "json", "vue"],
    watchman: false,
    preset: "@nuxt/test-utils",
    transform: {
        "^.+\\.js$": "babel-jest",
        ".*\\.(vue)$": "@vue/vue2-jest"
    },
};

package.json

  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "@nuxt/test-utils": "^0.2.2",
    "@types/jest": "^27.0.3",
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/test-utils": "^1.3.0",
    "@vue/vue2-jest": "^27.0.0-alpha.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^27.4.5",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "jest": "^27.4.5",
    "jsdom-global": "^3.0.2",
    "node-sass": "^4.7.2",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^6.0.7",
    "ts-jest": "^27.1.2",
    "vue": "^2.6.14",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.6.14",
    "vueify": "^9.4.1"
  }

【问题讨论】：

标签： vue.js jestjs nuxt.js

【解决方案1】：

所以答案是 Jest 有一个使用 JSDOM 的属性，我不需要额外的要求。

我只是在底部添加 jest.config.js 单行

module.exports = {
    moduleFileExtensions: ["js", "json", "vue"],
    watchman: false,
    preset: "@nuxt/test-utils",
    transform: {
        "^.+\\.js$": "babel-jest",
        ".*\\.(vue)$": "@vue/vue2-jest"
    },
    testEnvironment: 'jsdom'
};

【讨论】：