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);
  }
}

Lin Du · Accepted Answer · 2020-02-13 05:59:34Z

3

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

answered Feb 13, 2020 at 5:59

Lin Du

104k138 gold badges340 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakash Dalmia Over a year ago

I have a little change of code. added Jquery.noconflict. Your code doesn't work saying error of TypeError: jQuery.noConflict is not a function

Prakash Dalmia Over a year ago

Please check the above comments.

Collectives™ on Stack Overflow

JEST: Unit testing Javascript/Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related