使用 Jest 测试延迟初始化的组件

Question

我正在尝试测试我的惰性初始化组件，该组件是使用 JestJS react-lazy-load-image-component 制作的。以下是我的测试：

const viewModel = new VehicleViewModel(vehicleData, {});

const mockOnClick = jest.fn();

const mockStore = configureStore();

let store: MockStore;

beforeEach(() => {
  jest.clearAllMocks();
  store = mockStore(storeInitialState);
});

describe('on component initialization', () => {
  it('renders', () => {
    const { container } = render(
      <Provider store={store}>
        <SearchResult vehicle={viewModel} onClick={mockOnClick} />
      </Provider>
    );
    expect(container).toMatchSnapshot();
  });
});

describe('when the user clicks on the result', () => {
  it('processes an onClick event', () => {
    const { container, getByTestId } = render(
      <Provider store={store}>
        <SearchResult vehicle={viewModel} onClick={mockOnClick} />
      </Provider>
    );
    await waitFor(() => {
      fireEvent.click(getByTestId('search-result'));
    });
    expect(container).toMatchSnapshot();
    expect(mockOnClick).toBeCalled();
  });
});

组件编码为：

const SearchResult = ({ onClick, vehicle }: SearchResultProps): JSX.Element => {
  const {
    images,
    make,
    model,
    year,
    dealerName,
    city,
    state,
    timeOnMarket,
    mileage,
    price,
  } = vehicle;

  const monthlyPayment = useMonthlyPayment(price);

  return (
    <div className="search-result" data-testid="search-result" onClick={onClick}>
      <style jsx>{styles}</style>
      <div
        className="main-image"
        // replace multiple spaces, if any, with one
        title={`${year || ''} ${make || ''} ${model || ''} image`.replace(/  +/g, ' ')}
      >
        <Carousel images={images} year={year} make={make} model={model} />
        ...
    </div>
  );
};

虽然 <Carousel /> 渲染定义为：

  return (
    <LazyLoadComponent>
      <div
        className="carousel-container"
        onMouseEnter={handleMouseEnterEvent}
        onMouseLeave={handleMouseLeaveEvent}
      >
        ...
      </div>
    </LazyLoadComponent>
  );

没有延迟加载，我的测试工作正常。

带有延迟加载的包装器，我的测试失败了：TypeError: Cannot read property 'prototype' of undefined。错误发生在 const { container } = render(...。我试图模拟滚动效果。还没有为我工作。

如何使用内部延迟加载向组件添加笑话覆盖？

Answer 1

您必须 'wait' 才能加载、安装和呈现您的组件。你在 Jest 中使用 React Testing Library 吗？如果是这样，您可以使用 waitFor，这将轮询直到将项目添加到 DOM。

await waitFor(() => expect(screen.findByText('Foo')).toBeInTheDocument());

Answer 2

我最终在实际代码中执行了以下操作：

const TestLasyWrapper = ({ children }: any) => process.env.NODE_ENV !== 'test' ?
  <LazyLoadComponent>{children}</LazyLoadComponent> : 
    <>{children}</>;

使用 Jest 测试延迟初始化的组件

Testing lazily initialized components with Jest

javascript

lazy-loading

reactjs

jestjs

react-lazy-load