为什么我的 Jest 测试因“无法读取未定义的属性‘包含’”而失败，而不是因断言错误而失败？

问题描述

我有一个 Vue.js 应用程序，我正在用 Jest 编写单元测试。 我的一项测试让我头疼。

import { createLocalVue,mount } from "@vue/test-utils";
import SimpleDataTable from "@/components/ui/SimpleDataTable";
import ConfirmDialog from "@/components/ui/ConfirmDialog";
import ContactForm from "@/components/customer/ContactForm";
import Vuetify from "vuetify";

describe("SimpleDataTable",() => {
  document.body.setAttribute("data-app",true);
  const localVue = createLocalVue();
  let wrapper;

  beforeEach(() => {
    const vuetify = new Vuetify();

    wrapper = mount(SimpleDataTable,{
      localVue,propsData: {
      headers: [
        { text: "Firstname",value: "firstname" },{ text: "Lastname",value: "lastname" }
      ],items: [
        { id: 1,firstname: "John",lastname: "DOE" },{ id: 2,firstname: "Foo",lastname: "BAR" }
      ],title: "Test",form: ContactForm
    },vuetify
  });
});

it("fires create-item event with correct payload",async () => {
  await wrapper.find(".mdi-plus").trigger("click");

  await wrapper.find("[data-firstname]").setValue("Foo");
  await wrapper.find("[data-lastname]").setValue("BAR");

  wrapper.find("#save-item-button").trigger("click");

  expect(wrapper.emitted("create-item")).toBeTruthy();
  expect(wrapper.emitted("create-item")[0][0]).toEqual({
    firstname: "Foo",lastname: "BAR"
  });
});

此测试运行良好，但是当我更改姓氏或名字以使其与模拟输入不匹配时，出现此错误：

如果我错了，现在纠正我，但测试应该失败，并显示“失败断言”而不是“无法读取未定义的属性‘包含’”

我不知道为什么会发生这种情况。

我的 .babelrc 文件：

{
  "presets": ["@babel/preset-env"]
}

我的 jest.config.js :

module.exports = {
  clearMocks: true,collectCoverage: false,collectCoverageFrom: ["**/*.{js,vue}","!**/node_modules/**"],coverageDirectory: "coverage",coverageProvider: "v8",moduleFileExtensions: [
    "js","json",// tell Jest to handle `*.vue files`
   "vue"
  ],moduleNameMapper: {
    // support the name @ -> src alias mapping in source code
    "^@/(.*)$": "<rootDir>/resources/js/src/$1"
  },setupFilesAfterEnv: ["<rootDir>/resources/js/tests/setup.js"],// A map from regular expressions to paths to transformers
transform: {
  // process `*.vue` files with `vue-jest`
  "^.+\\.(vue)$": "vue-jest",// process `*.js` files with `babel-jest`
  "^.+\\.(js)$": "babel-jest"
}

};

我的 package.json :

{
  "private": true,"scripts": {
    "dev": "npm run development","development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js","watch": "npm run development -- --watch","watch-poll": "npm run watch -- --watch-poll","hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js","prod": "npm run production","production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js","test": "jest"
},"devDependencies": {
    "@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","@vue/test-utils": "^1.1.2","babel-core": "^7.0.0-bridge.0","babel-jest": "^26.6.3","jest": "^26.6.3","vue-jest": "^3.0.7"
},"dependencies": {
    "axios": "^0.21.0","cross-env": "^7.0.3","laravel-mix": "^5.0.9","lodash": "^4.17.20","sass": "^1.30.0","vue": "^2.6.12","vue-router": "^3.4.9","vue-template-compiler": "^2.6.12","vuetify": "^2.3.21","vuex": "^3.6.0"
  }
}

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）