Jest юнит тест для маршрутизации - PullRequest
Новая
       3

Jest юнит тест для маршрутизации

0 голосов
/ 05 марта 2020

Я пытаюсь написать простой тест, чтобы проверить, правильно ли работает нижняя навигация в моем приложении React. Модульный тест в BottomNav.test. js выглядит следующим образом:

BottomNav. js (соответствующий код): 

<div className="BottomNav">
    <div>
        <NavLink to="/home" id="home">
            <FaHome aria-label="Home"/>
        </NavLink>
    </div>
</div>

BottomNav.test. js: 

let container = null;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);

  render(
    <MemoryRouter>
      <BottomNav />
    </MemoryRouter>,
    container
  );

});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

test('navigates home when Home is selected', async => {

  act(() => {
    const link = document.querySelector('#home');
    link.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });

  expect(location.pathname).toBe('/home');
});

Этот тест выполняется, но он имеет следующий результат:

ожидается (получено) .toBe (ожидается) // Object.is равенство

Ожидается: "/ home"

Получено: "/"

Я попытался изменить конфигурацию testURL как Следующее: 

//package.json
...,
"jest": {
     "testURL": "http://localhost:3000/"
},
...

Что привело к этой ошибке:

Из коробки приложение Create React поддерживает только переопределение этих параметров Jest:

• clearMocks
• collectCoverageFrom
• coverPathIgnorePatterns • coverReporters
• coverThreshold
• displayName
• extraGlobals
• globalSetup
• globalTeardown
• moduleNameMapper
• resetMocks • resetMocks • сброс * • restoreMocks
• снимокСериализаторы • transform
• transformIgnorePatte rns
• watchPathIgnorePatterns.

Эти параметры в вашем пакете. json Конфигурация Jest в настоящее время не поддерживается приложением Create React:

• testURL

Если я изменил expect(location.pathname).toBe('/home'); на expect(location.pathname).toBe('/'); в BottomNav.test. js, я получу следующую ошибку, поэтому даже в этом случае должен быть успешным, произойдет сбой:

* 1059 Обратный вызов * Asyn c не был вызван в течение времени ожидания 5000 мс, указанного в jest.setTimeout.Timeout - Обратный вызов * Asyn c не был вызван в течение времени ожидания 5000 мс, указанного в jest.setTimeout.Error

Так на данный момент я в растерянности. Похоже, что тест застревает в бесконечном l oop или что-то еще при попытке нажать кнопку навигации, что приводит к ошибке тайм-аута в случаях, когда тест должен пройти успешно.

TL; DR Как мне написать тест в Jest, чтобы увидеть, загружает ли навигационная кнопка правильный экран?

...