JSDOM to image

Generate image from JSDOM

Main goal of this package is to be used for regression testing in pair with jest-image-snapshot.

Installation

npm install --save-dev jsdom-to-image

Configuration

setGlobalOptions should be called once during tests setup.

Jest example

// jest.config.js

module.exports = {
  setupFilesAfterEnv: [
    '<rootDir>/setup-tests.js',
  ],
};

// setup-tests.js

import { setGlobalOptions } from 'jsdom-to-image';

setGlobalOptions({
  connectOptions: {
    browserWSEndpoint: 'ws://${host}:${port}'
  }
})

Launch configuration

setGlobalOptions({
  launchOptions: {
    ...
  }
})

Connect to already running browser instance

setGlobalOptions({
  connectOptions: {
    browserWSEndpoint: 'ws://${host}:${port}'
  }
})

Writing tests

This package could be used for eny framework that uses jsdom.

@testing-library/react example

import { takeImage } from 'jsdom-to-image';
import { render } from '@testing-library/react';

test('should match image snapshot', async (): Promise<void> => {
  render(
    <button class="btn btn-default" data-testid="test-button" />
  );

  expect(await takeImage({ targetSelector: '[data-testid=test-button]' })).toMatchImageSnapshot();
});

Possible Issues

Due to differences in rendering on different OS's you could face an issue when tests works on your env and failed on CI or other dev env. To fix this issue you could use browserless/chrome docker image:

# docker-compose.yml

version: '3'
services:
  browserless:
    image: browserless/chrome:latest
    container_name: "browserless"
    ports:
      - "9090:3000"

// setup-tests.js

import { setGlobalOptions } from 'jsdom-to-image';

setGlobalOptions({
  connectOptions: {
    browserWSEndpoint: 'ws://localhost:9090'
  }
})

In that case your test run would look like this:

docker-compose up -d
npm test
docker-compose down