当我尝试运行测试用例时，它显示了 shallowMount 错误，如何修复 VUE.JS 中的 ShallowMount 错误？

Posted 2023-02-22

【中文标题】当我尝试运行测试用例时，它显示了 shallowMount 错误，如何修复 VUE.JS 中的 ShallowMount 错误？

【英文标题】：when i am trying to run test cases it shows me shallowMount error,How to fix ShallowMount error in VUE.JS?

【发布时间】：2021-09-06 00:57:30

【问题描述】：

我正在为 LoginNew.vue 组件编写测试用例，当我尝试在 spec.js 文件中导入该组件时，我得到了 shallowMount 错误[check my error here]，我不知道为什么会出现这个错误，请帮忙我来解决这个问题 jest.config.js

module.exports = 
    moduleNameMapper:
    "~(.*)$": "<rootDir>/resources/js/$1",
    ,
    setupFilesAfterEnv: ['<rootDir>resources/src/tests/setup.js'],
    resolver: require.resolve(`jest-pnp-resolver`),
    testEnvironment: `node`,
;

LoginNew.vue

<template>
    <div>
        <h1 id="title">Login</h1>
        <input type="text" id="input-username"/>
        <input type="password" id="input-password"/>
        <button id="btn-sign-in">Sign In</button>

        </div>
</template>
<script>

    export default 
        name: 'LoginNew'
    
</script>

Login.spec.js

import  LoginNew from '../../src/Pages/LoginNew.vue';
importshallowMount from '@vue/test-utils';
describe('LoginNew.vue',()=>
    describe('When Loaded',()=>
        it('has the required elements',()=>
            const wrapper =shallowMount(LoginNew);
            expect(wrapper.find('#input-username').exists()).toBe(false);
            expect(wrapper.find('#input-password').exists()).toBe(false);
        );
    );
);

package.json

  "name": "vue-fundoo",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  ,
  "dependencies": 
    "@vue/composition-api": "^1.0.0-rc.9",
    "@vuelidate/core": "^2.0.0-alpha.18",
    "@vuelidate/validators": "^2.0.0-alpha.15",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "core-js": "^3.6.5",
    "dotenv": "^10.0.0",
    "jquery": "^3.6.0",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "vuelidate": "^0.7.6"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/test-utils": "^1.2.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^27.0.3",
    "node-sass": "^5.0.0",
    "sass": "^1.19.0",
    "sass-loader": "^10.1.1",
    "vue-jest": "^3.0.7",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^4.0.0"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": 
    "transform": 
      "^.+\\.vue$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    
  

【问题讨论】：

您的jest.config.js 文件的内容是什么？你在项目中有一个吗？

你好@MichalLevý，我在我的代码中添加了我的 jest.config.js 请检查一次

这能回答你的问题吗？ Jest test fails with window is not defined

@MichalLevý，不是这个解决方案，我遇到了 shallowMount 错误

没关系，错误信息是一样的。问题出在testEnvironment: 'node'

【参考方案1】：

更新 jest 配置为

testEnvironment: 'jsdom'

Jest 27 的默认值已更改 在此处阅读更多信息。

https://jestjs.io/blog/2021/05/25/jest-27

【讨论】：

你好@Kunukn，我改成 jsdom 但仍然遇到同样的错误