Okta登录小部件中断Jest测试- TypeError:无法读取属性'backingStorePixelRatio‘的null

Question

就像在标题里一样。

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

可惜这对我没用。

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

我正在使用Jest23.x和这两个npm包，帮助我集成Okta标志在小部件在我的角度应用程序。

• @okta/okta-角“："^1.2.1"，
• @okta/okta-signin-widget："^2.19.0"，

一切都很完美--我可以成功地登录和退出--除了运行Jest测试时的错误。

编辑:我还发现了这个https://github.com/cssivision/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问题和进一步的调查使我看到了玩笑-画布-模拟 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"]
}

​

Answer 2

我所要做的就是安装滑稽的画布模拟

npm i jest-canvas-mock

将此添加到package.json中

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

使用创建-反应-应用。

Answer 3

我在发表了一篇文章的正式回购中找到了一个优雅的解决方案。

只需模拟SignInWidget，这是最好的方法，这样您就可以更好地隔离您的测试(除非您想测试无用的小部件，请留给维护包的Okta团队处理)。

jest.mock("./components/auth/SignInWidget", () => {
  return <div>SignInWidgetMock</div>;
});