Выяснение, как смоделировать изменение размера окна для теста реагирующего компонента

Question

Поэтому, когда компонент монтируется, у меня есть прослушиватель событий, который прослушивает события изменения размера. Он переключает состояние isMobileView и затем передает его дочерним элементам в качестве реквизита. Так что обязательно, что это работает и проверено. Я довольно новичок в тестировании, и я пытаюсь найти способ, которым я могу написать тест, который изменяет размеры окна и заставляет всю логику выполняться и проверять, что оно выполнено так, как должно.

Вот код -

componentDidMount() {
    this.setMobileViewState()
    window.addEventListener('resize', this.setMobileViewState.bind(this));
}

setMobileViewState() {
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) {
        this.setState({ isMobileView: true })
    } else {
        this.setState({ isMobileView: false })
    }
}

Я знаю, что код работает, но я хочу написать для него тест. В основном только то, что гарантирует, что состояние изменяется правильно.

Answer 1

Используя Jest и Enzyme вы можете сделать следующее. В Jest есть JSDOM. В ваших тестах Jest предоставляет window объект, и он представлен global (Я думаю, что по умолчанию window.innerWidth устанавливается Jest 1024px):

test('Test something when the viewport changes.', () => {

    // Mount the component to test.
    const component = mount(<ComponentToTest/>);

    ...

    // Change the viewport to 500px.
    global.innerWidth = 500;

    // Trigger the window resize event.
    global.dispatchEvent(new Event('resize'));

    ...

    // Run your assertion.
});

Answer 2

Если вы получаете сообщение об ошибке машинописи

Невозможно присвоить 'innerWidth', потому что это свойство только для чтения.

Пытаться:

Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 200})

Answer 3

Попробуйте эту строку:

window = Object.assign(window, { innerWidth: 500 });

Answer 4

У меня это сработало с библиотекой тестирования:

        it('should resize', () => {
    const altImage = 'test'

    window.innerWidth = 500

    fireEvent(window, new Event('resize'))

    waitFor(() => {
      expect(screen.getByAltText(altImage)).not.toBeInTheDocument()
    })
  })

Answer 5

Для всех, кто используетreact-testing-library, есть собственный способ добиться этого с помощью fireEvent .

        import { fireEvent } from '@testing-library/react';
  ...

  it('should resize', () => {
    window.innerWidth = 500;
    fireEvent(window, new Event('resize'));

    // your test here
  });

Answer 6

Я сделал это с библиотекой тестирования:

      function fireResize(width) {
  window.innerWidth = width;
  window.dispatchEvent(new Event('resize'));
}

it('some test', async () => {
  ....
  await waitFor(() => {
   fireResize(500);
  });
  ....
});

Источник: https://medium.com/@dawchihliou/testing-react-hooks-6d3ae95cd838 .

Answer 7

      jest.spyOn(window.screen, "width", "get").mockReturnValue(1000);