如何在RTL测试中mock useState解决组件isLoading测试失败问题

问题场景 #

你的Analytics组件初始将isLoading设为true，仅当该状态变为false时才会渲染带有data-testid="Announcements"的AnnouncementCard：

const Analytics = () => {
  const [isLoading, setIsLoading] = useState(true);

  const handleAnnouncementsClick = () => {
    navigate('/applications/announcements');
  };

  return (
    <DashboardLayout>
      <DashboardNavbar />
      {isLoading ? (
        showLoader()
      ) : (
        <>
          <Grid container spacing={3}>
            <DashboardLeftGrid item xs={12} sm={6}>
              <AnnouncementCard
                ispermission={handleBooleanProp(true)}
                onClick={handleAnnouncementsClick}
                data-testid="Announcements"
              >
                <HeadingMuiTypography variant="h6">
                  Announcements
                </HeadingMuiTypography>
                <DashboardAnnouncements />
              </AnnouncementCard>
            </DashboardLeftGrid>
          </Grid>
        </>
      )}
    </DashboardLayout>
  );
};

对应的单元测试因初始isLoading为true而失败，无法找到目标元素：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Analytics from './index';
import { testComponent } from 'utils/commonUtils';

describe('Analytics component', () => {
  test('renders Analytics component correctly', async () => {
    render(testComponent(<Analytics />));
    expect(screen.getByTestId(/Announcements/i)).toBeInTheDocument();
  });
});

解决方案 #

方法一：直接Mock React的useState #

通过mock React的useState方法，让它直接返回初始值为false的状态：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Analytics from './index';
import { testComponent } from 'utils/commonUtils';

// 保留React其他原有方法，仅覆盖useState
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(() => [false, jest.fn()])
}));

describe('Analytics component', () => {
  test('renders Analytics component correctly', () => {
    render(testComponent(<Analytics />));
    expect(screen.getByTestId(/Announcements/i)).toBeInTheDocument();
  });
});

注意：如果组件内存在多个useState调用，这个mock会影响所有状态。若需要精准控制，可以根据调用次数返回不同值：

useState: jest.fn()
  .mockReturnValueOnce([false, jest.fn()]) // 第一个useState返回isLoading=false
  .mockReturnValueOnce(['其他初始值', jest.fn()]) // 第二个useState返回对应值

方法二：模拟加载完成的真实场景（推荐） #

通常isLoading会在异步操作（如数据请求）完成后变为false，直接mock该异步操作让其立即完成，触发状态更新：
假设组件内有如下加载逻辑：

useEffect(() => {
  const fetchData = async () => {
    // 模拟数据请求
    await someApiCall();
    setIsLoading(false);
  };
  fetchData();
}, []);

测试时mock对应的API方法：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Analytics from './index';
import { testComponent } from 'utils/commonUtils';
import { someApiCall } from './api';

// mock API调用，让它立即resolve
jest.mock('./api', () => ({
  someApiCall: jest.fn().mockResolvedValue({})
}));

describe('Analytics component', () => {
  test('renders Analytics component correctly', async () => {
    render(testComponent(<Analytics />));
    // 等待异步操作完成，元素出现
    const announcementCard = await screen.findByTestId(/Announcements/i);
    expect(announcementCard).toBeInTheDocument();
  });
});

这种方法更贴近真实用户交互，测试逻辑更可靠。

方法三：将isLoading改为受控属性（需修改组件） #

如果可以调整组件设计，将isLoading设为可外部传入的props，测试时直接传入false：
修改组件：

// 给isLoading设置默认值，保持原有逻辑兼容
const Analytics = ({ isLoading = true }) => {
  const [internalIsLoading, setInternalIsLoading] = useState(isLoading);
  
  // 若需要外部控制状态，也可以直接使用props的isLoading，无需内部状态
  // ...其他逻辑
};

测试时直接传入isLoading={false}：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Analytics from './index';
import { testComponent } from 'utils/commonUtils';

describe('Analytics component', () => {
  test('renders Analytics component correctly', () => {
    render(testComponent(<Analytics isLoading={false} />));
    expect(screen.getByTestId(/Announcements/i)).toBeInTheDocument();
  });
});

这种方式最简洁，适合组件需要外部控制状态的场景。

内容的提问来源于stack exchange，提问作者Sameer Kulkarni