Я пытаюсь запустить тестирование снимков изображения (т.е. не имитировать) с помощью компонента React, который отображает холст HTML5. Я использую Jest, React Testing Library, Node Canvas, Puppeteer и Jest Image Snapshot.
Учитывая render()
следующего компонента React:
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.
В настоящее время я пытаюсь отладить, где в конвейере дела идут плохо.