Jsdom: 모의 캔버스

에 만든 2017년 03월 22일 · 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 에 2017년 10월 18일

👍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 에 2017년 03월 22일

👍4

그러지 마세요. 향후 패치 릴리스에서 중단됩니다. 대신 getContext() 메서드를 재정의합니다(예: window.HTMLCanvasElement.prototype.getContext = ...

domenic 에 2017년 03월 22일

👍16

@domenic 감사

endel 에 2017년 03월 23일

@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

모의 캔버스(Windows에서 지원되지 않기 때문에 캔버스 패키지를 사용하지 않음)가 문제에 대한 의견이 아니라 공식 문서에서 다루어진다면 매우 좋을 것입니다.

cattermo 에 2017년 10월 18일

Windows에서 지원되지 않으므로 캔버스 패키지를 사용하지 않고

캔버스 사전 제작 옵션이 아닌 이유는 무엇입니까? 이것이 우리 프로젝트에서 문제 없이 사용하고 있는 것입니다(Win, Mac 및 Linux, 모든 것이 x64여야 하지만).

molant 에 2017년 10월 18일

👎4 🎉1 👍1

일반적으로 우리는 문서를 추가하거나 일회성 모의 문제를 도울 계획이 없습니다. https://github.com/tmpvar/jsdom#intervening -before-parsing 일반적으로 이 내용을 다루었으며 특정 문제는 특정 코드베이스와 관련될 것입니다.

domenic 에 2017년 10월 18일

다음은 내가 생각해낸 캔버스를 조롱하는 간단한 방법입니다.

//
// 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 에 2017년 10월 18일

👍21 🎉8 ❤7 😄6 🚀1

정말 감사합니다! 캔버스 사전 빌드 패키지가 작동하는 것 같습니다.

cattermo 에 2017년 10월 18일

안녕하세요 @cattermo 입니다 .
내 deps에 미리 빌드된 캔버스를 추가했습니다. 내 jest 구성을 변경해야 합니까? 나는 그것이 나에게 제공하는 작동하게 할 수 없습니다
Not implemented: HTMLCanvasElement.prototype.toBlob (without installing the canvas npm package)

micabe 에 2017년 10월 24일

@micabe
구성을 변경하지 않았습니다. Jsdom은 node_modules에 있는 경우 미리 빌드된 캔버스를 선택합니다.

특정 기능이 지원되지 않는 것은 아닐까?

cattermo 에 2017년 10월 24일

👍1

yarn cache clean 이후에 작동합니다. 번거롭게 해서 죄송합니다! @cattermo 감사합니다

micabe 에 2017년 10월 30일

아마도 jest-canvas-mock 이 도움이 될 수 있습니다.

hustcc 에 2018년 02월 01일

👍21 🎉3 😄2

솔루션은 간단합니다. canvas 를 devDependency로 설치하고 jest 테스트를 다시 실행하기

참조: https://github.com/jsdom/jsdom#canvas -support

noscripter 에 2018년 10월 15일

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

jsdom이 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;
  }

require('canvas')를 수행하면 Canvas 함수가 있는 Object를 반환합니다. Canvas 함수를 바로 반환하지 않습니다. 아니면이 문제에 대해 내가 잘못 알고 있습니까? 캔버스에 미리 빌드된 모듈을 사용할 때는 잘 작동했지만 캔버스 모듈에 다른 API가 있는 것 같습니다. 저는 캔버스의 최신 버전인 2.0.1을 사용하고 있습니다.
편집하다
이전 주 버전(1.6.x)을 테스트했는데 잘 작동합니다. JSDOM이 처리하지 않는 API 변경 사항입니다.

viniciusd 에 2018년 10월 25일

👍5

당신은 그냥 할 수 있습니다:

HTMLCanvasElement.prototype.getContext = jest.fn()

실제 구현이 중요하지 않은 경우

YevgenSnuffkin 에 2018년 11월 26일

👍14 ❤5 🚀1

jsdom이 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;
  }
require('canvas')를 수행하면 Canvas 함수가 있는 Object를 반환합니다. Canvas 함수를 바로 반환하지 않습니다. 아니면이 문제에 대해 내가 잘못 알고 있습니까? 캔버스에 미리 빌드된 모듈을 사용할 때는 잘 작동했지만 캔버스 모듈에 다른 API가 있는 것 같습니다. 저는 캔버스의 최신 버전인 2.0.1을 사용하고 있습니다.
편집하다
이전 주 버전(1.6.x)을 테스트했는데 잘 작동합니다. JSDOM이 처리하지 않는 API 변경 사항입니다.

나도 같은 문제를 안고있어. 수정 사항이 얼마 전에 https://github.com/jsdom/jsdom/pull/1964 에 병합되었고 13 버전부터 사용할 수 있으므로 문제가 jsdom에 없는 것 같습니다.
그러나, jsdom 에서 버전 jest-environment-jsdom 여전히에 갇혀 ^11.5.1 나는 그 문제를 일으키는 생각 :
https://github.com/facebook/jest/blob/2e2d2c8deb76e71c0dfa85ed36b81d1f89e0d87/packages/jest-environment-jsdom/package.json#L14

paradite 에 2019년 01월 29일

Canvas를 설치하지 않고 canvas-prebuilt 는 HTMLCanvasElement와 관련된 오류를 제거할 수 있었고 @endel 이 이 문제를 해결하기 위한 해킹으로 멋지게 제안한 다른 캔버스 방법을 제거할 수 있었습니다. @hustcc가 제안한 것처럼 -canvas-mock을 사용 하여 아주 깨끗한 솔루션을 찾았습니다. 기술적인 세부 사항은 이 댓글을 참조하십시오.

danieldanielecki 에 2019년 03월 01일

"WebkitBackingStorePixelRatio of null을 읽을 수 없습니다"와 같은 메시지가 표시되고 "
구현되지 않음: HTMLCanvasElement.prototype.getContext(canvas npm 패키지를 설치하지 않음)" 및 canvas(-prebuilt) 설치로는 충분하지 않았습니다. package-lock.json 내부로 들어가 jest-environment-jsdom이 jsdom 13을 가리키도록 수정했습니다. , node_modules를 버리고 npm install을 다시 실행했습니다. 오류 메시지가 사라졌습니다. @paradite 가 옳다고 생각하고

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

grtjn 에 2019년 03월 01일

피드백을 받았습니다. 농담이 이전 노드 버전과 관련이 있습니다. 최신 노드에 대한 지원이 필요한 경우 여기를 참조 하십시오.

grtjn 에 2019년 03월 01일

@grtjn - -environment-jsdom-thirteen 종속성을 확인했지만 제 경우에는 여전히 이 2개의 동일한 오류가 발생했습니다.

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 에 2019년 03월 04일

참고로 제 jest 구성에 "testEnvironment": "jest-environment-jsdom-thirteen" 를 추가하고 Canvas 패키지와 Cairo OS 도구 세트를 설치해야 했습니다. Canvas-prebuilt가 저에게 효과가 없는 것 같았습니다. 저는 뷰를 사용하고 있습니다.

grtjn 에 2019년 03월 05일

👍3

Cairo OS 도구 세트 종속성에 대한 링크? 찾을 수 없습니다.

danieldanielecki 에 2019년 03월 08일

@danieldanielecki 'canvas' 패키지 메인 페이지 참조: https://www.npmjs.com/package/canvas#compiling

grtjn 에 2019년 03월 10일

👍1

@grtjn 감사합니다. 언젠가는 활용할 수 있을 것입니다. 나는 그것을 놓치고 있었지만 내 솔루션보다 더 복잡해 보이기 때문에 프로젝트를 그대로 유지합니다.

danieldanielecki 에 2019년 03월 10일

necropost에게 미안하지만 jest -environment-jsdom-thirteen 설치에 대한

cmdcolin 에 2019년 06월 21일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Jsdom: 모의 캔버스

가장 유용한 댓글

모든 25 댓글

관련 문제