PIXI.js 在 React SPA 中使用 Jest 进行测试答案

【问题标题】：PIXI.js tests with Jest in react SPAPIXI.js 在 React SPA 中使用 Jest 进行测试
【发布时间】：2022-08-18 19:04:17
【问题描述】：

我有一个用 PIXI.js 渲染动画的反应应用程序和 @inlet/react-pixi。

使用 Jest 运行测试时，出现错误：

Error: Uncaught [TypeError: Cannot read properties of null (reading \'stage\')]

● run Homepage tests › is Homepage rendered

WebGL unsupported in this browser, use \"pixi.js-legacy\" for fallback canvas2d support.

   5 | describe(\'run Homepage tests\', () => {
   6 |   test(\'is Homepage rendered\', () => {
>  7 |     render(
     |     ^
   8 |       <MockedProvider>
   9 |         <HomePage />
  10 |       </MockedProvider>`

pixi.js-legacy 应该如何作为测试的后备实现？

\"@inlet/react-pixi\": \"^6.8.0\", \"pixi.js\": \"^6.4.2\", \"jest-canvas-mock\": \"^2.4.0\",

请参阅：github.com/pixijs/pixijs/issues/8338、github.com/pixijs/pixijs/issues/8337、github.com/pixijs/pixijs/tree/dev/bundles/pixi.js-node

标签： reactjs typescript jestjs react-testing-library pixi.js

【解决方案1】：

如果它确实适用于旧版本，那么您可以在测试时交换库。

安装 pixi.js-legacy 作为开发依赖项。

在您的根目录中创建setup-jest.js。

添加内容

jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy'));

修改您的 Jest 配置并添加以下行

setupFiles: ['<rootDir>/setup-jest.js']

这将使用旧版模拟您真正的 Pixi 库。

【讨论】：

再会。我已经尝试了您的解决方案，因为我正在使用基于 CRA 的带有 ts 的反应应用程序，为了避免弹出，我在 setupTests.ts 中添加了jest.mock('pixi.js', jest.requireActual('pixi.js-legacy'));。然后我得到这个错误： TypeError: /Users/.../src/setupTests.ts: The second argument of jest.mock must be an inline function。 2 |导入“开玩笑画布模拟”； 3 | > 4 | jest.mock('pixi.js', jest.requireActual('pixi.js-legacy'));
修复后我收到另一个错误：TypeError: Cannot read properties of undefined (reading 'add') 2 |导入“开玩笑画布模拟”； 3 | > 4 | jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy'));有什么我做错了吗？开玩笑的文档根本没有帮助我
显然它需要一个回调而不是直接传递。喜欢jest.mock('pixi.js', () => jest.requireActual('pixi.js-legacy')); 但是您能否详细说明您面临的另一个错误？