React中依赖useState hook的条件渲染组件如何写测试？

Question

我正在尝试为我的功能组件编写测试，但不明白如何将 isRoomsLoaded 模拟为 true，因此我可以正确测试我的 UI .我需要如何模拟以及模拟什么？

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchRooms } from '../../store/roomsStore';  // Action creator


// Rooms component
export default ({ match, location, history }) => {
    const roomsStore = useSelector(state => state.rooms);
    const dispatch = useDispatch();
    const [isRoomsLoaded, setRoomsLoaded] = useState(false);

    useEffect(() => {
        const asyncDispatch = async () => {
            await dispatch(fetchRooms());
            setRoomsLoaded(true);  // When data have been fetched -> render UI
        };
        asyncDispatch();
    }, [dispatch]);

    return isRoomsLoaded
        ? <RoomsList />  // Abstraction for UI that I want to test
        : <LoadingSpinner />;

};

Answer 1

如果需要，您可以将 mock useState 设置为 return true 或 false，通过执行以下操作获得您想要的任何结果。

const mockSetState = jest.fn();

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: value => [true, mockSetState],
}));

通过这样做，你可以有效地模拟 react，react，除了 useState，它有点 hacky 但它会工作。

React中依赖useState hook的条件渲染组件如何写测试？

How to write a test for conditional rendering component depended on useState hook in React?

testing

reactjs

conditional-rendering

react-redux

react-hooks