Jest：测试是否调用了 addEventListener 的回调函数

Question

I have next functions:

const hashChangeCallback = event => {
   console.log('event', event.oldUrl)
}

const hashHandler = () => {
  return {
    add: () => {
      window.addEventListener('hashchange', (event) => hashChangeCallback(event), false)
    },
    remove: () => {
      window.removeEventListener('hashchange', (event) => hashChangeCallback(event), false)
    },
  }
}

In my Jest test, I want to check, if hashChangeCallback function was called when event was triggered:

import { hashHandler } from './urlHashChangeListener'

describe('urlHashChangeListener', () => {
  const setupHashListeners = hashHandler()


  it('hashChangeCallback should be called when hash changed if listener is added', () => {
    setupHashListeners.add()

    window.dispatchEvent(new HashChangeEvent('hashchange', {
      oldURL: 'http://test.com/test.html#hash123', 
      newURL: 'http://test.com/test.html#hash3'
    }))

    // expect hashChangeCallback to be called
  })
})

How to do it properly? Do I have to mock/spy on this function somehow?

Answer 1

If the hashChangeCallback function is not exported, you can't mock or spy it. You can indirectly assert whether hashChangeCallback is called by asserting whether console.log is called.

Besides, it should be event.oldURL rather than event.oldUrl .

Eg

urlHashChangeListener.ts :

const hashChangeCallback = (event) => {
  console.log('event', event.oldURL);
};

export const hashHandler = () => {
  return {
    add: () => {
      window.addEventListener('hashchange', (event) => hashChangeCallback(event), false);
    },
    remove: () => {
      window.removeEventListener('hashchange', (event) => hashChangeCallback(event), false);
    },
  };
};

urlHashChangeListener.test.ts :

import { hashHandler } from './urlHashChangeListener';

describe('urlHashChangeListener', () => {
  const setupHashListeners = hashHandler();

  it('hashChangeCallback should be called when hash changed if listener is added', () => {
    const logSpy = jest.spyOn(console, 'log');
    setupHashListeners.add();

    window.dispatchEvent(
      new HashChangeEvent('hashchange', {
        oldURL: 'http://test.com/test.html#hash123',
        newURL: 'http://test.com/test.html#hash3',
      })
    );

    expect(logSpy).toBeCalledWith('event', 'http://test.com/test.html#hash123');
    logSpy.mockRestore();
  });
});

test result:

 PASS  examples/63613274/urlHashChangeListener.test.ts (7.068 s)
  urlHashChangeListener
    ✓ hashChangeCallback should be called when hash changed if listener is added (17 ms)

  console.log
    event http://test.com/test.html#hash123

      at console.<anonymous> (node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866:25)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        7.745 s, estimated 8 s

package versions:

"enzyme": "^3.11.0",
"jest": "^26.6.3"

Answer 2

You could generalise your functions to make your testing a little easier and reduce duplication:

const controlListener = event => fn => ({
    add: () => window.addEventListener(event, fn, false),
    remove: () => window.removeEventListener(event, fn, false),
  })

export const hashListener = controlListener('hashchange')

// In your production code
const hashHandler = hashListener(hashChangeCallback)

// In your test file
const mockHashChangeCallback = jest.fn()
const hashHandler = hashListener(mockHashChangeCallback)
expect(mockHashChangeCallback.mock.calls).toEqual([...])