Как проверить document.eventListener с помощью Jest

Question

У меня есть прослушиватель событий, который будет вызывать функцию, которая обрабатывает аутентификацию. Я хочу проверить, что если эта функция получает неправильные данные, она вернет данные, а если нет, вернет другие данные.

Но я не понимаю, как издеваться над этой функцией и делать с этим ожидания.

Это слушатель:

window.addEventListener('message', authentication, false);

Функция, на которую я хочу рассчитывать в зависимости от результата:

export function* authentication({ data }) {
  // Data structure {
  //   action: 'authentication',
  //   id: '7293847829109932,
  //   displayName: 'User Name',
  //   avatar: 'https://steamcommunity.com/images/user.png',
  //   access: 'access_token_string',
  //   refresh: 'refresh_token_string',
  // }

  if (data.action === 'authentication') {
    localStorage.setItem('dualbits:access', data.access);
    localStorage.setItem('dualbits:refresh', data.refresh);
  }

  // Will dispatch the success action if the data is correct
  yield put(signInSuccess(data));
}

То, что до сих пор было издевательством над глобальным окном переменная и метод addEventListener. И я сделал это ожидание:

expect(window.addEventListener).toHaveBeenCalledWith(
  'message',
  authentication,
  false
);

Answer 1

Вы можете использовать mockFn.mockImplementationOnce (fn) , чтобы смоделировать window.addEventListener метод и контролировать выполнение обработчика событий (функция authentication для вашего случая) .

Например,

index.js:

export function* authentication({ data }) {
  if (data.action === 'authentication') {
    localStorage.setItem('dualbits:access', data.access);
    localStorage.setItem('dualbits:refresh', data.refresh);
  }
  yield 'dispatch action';
}

export function main() {
  window.addEventListener('message', authentication, false);
}

index.test.js:

import { main } from '.';

const mLocalStorage = {
  _storage: {},
  getItem: jest.fn((key) => {
    return mLocalStorage._storage[key];
  }),
  setItem: jest.fn((key, value) => {
    mLocalStorage._storage[key] = value;
  }),
};
Object.defineProperty(window, 'localStorage', {
  value: mLocalStorage,
});

describe('61142462', () => {
  it('should save data into local storage', () => {
    let rval;
    jest.spyOn(window, 'addEventListener').mockImplementationOnce((event, handler, options) => {
      const gen = handler({ data: { action: 'authentication', access: '123', refresh: 'abc' } });
      rval = gen.next().value;
    });
    main();
    expect(rval).toBe('dispatch action');
    expect(window.addEventListener).toBeCalledWith('message', expect.any(Function), false);
    expect(mLocalStorage.setItem).toBeCalledWith('dualbits:access', '123');
    expect(mLocalStorage.setItem).toBeCalledWith('dualbits:refresh', 'abc');
  });

  it('should not save data into local storage', () => {
    let rval;
    jest.spyOn(window, 'addEventListener').mockImplementationOnce((event, handler, options) => {
      const gen = handler({ data: undefined });
      rval = gen.next().value;
    });
    // You can do the rest of part of this test case
  });
});

Результаты модульных испытаний с отчетом о покрытии:

 PASS  stackoverflow/61142462/index.test.js (8.196s)
  61142462
    ✓ should save data into local storage (7ms)
    ✓ should not save data into local storage

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

исходный код: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61142462