我如何使用 Mocha 对绘制在屏幕上的 React 组件进行单元测试<canvas> ?

Question

I have a React component that uses a <canvas> for user interaction. I'm not using react-canvas or react-art or anything like that; instead, I just draw on the canvas's 2D context in componentDidMount and componentDidUpdate .

I extracted as much of the logic as possible to two separate modules: one comprises entirely pure functions and provides the core operations independent of React, and the other provides event handlers and lifecycle mixins to be attached to the React component. I can test the first one easily, and the second one with a bit of mocking.

However, I'd also like to very minimally test the main canvas component just to make sure that it can render with no errors given some reasonable set of props. This is proving rather difficult because componentDidMount calls this.refs.canvas.getContext('2d') , which doesn't appear to be defined in the node environment. So I came up with the following solution, which I don't like very much; it involves both patching React.createElement and creating a fake context object:

// file: test/components/MyCanvasTest.jsx
import {describe, it} from 'mocha';
import {expect} from 'chai';

import React, {Component} from 'react';

import {declareMochaMock} from '../TestUtils';
import {
    renderIntoDocument,
    scryRenderedDOMComponentsWithTag,
} from 'react-addons-test-utils';

import MyCanvas from '../../src/components/MyCanvas';

describe('MyCanvas', () => {

    const noop = () => {};

    // These things are used in my component
    // but I don't want them to actually do anything,
    // so I mock them as no-ops.
    const propsToMockAsNoop = [
        'addEventListener',
        'removeEventListener',
        'setInterval',
        'clearInterval',
    ];
    propsToMockAsNoop.forEach(prop => declareMochaMock(window, prop, noop));

    // This thing is used in my component
    // and I need it to return a dummy value.
    declareMochaMock(window, 'getComputedStyle', () => ({ width: "720px" }));

    // This class replaces <canvas> elements.
    const canvasMockClassName = 'mocked-canvas-component';
    class CanvasMock extends Component {
        render() {
            return <div className={canvasMockClassName} />;
        }
        constructor() {
            super();
            this.width = 720;
            this.height = 480;
        }
        getContext() {
            // Here I have to include all the methods
            // that my component calls on the canvas context.
            return {
                arc: noop,
                beginPath: noop,
                canvas: this,
                clearRect: noop,
                fill: noop,
                fillStyle: '',
                fillText: noop,
                lineTo: noop,
                measureText: () => 100,
                moveTo: noop,
                stroke: noop,
                strokeStyle: '',
                textAlign: 'left',
                textBaseline: 'baseline',
            };
        }
    }

    const originalCreateElement = React.createElement;
    declareMochaMock(React, 'createElement', (...args) => {
        const newArgs = args[0] === 'canvas' ?
            [CanvasMock, ...args.slice(1)] :
            args;
        return originalCreateElement.apply(React, newArgs);
    });

    it("should render a <canvas>", () => {
        const element = <MyCanvas />;
        const component = renderIntoDocument(element);
        expect(scryRenderedDOMComponentsWithTag
            (component, canvasMockClassName)).to.have.length(1);
    });

});

The declareMochaMock function is defined as

// file: test/TestUtils.js
export function declareMochaMock(target, propertyName, newValue) {
    let oldExisted;
    let oldValue;
    before(`set up mock for '${propertyName}'`, () => {
        oldValue = target[propertyName];
        oldExisted = Object.prototype.hasOwnProperty.call(
            target, propertyName);
        target[propertyName] = newValue;
    });
    after(`tear down mock for '${propertyName}'`, () => {
        if (oldExisted) {
            target[propertyName] = oldValue;
        } else {
            delete target[propertyName];
        }
    });
}

I can't use a shallow renderer because my component accesses the canvas via a ref , and ref s aren't yet supported in the shallow renderer.

Is there a way to approach this test with my current unit testing frameworks (ie, not adding Jest or anything like that) while reducing the amount that the test harness needs to know about?

(The full canvas component is available here .)

Answer 1

You should be able to use:

https://www.npmjs.com/package/canvas#installation along with JSDOM. (make sure you follow the installation procudure for your OS)

Example test:

import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { jsdom } from 'jsdom';

import Chart from '../../src/index';

const createDOM = () => jsdom('<!doctype html><html><body><div></div></body></html>');

describe('<Chart />', () => {
  let DOM;

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(255,99,132,0.2)',
        borderColor: 'rgba(255,99,132,1)',
        borderWidth: 1,
        hoverBackgroundColor: 'rgba(255,99,132,0.4)',
        hoverBorderColor: 'rgba(255,99,132,1)',
        data: [65, 59, 80, 81, 56, 55, 40]
      }
    ]
  };

  const mountComponent = props => mount(
    <Chart data={data} {...props} />,
    { attachTo: DOM.body.firstChild }
  );

  beforeEach(() => {
    DOM = createDOM();
  });

  it('renders', () => {
    const wrapper = mountComponent();
    console.log(wrapper.html());

    expect(true).to.be.true;
  });
});

It's testing Chart.js which mounts to canvas elements. I'm using mocha and enzyme but shouldn't be different for w/e test suite you are using.

Answer 2

I ran into this issue testing Lottie animations using AVA. With help from gor181 's solution, here is how I got it to work, using the latest version of JSDOM 16.2.1 in 2020.

First Install canvas and JSDOM npm i canvas jsdom --save-dev

Here is an example test using JSDOM:

import { mount } from 'enzyme';
import { JSDOM } from 'jsdom';

const DOM = new JSDOM('<!doctype html><html><body><div></div></body></html>');
const mountComponent = props =>
    mount(<AnimationComponent options={defaultOptions} />, {
        attachTo: DOM.body
    });

test('Animation', t => {
    const wrapper = mountComponent();
    console.log(wrapper.html()); 
    t.is(wrapper.find('div').length, 2);
});

You can console.log DOM to see which elements you want to attach in your mountComponent

console.log('DOM:', DOM);

Hope this helps!