Jest导入语句: 'TypeError: Cannot set property 'fillStyle' of null'

Question

我输入：

npm test

我得到的结果是:

值得注意的是，在BootScene.test.js文件中，import语句可以正常工作，但在导入的文件中无法正常工作。

我关注了在Jest下无法正常工作的import语句。因此，我认为这可能与jest使用的Ecma Script版本有关。所以我尝试了这个解决方案，但错误仍然存在。

这个 是本问题的存储库/分支。

当我输入npm start时，一切都流畅无误，没有错误。

- Ivan Derlich

---

这与导入本身无关，因为实际错误位于phaser模块内（意味着它已被导入），正如您从调用堆栈中所看到的那样。试试谷歌搜索“phaser Cannot set property fillStyle of null”，您将找到几个 GitHub 问题指向安装canvas-prebuilt和/或在其他导入之前安装并要求jest-canvas-mock的解决方案。 - CherryDT

此外请查看这篇文章。 - CherryDT

Answer 1

出现错误的原因是jestdom无法添加我们所需的canvas。对我来说，这是因为我在应用程序中使用了lottiefiles。

以下是我如何修复我的react应用程序的方法。

安装jest-canvas-mock如下。

 npm i jest-canvas-mock

然后进入设置文件，例如 setup-tests.js 并像下面这样导入 jest-canvas。

import "jest-canvas-mock";

现在运行测试，您不应再收到任何错误。

- Bibek Panda

---

为了清晰起见，如果您正在package.json中定义Jest，则可以在package.json中执行以下操作。 “setupFiles”：[ “../setupTests.ts”， “jest-canvas-mock” ] - Bimlendu Kumar

Answer 2

我按照这篇文章的说明成功解决了问题。

感谢CherryDt。

- Ivan Derlich

---

SO允许自问自答，但请确保在帖子本身中提供所有必要的信息。如果链接失效，则变得无用 - 这在此链接中非常可能，因为Medium设置了付费墙。 - Estus Flask

此外，CherryDt 似乎也解决了这个问题，因此我建议您在未来通过评论询问解决您问题的人提交答案，以便您可以将其标记为答案。 - James Skemp

Answer 3

安装npm i jest-canvas-mock并在设置文件中导入import "jest-canvas-mock"，这对我很有效。

- Jananee Karthikeyan

---

你的回答可以通过提供更多支持信息来进行改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是否正确。你可以在帮助中心中找到有关如何撰写良好答案的更多信息。 - Amit