JEST | Assert a function was called inside addEventListener callback

Question

I have the following function:

Code to test

export default function main() {
    const createAndAppendPTag = () => {
        const p = document.createElement('p');
        document.body.appendChild(p);
    };

    window.document.addEventListener('click', () => {
        createAndAppendPTag();
    });
}

The question is: How can I assert using Jest that createAndAppendPTag was called upon a document click event ?

---

Jest

This is what I tried, but can't seem to make the test pass:

import main from './main'

window.document.addEventListener = jest.fn();
const createAndAppendPTag = jest.fn();

describe('Main', () => {
    const documentClickEvent = new Event('click');

    test('appends p tag to the document', () => {
        // dispatching event before and after invoking `main` to be sure
        window.document.dispatchEvent(documentClickEvent);

        main();

        window.document.dispatchEvent(documentClickEvent);

        expect(window.document.addEventListener).toHaveBeenNthCalledWith(1, 'click', () => {});
        expect(createAndAppendPTag).toHaveBeenCalledTimes(1);
    });
});

Terminal

This results in the following:

🔴  Main › appends p tag to the document
    
expect(jest.fn()).toHaveBeenNthCalledWith(n, ...expected)
    
n: 1
Expected: "click", [Function anonymous]
    
Number of calls: 0
    
5   | main();
6   | window.document.dispatchEvent(documentClickEvent);
> 7 | expect(window.document.addEventListener).toHaveBeenNthCalledWith(1, 'click', () => {});
*   |                                          ^

Thanks in advance.

Answer 1

I ran this simplified test to check for the side effect (p element was appended to body):

main.js

export default function main() {
  const createAndAppendPTag = () => {
    const p = document.createElement('p');
    document.body.appendChild(p);
  };

  window.document.addEventListener('click', () => {
    createAndAppendPTag();
  });
}

main.test.js

import main from `../main.js`;

it('"main" listener appends "P" to body upon click', () => {
  // add listener
  main();

  // clear body contents
  document.body.innerHTML = "";

  // dispatch click event to listener
  const addEvt = new Event('click');
  document.dispatchEvent(addEvt);

  // check for existence of "P" element
  const bodyEl = document.body.firstChild;
  expect(bodyEl).not.toEqual(null);
  expect(bodyEl.tagName).toBe('P');
  document.body.innerHTML = "";
});

It passed:

  ✓ "main" listener appends "P" to body upon click (2 ms)

Answer 2

You can use jest.spyOn(object, methodName) to create mocks for window.document.addEventListener(), document.createElement() and document.body.appendChild() methods.

Since the createAndAppendPTag function is private, you cannot spy/mock it, but you can indirectly determine whether it is called by asserting its internal method.

E.g. using "jest": "^26.6.3":

main.js:

export default function main() {
  const createAndAppendPTag = () => {
    const p = document.createElement('p');
    document.body.appendChild(p);
  };

  window.document.addEventListener('click', () => {
    createAndAppendPTag();
  });
}

main.test.js:

import main from './main';

describe('65451115', () => {
  afterAll(() => {
    jest.restoreAllMocks();
  });
  it('should pass', () => {
    const createElementSpy = jest.spyOn(document, 'createElement').mockReturnValue('fake p');
    const appendChildSpy = jest.spyOn(document.body, 'appendChild').mockReturnValue();
    const addEventListenerSpy = jest
      .spyOn(window.document, 'addEventListener')
      .mockImplementationOnce((event, handler) => {
        handler();
      });
    main();
    expect(addEventListenerSpy).toBeCalledWith('click', expect.any(Function));
    expect(createElementSpy).toBeCalledWith('p');
    expect(appendChildSpy).toBeCalledWith('fake p');
  });
});

unit test result:

 PASS  examples/65451115/main.test.js (10.621 s)
  65451115
    ✓ should pass (4 ms)

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