Okta 登录小部件破坏了 Jest 测试 - TypeError：无法读取 null 的属性“backingStorePixelRatio”

Question

如标题所示。

在 Okta 开发论坛https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874上发现了这个问题，作者提到将canvas-prebuiltnpm 包添加到 devDependencies 为他修复了它.

可悲的是它对我不起作用。

有人在使用 Okta 登录小部件时遇到过这个错误吗？

我正在使用 Jest 23.x 和这两个 npm 包，它们帮助我将 Okta 登录小部件集成到我的 Angular 应用程序中。

• "@okta/okta-angular": "^1.2.1",
• "@okta/okta-signin-widget": "^2.19.0",

一切正常 - 我可以成功登录和注销 - 除了运行 Jest 测试时的错误。

编辑：我还发现了这个 Github 问题https://github.com/csivision/qrcode-react/issues/15，它似乎与我的问题有些相关，但解决方案仍然让我望而却步。

第二次编辑：

这是完整的错误堆栈

 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:50:45)
    at getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2078:50)
    at Object.<anonymous> (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2077:24)
FAIL  src/app/ion-okta-auth/login/__tests__/login.component.spec.tsules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:22:3

这个Github 问题和进一步的调查让我找到了jest-canvas-mock npm 包，需要将其添加为 devDependency 并使用 package.json 中的 jest setupFiles 数组进行设置 - 然而我再次看到相同的错误消息。

Answer 1

我有一个类似的问题， 看看这里，通过添加到 jestConfig.ts 以下代码片段来解决

Object.defineProperty(window, 'getComputedStyle', {
	value: () => ({
		getPropertyValue: (prop) => {
			return '';
		}
	})
});

并添加到package.json中

"jest": {
   "setupFiles": ["jest-canvas-mock"]
}