javascript - Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null' - Stack

admin管理员组

文章数量:1180551

I type:

npm test

and I get:

It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.

I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.

This is the repo/branch of this question.

When I type npm start. Everything flows swiftly and with no errors.

I type:

npm test

and I get:

It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.

I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.

This is the repo/branch of this question.

When I type npm start. Everything flows swiftly and with no errors.

• javascript
• jestjs
• babeljs
• phaser-framework

Share Improve this question Follow edited Sep 20, 2020 at 2:34 James Skemp 8,52199 gold badges6969 silver badges110110 bronze badges asked Aug 2, 2020 at 18:16 Ivan DerlichIvan Derlich 68522 gold badges99 silver badges2121 bronze badges 2

• 2 It has nothing to do with the import itself since the actual error is inside the phaser module (implying it was in fact imported), as you can see from the call stack. Try googling phaser Cannot set property fillStyle of null and you'll find several GitHub issues pointing towards a solution of installing canvas-prebuilt and/or installing and requiring jest-canvas-mock before your other imports. – CherryDT Commented Aug 2, 2020 at 19:15
• Also check out this article – CherryDT Commented Aug 2, 2020 at 19:16

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 27

The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.

Here is how I fixed it for my react application.

Install jest-canvas-mock as below .

 npm i jest-canvas-mock

Then go to setup file like setup-tests.js and import jest-canvas as below .

import "jest-canvas-mock";

Now run test, you should not get errors any more.

I solved it by following this instructions.

Thanks CherryDt.

Installing npm i jest-canvas-mock and Importing import "jest-canvas-mock" in set-up file; works for me

本文标签： javascriptJest import statement 39TypeError Cannot set property 39fillStyle39 of null39Stack Overflow