@trinitymirrordigital/dragonfly-jest-config

Setup standard Jest config for dragonfly projects

Install

yarn add -D jest @trinitymirrordigital/dragonfly-jest-config jest-extended

Usage

Create jest.config.js in the root of your project and add the following:

/*
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

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

module.exports = {
  ...jestConfig,
  // Add your specific project config here
};

then add the following to the following to your package.json:

"scripts": {
  "test": "yarn run test:jest",
  "test:jest": "jest",
  "test:jest:watch": "jest --watch",
  "test:jest:watch:slow": "jest --watch --no-cache",
},

Packages that are included:

• Jest - main unit testing
• Jest-extends - additional expects
• jest-fetch-mock - for mock fetch requests

Helper methods

For fetch methods jest-fetch-mock is bound to the global scope so the following will work:

//api.test.js
import { APIRequest } from './api';

describe('testing api', () => {
  beforeEach(() => {
    fetch.resetMocks();
  });

  it('calls google and returns data to me', async () => {
    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));

    //assert on the response
    const res = await APIRequest('google');
    expect(res.data).toEqual('12345');

    //assert on the times called and arguments given to fetch
    expect(fetch.mock.calls.length).toEqual(1);
    expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
  });
});

ManageMocks

To help manage mocks you can utilise the manageMock global object:

To add:

manageMock.add(myMock);
//or
manageMock.add([myMock, myMock2, myMock3]);

to clear all mocks:

manageMock.clearAfter(); // triggers afterEach method
// or
afterEach(() => {
  manageMock.clear();
});

to reset all mocks:

afterEach(() => {
  manageMock.reset();
});

to remove a move from the mockManager:

manageMock.removeAll(); // triggers afterAll

to remove a specific mock:

afterAll(() => {
  manageMock.delete(myMock);
});

Event helper

So if you need to mock a click event just call the following:

const myButton = document.querySelector('button');
global.simulateEvent(myButton, 'click');

Sizing helpers

Jest will often return 0 for these values, so if you need to mock page size you can do the following :

For clientWidth:

const myDiv = document.querySelector('.some-div');
myDiv._MockClientWidth = 250;
expect(myDiv.clientWidth).toEqual(250);

For clientHeight:

const myDiv = document.querySelector('.some-div');
myDiv._MockClientHeight = 250;
expect(myDiv.clientHeight).toEqual(250);

for getBoundingClientRect:

const myDiv = document.querySelector('.some-div');
myDiv._MockClientRect = { left: 250, top: 10, right: 20, bottom: 20, width: 250, height: 250 };
expect(myDiv.getBoundingClientRect()).toContainAllEntries([
  ['left', 250],
  ['top', 10],
  ['right', 20],
  ['bottom', 20],
  ['width', 250],
  ['height', 250],
]);

Additional Extends

Element matchers

| Matcher | Example | | :---------------- | :------------------------------------------------------------------------------- | | toBeElement | expect(document.createElement('div')).toBeElement(); | | toHaveAttribute | expect(document.querySelector('div')).toHaveAttribute('aria-hidden', 'false'); | | toHaveTextContent | expect(document.querySelector('div')).toHaveTextContent('Some text'); | | toHaveCssClass | expect(document.querySelector('div')).toHaveCssClass('some-class'); |

ShadowDom matcher

| Matcher | Example | | :------------------ | :--------------------------------------------------------------------------------------- | | toHaveShadowElement | expect(document.querySelector('my-component')).toHaveShadowElement('h1'); | | toHaveShadowClass | expect(document.querySelector('my-component')).toHaveShadowClass('div', 'some-class'); |

Other Matchers

| Matcher | Example | | :---------- | :----------------------------------------------------- | | toBeElement | expect(document.createElement('div')).toBeElement(); | | hasKey | expect({foo: 'bar'}).hasKey('foo'); |