JEST: Unit testing Javascript/Jquery

Question

Hi I wanted to unit test my javascript code using Jest and the click function inside it.

swipe.js

export default class swipe {
  constructor() {
    this.init();
  }

  init() {
    this.postRender();
  }

  postRender() {
    const jqry = jQuery.noConflict();
    (function (jqry) {
      jqry(document).ready(() => {
        jqry('#buttonID').on('click', () => {
          jqry('#navigation').addClass('blue');
        });
      });
    })(jqry);
  }
}

Answer 1

Here is the unit test solution:

swipe.js :

import $ from 'jquery';

export default class swipe {
  constructor() {
    this.init();
  }

  init() {
    this.postRender();
  }

  postRender() {
    $(document).ready(() => {
      $('#buttonID').on('click', () => {
        $('#navigation').addClass('blue');
      });
    });
  }
}

swipe.test.js :

import Swipe from './swipe';
import $ from 'jquery';

jest.mock(
  'jquery',
  () => {
    const m$ = { on: jest.fn(), ready: jest.fn(), addClass: jest.fn() };
    return jest.fn(() => m$);
  },
  // remove this option if you have installed jquery module
  { virtual: true },
);

describe('60190274', () => {
  it('should add class when click the button', () => {
    $().ready.mockImplementationOnce((callback) => callback());
    $().on.mockImplementationOnce((event, handler) => handler());
    new Swipe();
    expect($).toBeCalledWith(document);
    expect($).toBeCalledWith('#buttonID');
    expect($).toBeCalledWith('#navigation');
    expect($().ready).toBeCalled();
    expect($().on).toBeCalledWith('click', expect.any(Function));
    expect($().addClass).toBeCalledWith('blue');
  });
});

Unit test results with 100% coverage:

 PASS  stackoverflow/60190274/swipe.test.js
  60190274
    ✓ should add class when click the button (6ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 swipe.js |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.163s, estimated 5s

source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/60190274