In meinem Jest Komponententest rende ich eine Komponente mit einem ColorPicker . Die ColorPicker -Komponente erstellt ein Canvas-Objekt und einen 2d-Kontext, gibt aber 'undefined' zurück, wodurch der Fehler "Cannot set property 'fillStyle' of undefined"
Ich habe Probleme herauszufinden, warum ich keinen 2d Kontext bekommen kann. Vielleicht gibt es ein Problem mit meiner Testkonfiguration?
%Vor% Das liegt daran, dass Ihr Test nicht in einem echten Browser ausgeführt wird. Jest verwendet jsdom , um die notwendigen Teile des DOM zu verspotten, um die Tests in Node ausführen zu können, wodurch die Stilberechnung und das Rendern vermieden werden, die ein Browser normalerweise ausführen würde. Das ist cool, weil das Tests schnell macht.
Andererseits, wenn Sie Browser-APIs in Ihren Komponenten benötigen, ist es schwieriger als im Browser. Zum Glück hat jsdom Unterstützung für Canvas . Sie müssen es nur konfigurieren:
jsdom bietet Unterstützung für die Verwendung des Canvas-Pakets , um alle
<canvas>-Elemente mit der Canvas-API zu erweitern. Damit dies funktioniert, müssen Sie Canvas als Abhängigkeit in Ihr Projekt als Peer von jsdom einbeziehen. Wenn jsdom das Canvas-Paket finden kann, wird es es verwenden, aber wenn es nicht vorhanden ist, verhalten sich<canvas>-Elemente wie<div>s.
Alternativ könntest du Jest durch einen browserbasierten Test-Runner wie Karma ersetzen. Scherz ist ziemlich Buggy sowieso.
Ich hatte genau das gleiche Problem. Ich implementiere nach gitlab ci, um meine Tests zu starten, und da npm canvas eine Installation von Cairo erfordert, war das keine praktikable Option.
Alles, was ich wirklich tun wollte, war, die Implementierung durch Jest zu verspotten, so dass sie nicht wirklich versucht, einen echten Kontext zu schaffen. Hier ist, wie ich es gelöst habe:
wurde zu package.json hinzugefügt
%Vor%tests / setup.js
%Vor%Für meinen Anwendungsfall habe ich einfach Affen gepatcht wie folgt
%Vor%Es ist nicht erforderlich, Canvas-Prebuilt oder Sinon zu installieren.
Ich denke, Sie brauchen jest-canvas-mock .
Dies sollte nur als Entwicklungsabhängigkeit (devDependencies) installiert werden, da es nur zum Testen entwickelt wurde.
npm ich --save-dev jest-canvas-mock
Erstellen Sie in Ihrer package.json unter dem Scherz ein setupFiles-Array und fügen Sie dem Array jest-canvas-mock hinzu.
%Vor%Wenn Sie bereits ein setupFiles-Attribut haben, können Sie auch jest-canvas-mock an das Array anhängen.
%Vor%Tags und Links reactjs jestjs html5-canvas jsdom