React使用Jest写单元测试时MsalAuthenticationTemplate出现act未包裹报错

报错原因 #

该警告是@azure/msal-react包内的MsalAuthenticationTemplate、MsalProvider组件内部存在异步状态更新逻辑，测试执行结束时组件内部的状态更新还未完成，既会触发act警告，也会导致覆盖率统计、测试结果输出异常。

全局Mock方案（推荐） #

在jest的全局配置文件（通常为jest.setup.js/jest.setup.ts）中添加如下mock逻辑，直接绕过msal组件的内部状态更新逻辑：

jest.mock('@azure/msal-react', () => ({
  ...jest.requireActual('@azure/msal-react'),
  // 模拟MsalAuthenticationTemplate默认直接渲染子组件，跳过内部授权逻辑
  MsalAuthenticationTemplate: ({ children }) => <>{children}</>,
  // 配套mock常用的useMsal hook，可按需扩展返回值
  useMsal: () => ({
    instance: {
      acquireTokenSilent: jest.fn().mockResolvedValue({
        accessToken: 'test-access-token',
        account: { username: 'test@example.com' }
      }),
      loginRedirect: jest.fn(),
      logout: jest.fn()
    },
    accounts: [{ username: 'test@example.com' }],
    inProgress: 'none'
  }),
  // 模拟MsalProvider跳过初始化逻辑
  MsalProvider: ({ children }) => <>{children}</>
}));

单测试用例自定义Mock方案 #

如果需要针对不同测试场景模拟不同的授权状态，可以在单个测试文件内覆写mock：

import { MsalAuthenticationTemplate } from '@azure/msal-react';

jest.mock('@azure/msal-react', () => ({
  ...jest.requireActual('@azure/msal-react'),
  MsalAuthenticationTemplate: jest.fn()
}));

describe('组件测试用例集', () => {
  beforeEach(() => {
    // 默认模拟已登录状态，直接渲染子组件
    MsalAuthenticationTemplate.mockImplementation(({ children }) => <>{children}</>);
  });

  test('测试未登录场景的展示逻辑', () => {
    // 自定义未登录时的返回内容
    MsalAuthenticationTemplate.mockImplementation(() => <div>未授权访问</div>);
    // 下方写你的组件渲染和断言逻辑即可
  })
})

额外注意事项 #

• 测试过程中所有涉及异步操作的断言，优先使用React Testing Library提供的findBy*系列异步查询方法，或者用waitFor包裹断言逻辑，上述方法已经内置了act处理，不需要手动调用act
• 若项目还用到了其他msal-react的Hooks或组件，可以按照上述mock逻辑按需扩展返回值即可

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