Как протестировать такой компонент с Jest и ферментом в React?

Question

У меня есть компонент React Scroll to Top, в который мы добавляем этот компонент ниже нашего маршрутизатора, чтобы при перемещении по странице мы не поддерживали позицию прокрутки.

Я пытался написать Test case для этого компонента, но Jest и Enzyme dosent, кажется, распознают это как компонент при выполнении поверхностного рендеринга. Я использую машинопись, и это компонент.

scrollToTop.ts

export const ScrollToTop = ({history}: IRouterResetScroll) => {
  useEffect(() => {
    const unListen = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unListen();
    }
  }, []);

  return null;
}

export default withRouter(ScrollToTop);

Answer 1

Вот моя стратегия модульного тестирования, самая сложная часть для вашего кода, которую нужно протестировать, это history.listen(handler), поэтому мы можем высмеивать реализацию метода history.listen, мы определили queue для хранения обработчиков. После монтирования компонента макетированная история выполнит history.listen с функцией в качестве параметра. Эта функция будет сохранена в queue, который мы определили ранее. Мы можем получить эту функцию из очереди в модульном тесте и запустить ее вручную.

index.tsx:

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

type IRouterResetScroll = any;

export const ScrollToTop = ({ history }: IRouterResetScroll) => {
  useEffect(() => {
    const unListen = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unListen();
    };
  }, []);

  return null;
};

export default withRouter(ScrollToTop);

index.spec.tsx:

import React from 'react';
import { ScrollToTop } from './';
import { mount } from 'enzyme';

describe('ScrollToTop', () => {
  it('should scroll to top', () => {
    const queue: any[] = [];
    const mUnListen = jest.fn();
    const mHistory = {
      listen: jest.fn().mockImplementation(fn => {
        queue.push(fn);
        return mUnListen;
      })
    };
    window.scrollTo = jest.fn();
    const wrapper = mount(<ScrollToTop history={mHistory}></ScrollToTop>);
    queue[0]();
    expect(mHistory.listen).toBeCalledWith(expect.any(Function));
    expect(window.scrollTo).toBeCalledWith(0, 0);

    wrapper.unmount();
    expect(mUnListen).toBeCalledTimes(1);
  });
});

Результат модульного теста со 100% покрытием:

 PASS  src/stackoverflow/58786973/index.spec.tsx
  ScrollToTop
    ✓ should scroll to top (39ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.041s, estimated 9s

Источниккод: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58786973