Jsdom: قماش وهمي

تم إنشاؤها على ٢٢ مارس ٢٠١٧ · 25تعليقات · مصدر: jsdom/jsdom

هل من الممكن محاكاة لوحة الرسم بدون التنفيذ الفعلي ( canvas / canvas-prebuilt )؟

أرغب في منع حدوث هذا الخطأ ، لأن وظيفة اللوحة القماشية ليست مهمة حقًا بالنسبة لي:

Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

مصدر

endel

👍3

التعليق الأكثر فائدة

إليك طريقة بسيطة للسخرية من القماش الذي توصلت إليه:

//
// Mock Canvas / Context2D calls
//
function mockCanvas (window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function() {},
            clearRect: function(){},
            getImageData: function(x, y, w, h) {
                return  {
                    data: new Array(w*h*4)
                };
            },
            putImageData: function() {},
            createImageData: function(){ return []},
            setTransform: function(){},
            drawImage: function(){},
            save: function(){},
            fillText: function(){},
            restore: function(){},
            beginPath: function(){},
            moveTo: function(){},
            lineTo: function(){},
            closePath: function(){},
            stroke: function(){},
            translate: function(){},
            scale: function(){},
            rotate: function(){},
            arc: function(){},
            fill: function(){},
            measureText: function(){
                return { width: 0 };
            },
            transform: function(){},
            rect: function(){},
            clip: function(){},
        };
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return "";
    }
}

const document = jsdom.jsdom(undefined, {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

const window = document.defaultView;
mockCanvas(window);

endel في ١٨ أكتوبر ٢٠١٧

👍21 🎉8 ❤7 😄6 🚀1

ال 25 كومينتر

في حالة احتياج أي شخص لذلك ، فإليك طريقة حلها:

const utils = require("jsdom/lib/jsdom/utils");
const canvasMock = require("canvas-mock");

function Canvas () {
    canvasMock(this);
    this.toDataURL = function() { return ""; }
}
utils.Canvas = Canvas;

endel في ٢٢ مارس ٢٠١٧

👍4

من فضلك لا تفعل ذلك. سيتم كسرها في إصدار التصحيح في المستقبل. بدلاً من ذلك ، تجاوز طريقة getContext () ، مثل window.HTMLCanvasElement.prototype.getContext = ...

domenic في ٢٢ مارس ٢٠١٧

👍16

شكرا دومينيك !

endel في ٢٣ مارس ٢٠١٧

domenic لا يمكنني الحصول على ذلك للعمل. لا يتم استدعاء طريقي الذي تم تجاوزه. أستخدم jest وملف الإعداد النصي على النحو التالي:

import { jsdom } from 'jsdom';
import mockLocalStorage from './mockLocalStorage';
import jQuery from 'jquery';
import Backbone from 'backbone';
import moment from 'moment';

const dom = jsdom('<!doctype html><html><body></body></html>');
const { window } = dom.defaultView;

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
}

//Mock canvas (used by qtip)
window.HTMLCanvasElement.prototype.getContext = () => {
    return {};
};

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js',
};
global.localStorage = mockLocalStorage;
global.jQuery = jQuery;
global.$ = jQuery;
global.fetch = () => Promise.resolve();
Backbone.$ = jQuery;
copyProps(window, global);

//Mock Mousetrap (only works in browser)
jest.mock('mousetrap', () => { return { bind: () => {}}});

//Set moment locale for all tests
moment.locale('sv');

آسف للتلويث العالمي في العقدة ، لكن هذه قاعدة رمز قديمة جدًا وكبيرة أحاول الانتقال إلى Jest.
إصدار الدعابة: 21.2.1
إصدار Jsdom: 9.12.0

سيكون أمرًا رائعًا جدًا إذا تمت تغطية الاستهزاء باللوحة القماشية (بدون استخدام حزمة Canvas نظرًا لعدم دعمها في Windows) بواسطة المستندات الرسمية وليس فقط كتعليق في مشكلة.

cattermo في ١٨ أكتوبر ٢٠١٧

بدون استخدام حزمة canvas نظرًا لعدم دعمها في Windows

لماذا لا يعد خيار Canvas-Preebuild خيارًا

molant في ١٨ أكتوبر ٢٠١٧

👎4 🎉1 👍1

بشكل عام ، لا نخطط لإضافة مستندات أو المساعدة في مشكلات السخرية لمرة واحدة. لقد غطينا هذا في https://github.com/tmpvar/jsdom#intervening -before-parsing بشكل عام وستكون أي مشكلات محددة مرتبطة بقاعدة التعليمات البرمجية الخاصة بك.

domenic في ١٨ أكتوبر ٢٠١٧

إليك طريقة بسيطة للسخرية من القماش الذي توصلت إليه:

//
// Mock Canvas / Context2D calls
//
function mockCanvas (window) {
    window.HTMLCanvasElement.prototype.getContext = function () {
        return {
            fillRect: function() {},
            clearRect: function(){},
            getImageData: function(x, y, w, h) {
                return  {
                    data: new Array(w*h*4)
                };
            },
            putImageData: function() {},
            createImageData: function(){ return []},
            setTransform: function(){},
            drawImage: function(){},
            save: function(){},
            fillText: function(){},
            restore: function(){},
            beginPath: function(){},
            moveTo: function(){},
            lineTo: function(){},
            closePath: function(){},
            stroke: function(){},
            translate: function(){},
            scale: function(){},
            rotate: function(){},
            arc: function(){},
            fill: function(){},
            measureText: function(){
                return { width: 0 };
            },
            transform: function(){},
            rect: function(){},
            clip: function(){},
        };
    }

    window.HTMLCanvasElement.prototype.toDataURL = function () {
        return "";
    }
}

const document = jsdom.jsdom(undefined, {
  virtualConsole: jsdom.createVirtualConsole().sendTo(console)
});

const window = document.defaultView;
mockCanvas(window);

endel في ١٨ أكتوبر ٢٠١٧

👍21 🎉8 ❤7 😄6 🚀1

شكرا جزيلا! يبدو أن حزمة قماشية مسبقة الصنع تعمل.

cattermo في ١٨ أكتوبر ٢٠١٧

مرحبًا cattermo ،
لقد أضفت لوحة قماشية مسبقة الصنع إلى واجباتي ، هل أحتاج إلى تغيير تكوين الدعابة الخاص بي؟ لا أستطيع أن أجعله يعمل
Not implemented: HTMLCanvasElement.prototype.toBlob (without installing the canvas npm package)

micabe في ٢٤ أكتوبر ٢٠١٧

تضمين التغريدة
لم أقم بإجراء أي تغييرات في التكوين. سيقوم Jsdom بالتقاط قماش تم إنشاؤه مسبقًا إذا كان موجودًا في node_modules.

ربما لا يتم دعم هذه الوظيفة المحددة؟

cattermo في ٢٤ أكتوبر ٢٠١٧

👍1

إنه يعمل الآن بعد yarn cache clean آسف لإزعاجك! شكرا @ كاترمو

micabe في ٣٠ أكتوبر ٢٠١٧

ربما يمكن أن تساعد jest-canvas-mock .

hustcc في ١ فبراير ٢٠١٨

👍21 🎉3 😄2

الحل بسيط ، فقط قم بتثبيت canvas كتطبيق devDependency وأعد تشغيل اختبارات الدعابة.

المرجع: https://github.com/jsdom/jsdom#canvas -support

noscripter في ١٥ أكتوبر ٢٠١٨

👎4 👍4 🚀1 ❤1 😕1 🎉1 😄1

لا يزال هذا لا يعمل بسبب الطريقة التي يتحقق بها jsdom من وحدات Canvas في lib / jsdom / utils.js:

  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }

يؤدي القيام بطلب ('canvas') إلى إرجاع كائن يحتوي على وظيفة Canvas. لا تقوم بإرجاع وظيفة Canvas على الفور. أم أنني مخطئ في هذا الموضوع؟ لقد نجحت بشكل جيد عندما كنت أستخدم الوحدة النمطية مسبقة الصنع ، ولكن يبدو أن وحدة canvas لها واجهة برمجة تطبيقات مختلفة. أنا أستخدم أحدث إصدار من canvas ، 2.0.1.
يحرر
لقد اختبرت الإصدار الرئيسي السابق (1.6.x) وهو يعمل بشكل جيد ، إنه تغيير في واجهة برمجة التطبيقات لا يتعامل معه JSDOM.

viniciusd في ٢٥ أكتوبر ٢٠١٨

👍5

يمكنك فقط القيام بما يلي:

HTMLCanvasElement.prototype.getContext = jest.fn()

إذا كان التنفيذ الفعلي غير مهم بالنسبة لك

YevgenSnuffkin في ٢٦ نوفمبر ٢٠١٨

👍14 ❤5 🚀1

لا يزال هذا لا يعمل بسبب الطريقة التي يتحقق بها jsdom من وحدات Canvas في lib / jsdom / utils.js:
  exports.Canvas = require(moduleName);
  if (typeof exports.Canvas !== "function") {
    // In browserify, the require will succeed but return an empty object
    exports.Canvas = null;
  }
يؤدي القيام بطلب ('canvas') إلى إرجاع كائن يحتوي على وظيفة Canvas. لا تقوم بإرجاع وظيفة Canvas على الفور. أم أنني مخطئ في هذا الموضوع؟ لقد نجحت بشكل جيد عندما كنت أستخدم الوحدة النمطية مسبقة الصنع ، ولكن يبدو أن وحدة canvas لها واجهة برمجة تطبيقات مختلفة. أنا أستخدم أحدث إصدار من canvas ، 2.0.1.
يحرر
لقد اختبرت الإصدار الرئيسي السابق (1.6.x) وهو يعمل بشكل جيد ، إنه تغيير في واجهة برمجة التطبيقات لا يتعامل معه JSDOM.

لدي نفس المشكلة. يبدو أن المشكلات لا تتعلق بـ jsdom حيث تم دمج الإصلاح منذ فترة في https://github.com/jsdom/jsdom/pull/1964 ومتوفر منذ الإصدار 13 .
ومع ذلك ، فإن الإصدار jsdom في jest-environment-jsdom لا يزال عالقًا عند ^11.5.1 وأعتقد أن هذا هو سبب المشكلة:
https://github.com/facebook/jest/blob/2e2d2c8dedb76e71c0dfa85ed36b81d1f89e0d87/packages/jest-environment-jsdom/package.json#L14

paradite في ٢٩ يناير ٢٠١٩

بدون تثبيت Canvas ، أو canvas-prebuilt ، كان قادرًا على التخلص من الأخطاء المتعلقة بـ HTMLCanvasElement ، بالإضافة إلى أي أساليب أخرى في canvas اقترحها endel بشكل hustcc ، استخدم jest-canvas-mock مع إيجاد حل نظيف تمامًا. للحصول على التفاصيل الفنية يرجى إلقاء نظرة على هذا التعليق .

danieldanielecki في ١ مارس ٢٠١٩

كنت أرى رسائل مثل "Cannot read webkitBackingStorePixelRatio of null" ، وكذلك "
لم يتم التنفيذ: HTMLCanvasElement.prototype.getContext (بدون تثبيت حزمة canvas npm) ، ولم يكن تثبيت canvas (-prebuilt) كافيًا. دخلت داخل package-lock.json ، وأصلحت jest-environment-jsdom للإشارة إلى jsdom 13 ، والتخلص من node_modules ، و reran npm install. اختفت رسائل الخطأ. أعتقد أن paradite صحيح ، وفتح تذكرة ضد الدعابة:

https://github.com/facebook/jest/issues/8016

grtjn في ١ مارس ٢٠١٩

حصلت على ردود الفعل. يتعلق الأمر بكون الدعابة عالقة مع إصدارات العقدة الأقدم. إذا كنت بحاجة إلى دعم لأحدث عقدة ، فانظر هنا: https://www.npmjs.com/package/jest-environment-jsdom-thirteen. هذا هو مازحًا محددًا ، لذلك ربما يكون خارج الموضوع قليلاً هنا. تقاسم على أي حال للأجيال القادمة ..

grtjn في ١ مارس ٢٠١٩

grtjn - فحصت jest-environment-jsdom-thirteen ، لكن في حالتي ما زلت أتلقى هذين الخطأين بالضبط

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
TypeError: Cannot read property 'fillRect' of null

مع الاحتفاظ بحل الذي ذكرته سابقًا ، حول إصدار Node ، لن أقول إن 10.15 هو إصدار مهمل ، لأنني واجهت مشاكل مثل هذه البيئة

Angular CLI: 7.2.4
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4

danieldanielecki في ٤ مارس ٢٠١٩

لمعلوماتك: اضطررت إلى إلحاق "testEnvironment": "jest-environment-jsdom-thirteen" بتكوين jest الخاص بي ، وتثبيت حزمة canvas ، بالإضافة إلى مجموعة أدوات نظام التشغيل Cairo OS. لا يبدو أن القماش المصمم مسبقًا يعمل بالنسبة لي. أنا أستخدم Vue.

grtjn في ٥ مارس ٢٠١٩

👍3

الارتباط بتبعية مجموعة أدوات نظام تشغيل القاهرة؟ لا يمكن العثور على ذلك.

danieldanielecki في ٨ مارس ٢٠١٩

danieldanielecki شاهد الصفحة الرئيسية لحزمة "canvas": https://www.npmjs.com/package/canvas#compiling

grtjn في ١٠ مارس ٢٠١٩

👍1

grtjn شكرًا على ذلك - ربما في مرحلة ما سيستفيد منها. كنت أفتقده ، لكن يبدو أنه أكثر تعقيدًا من الحل الذي قدمته ، لذا احتفظ بالمشروع كما هو.

danieldanielecki في ١٠ مارس ٢٠١٩

آسف على necropost لكن اقتراح grtjn بتثبيت jest-environment-jsdom-thirteen (لقد استخدمت أربعة عشر منذ ذلك الحين فقط) حل مشكلتي. لقد حاولت استخدام jest-canvas-mock لكننا فعلنا بعض الأشياء الغريبة حيث قمنا بإنشاء صورة مقلدة باستخدام node-canvas عندما لا يتوفر OffscreenCanvas ، وهو ليس موجودًا في العديد من المتصفحات ، وقد تم الخلط بين jest-canvas-mock بسبب هذا. ربما في يوم آخر سنعمل على ذلك ... إنها مكتبة صورية رائعة.