README

reach-et-jest-config

The standard Jest config for ET projects

Includes:

Install

npm i reach-et-jest-config --save-dev

Setup

Create a jest.config.js file and add the following

/* env node */

const jestConfig = require('@trinitymirrordigital/jest-config');

module.exports =  jestConfig({
  // ... any additional jest config can go here
});

For a list of jest config rules

Transforms

Will automatically pass asset file name as a string for the following:

jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga

Helpers

Simulate Click

Adds global method to jest for to simulate eventListeners:

//In code:
myBtn.addEventListener('click', (e)=>{
    e.preventDefault();
    // do something
})

// In your tests
test(''Testing a click event", ()=>{
    const btn = document.querySelector(''button'');
    simulateEvent(btn, ''click'');
    // Test your code works
});

Simulate KeyEvent

Adds global event to simulate keyboard event:

document.addEventListener('keydown', (e) => {
  if(e.key === 'a') {
     // do something
  }
 
});

// In your tests
test(''Testing a keyboard event", ()=>{
    keyboardEvent = (document.body, ''keydown'', {key: ''a''})
    // Test your code works
});

DOM helpers for Web component

Global functions to find elements within a component shadowRoot:

const myComponent = document.querySelector('my-component');
const btn = queryShadowRoot( myComponent, 'button');
const li = queryShadowRootAll( myComponent, 'li'); // Returns array;

Mock sizing for tests

Jest uses JSDOM to render the DOM, however due to how it works client clientWidth and clientHeight will return 0. So this monkey patches the method to allow you to set a size. It can be done is two ways:

Using mock variables:

const el = document.querySelector('div');
el._MockClientWidth = 100;
el._MockClientHeight = 50;

console.log(el.clientWidth); // return 100
console.log(el.clientHeight); // return 50

Using style variables:

const el = document.querySelector('div');
el.style.width = 100;
el.style.height = 50;

console.log(el.clientWidth); // return 100
console.log(el.clientHeight); // return 50

Web Component expect extensions:

test('my component has a button', ()=>{
  const myComponent = document.querySelector('my-component');
  expect(myComponent).toHaveShadowElement('button');
});

test('my component button has a css class', ()=>{
  const myComponent = document.querySelector('my-component');
  expect(myComponent).toHaveShadowClass('button', 'my-css-class');
})

Usage no npm install needed!