emahnovets / jsdom-to-image

Generate image from JSDOM

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

jsdom-to-image's Issues

main property target is wrong

Describe the bug

I can't use the package, because is marked as not found by my test runner.

To Reproduce

npm add jsdom-to-image

try to import the module as usual

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

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

You get

    Cannot find module 'jsdom-to-image' from 'jest.setup.ts'

Expected behavior

should import the module

Additional context

Problem comes from package.json main and types properties

{
  "name": "jsdom-to-image",
  "version": "1.1.0",
  "description": "Generale image from JSDOM",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
}

They should be instead

{
  "name": "jsdom-to-image",
  "version": "1.1.0",
  "description": "Generale image from JSDOM",
  "main": "dist/src/index.js",
  "types": "dist/src/index.d.ts",
}