Как проверить снимок изображения компонента React с использованием HTML5 canvas? - PullRequest
Новая
       25

Как проверить снимок изображения компонента React с использованием HTML5 canvas?

0 голосов
/ 04 марта 2019

Я пытаюсь заставить тестирование снимка изображения работать (то есть, не издевается) с компонентом React, который визуализирует холст HTML5.Я использую Jest, React Testing Library, Node Canvas, Puppeteer и Jest Image Snapshot.

Учитывая следующие компоненты React render(): 

  public render(): React.ReactElement<TestCanvas> {
    const { innerWidth, innerHeight } = window;

    return (
      <div id="canvas" style={{ height: `${innerHeight}px`, width: `${innerWidth}px` }}>
        <canvas ref={this.canvasRef} />
      </div>
    );
  }

Вот что может сделать Jest-тествыглядят так: 

  it('should render a <TestCanvas/> component', async () => {
    const { container } = render(<TestCanvas />);

    const page: puppeteer.Page = await browser.newPage();
    await page.setContent(container.outerHTML);
    const image: string = await page.screenshot();

    expect(image).toMatchImageSnapshot();
  });

Однако этот тест генерирует пустое, белое, PNG-изображение 800x600 в качестве базовой линии.

Если, однако, я изменю тест на следующее: 

  it('should render a <TestCanvas/> component', async () => {
    const { container } = render(<TestCanvas />);

    const canvas: HTMLCanvasElement = container.querySelector('canvas') as HTMLCanvasElement;
    const img = document.createElement('img');
    img.src = canvas.toDataURL();

    const page: puppeteer.Page = await browser.newPage();
    await page.setContent(img.outerHTML);
    const image: string = await page.screenshot();

    expect(image).toMatchImageSnapshot();
  });

Он генерирует базовый снимок PNG на основе моего компонента React очень хорошо.

В настоящее время я пытаюсь отладить, где в конвейере дела идут плохо.

...