Gewusst wie: hinzufügen <canvas> Unterstützung für meine Prüfungen im Scherz?

In meinem Scherz unit-test-ich bin rendering-Komponente mit ColorPicker. Die ColorPicker - Komponente erstellt ein canvas-Objekt und 2d-Kontext aber zurück 'undefined' die wirft einen Fehler "Cannot set property 'fillStyle' of undefined"

if (typeof document == 'undefined') return null; //Dont Render On Server
var canvas = document.createElement('canvas'); 
canvas.width = canvas.height = size * 2;
var ctx = canvas.getContext('2d'); //returns 'undefined'
ctx.fillStyle = c1; //"Cannot set property 'fillStyle' of undefined"

Ich habe Schwierigkeiten, herauszufinden, warum ich nicht bekommen kann einen 2d-Kontext. Vielleicht gibt es ja auch ein Problem mit meine test config?

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/node_modules/react-dom",
    "<rootDir>/node_modules/react-addons-test-utils",
    "<rootDir>/node_modules/react-tools"
  ],
  "moduleFileExtensions": [
    "jsx",
    "js",
    "json",
    "es6"
  ],
  "testFileExtensions": [
    "jsx"
  ],
  "collectCoverage": true
}
InformationsquelleAutor Adgezaza | 2015-10-21
  1. 13

    Es ist, weil Sie Ihren test ausführen nicht in einem echten browser. Scherz verwendet jsdom für Spott die notwendigen Teile des DOM, um in der Lage zu führen Sie die tests in den Knoten, so dass Stil Berechnung und Darstellung, dass ein browser normalerweise tun würde. Das ist cool, weil das macht die tests fallen.

    Auf der anderen Seite, wenn Sie brauchen, browser-APIs in Ihre Komponenten, ist es schwieriger, dann im browser. Zum Glück, jsdom hat die Unterstützung für canvas. Sie müssen nur um es zu konfigurieren:

    jsdom beinhaltet Unterstützung für die Verwendung des Leinwand Paket zu erweitern, alle <canvas> Elemente mit der canvas-API. Um diese Arbeit zu machen, müssen Sie die Leinwand als eine Abhängigkeit in Ihrem Projekt, wie ein peer jsdom. Wenn jsdom finden die Leinwand-Paket verwenden, wird es, aber wenn es nicht vorhanden ist, dann <canvas> Elemente Verhalten sich wie <div>s.

    Alternativ könnte man ersetzen, den Scherz mit einigen browser-basierte test-runner wie Karma. Scherz ist ziemlich buggy sowieso.

    • Ich bin die Umstellung auf karma. Installation der Leinwand-Paket-Abhängigkeiten wären zu viel Mühe zu dokumentieren, für andere. Danke!
    • Alte Frage/Antwort, aber Scherz hat sich stark verbessert, seit dann und Holen Leinwand arbeiten mit jsdom (auf den meisten Systemen) alles, was Sie tun müssen, ist npm install canvas-prebuilt - npmjs.com/package/canvas-prebuilt
    • vielen Dank für diese info. die normale canvas Paket ist unmöglich zu bauen, die auf windows 10, zumindest für mich...
    • ich habe installiert, die Leinwand auch,auch nach, dass der Scherz nicht erkennen das canvas-element,ich Scherz nur gemäß der Projektanforderungen...können Sie bitte helfen Sie mir,auch ich habe versucht, mit canvas-vorgefertigte...gleiche problem.bitte helfen
    • Mit create-reagieren-app mit Scherz - /Enzym, kann ich bestätigen, dass das hinzufügen von canvas-vorgefertigte pro @ChidG festen canvas-Kontext-Fehler.
    • Für den Fall, jemand kommt auf der Suche für eine Lösung dieses, der Spaß kommt mit einer sehr alten version von jsdom. Wenn Sie hinzufügen jsdom Ihren Abhängigkeiten und fügen Sie eine Auflösung "jest/**/jsdom": "13.0.0" dieses Problem beheben sollte.
    • dies gibt error Received malformed response from registry for undefined. The registry may be down.

    InformationsquelleAutor mik01aj
  2. 14

    Für diejenigen, die Beispiele mit den create-reagieren-app

    Installieren 

    yarn add --dev jest-canvas-mock

    Erstellen Sie eine neue ${rootDir}/src/setupTests.js mit

    import 'jest-canvas-mock';
    • in meinem Fall, ich habe jest-canvas-mock zu meinem jest.config.js wie so setupFiles: [ "jest-canvas-mock" ]
    InformationsquelleAutor shiva
  3. 3

    Ich hatte das exakt gleiche Problem. Ich bin die Bereitstellung auf gitlab ci laufen meine tests, und da npm Leinwand erfordert eine installation von Kairo, mithilfe, war keine sinnvolle option.

    Alles, was ich wirklich tun wollte, war, zu verhöhnen die Umsetzung durch Scherz, so dass es nicht wirklich versuchen, erstellen Sie einen realen Kontext. Hier ist, wie ich es gelöst:

    Hinzugefügt, um Paket.json 

    "jest": {
  "setupFiles": ["./tests/setup.js"],
}

    tests/setup.js 

    import sinon from 'sinon';

const createElement = global.document.createElement;
const FAKECanvasElement = {
  getContext: jest.fn(() => {
    return {
      fillStyle: null,
      fillRect: jest.fn(),
      drawImage: jest.fn(),
      getImageData: jest.fn(),
    };
  }),
};

/**
 * Using Sinon to stub the createElement function call with the original method
 * unless we match the 'canvas' argument.  If that's the case, return the Fake 
 * Canvas object.
 */
sinon.stub(global.document, 'createElement')
  .callsFake(createElement)
  .withArgs('canvas')
  .returns(FAKECanvasElement);
    InformationsquelleAutor Donald White
  4. 3

    Für meinen Anwendungsfall habe ich einfach monkey-patching, wie dies

    beforeEach(() => {
    const createElement = document.createElement.bind(document);
    document.createElement = (tagName) => {
        if (tagName === 'canvas') {
            return {
                getContext: () => ({}),
                measureText: () => ({})
            };
        }
        return createElement(tagName);
    };
});

    Keine Notwendigkeit zur Installation der Leinwand-vordefinierte oder sinon.

    InformationsquelleAutor Andzej Maciusovic
  5. 1
    npm install -D canvas-prebuilt@1

    Diese bietet Unterstützung für die canvas-Scherz.Dies funktioniert sogar, wenn jemand immer Fehler wegen Lottie.js.

    InformationsquelleAutor ankita lal
  6. 0

    Testen Leinwand Ausgabe im Scherz, müssen Sie Folgendes tun:

    Stellen Sie sicher, dass Sie mit mindestens jsdom 13. Sie können dies tun, indem Sie die jsom-Paket für Scherz, für 14 ist es:

    jest-environment-jsdom-fourteen

    Und konfigurieren Scherz zu verwenden, diese

    jest --env=jest-environment-jsdom-fourteen

    oder in der package.json

    "jest": {
   ...
   "testEnvironment": "jest-environment-jsdom-fourteen",

    Gehören die canvas npm-Paket. (als der 2.x dies beinhaltet die integrierte version, so Leinwand-prebuilt " ist veraltet).

    InformationsquelleAutor Tom
Schreibe einen Kommentar