单元测试期间Jest出现问题-未实现getContext()

lnlaulya  于 2023-04-18  发布在  Jest
关注(0)|答案(3)|浏览(228)

当我运行我的单元测试时,我发现我得到以下错误:

Error: Not implemented: HTMLCanvasElement.prototype.getContext 
(without installing the canvas npm package)
l0oc07j2

l0oc07j21#

要解决这个问题,首先需要安装jest-canvas-mock,您可以使用yarn或npm。

yarn add -D jest-canvas-mock

然后将其添加到 * jest.config.js* 或 package.json 中的jest配置部分。

setupFiles: [
    'jest-canvas-mock',
    '<rootDir>/config/jest/setupFiles'
  ]
qxgroojn

qxgroojn2#

这个问题的ANSWER帮助我用最少的知识解决了这个问题。我写这个答案我如何使用官方文档DOC解决这个问题
Package.json如下

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit --watch",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },

在projects文件夹下,我有另一个名为tests的文件夹,我在其中编写end2end test和unit test。在该test文件夹上,我创建了一个名为setup.js的文件,在其中导入必要的模块,如下所示

import Vue from "vue";
import Vuetify from "vuetify";
import axios from "axios";
import globalVariables from "../src/helper/globalVariables";
import globalFunctions from "../src/helper/globalFunctions";
Vue.use(Vuetify);
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.prototype.$gv = globalVariables;
Vue.prototype.$gf = globalFunctions;

在我的项目文件夹下,我有一个名为jest.config.js的文件,我在其中设置了setup.js文件来测试单元。

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  verbose: true,
  reporters: [
    "default",
    [
      "./node_modules/jest-html-reporter",
      {
        pageTitle: "VGC Unit Test",
      },
    ],
  ],
  setupFiles: ["jest-canvas-mock", "./tests/setup.js"],
};

jest.config.js中包含下面的代码行,并定义setup.js文件的路径

setupFiles: ["jest-canvas-mock", "./tests/setup.js"]

这将解决问题Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

ltqd579y

ltqd579y3#

如果HTMLCanvasElement只得到一个函数错误,你可以在设置jest时简单地模拟这个函数:
在上述答案中提到的安装文件中,模拟显示错误的函数:

HTMLCanvasElement.prototype.getContext = () => {};

相关问题