测试用例间如何清除Apollo缓存？React Testing Library+Jest环境问题

问题根因 #

你在所有测试用例中复用了同一个全局cache实例传递给MockedProvider，第一个用例执行后产生的缓存数据会被后续所有用例直接读取，不会触发新的请求，也就不会出现加载状态，同时前序用例的hasNextPage缓存值也会直接被复用，导致第二个用例的mock配置不生效。

解决方案 #

方案1：每个用例单独创建缓存实例（最推荐） #

不要在外层定义公共的cache变量，每个测试用例内部单独实例化InMemoryCache再传给MockedProvider，从根源上隔离不同用例的缓存：

import { InMemoryCache } from '@apollo/client';

it('shows a "show more" button when there is `hasNextPage` is true', async () => {
  const cache = new InMemoryCache(); // 每个用例单独实例化缓存
  render(
    <MemoryRouter initialEntries={['/media/1']}>
      <MockedProvider mocks={[getCharacterMock, getMediaMock]} cache={cache}>
        <Route path='/media/:id'>
          <Media />
        </Route>
      </MockedProvider>
    </MemoryRouter>
  );
  // 其余测试逻辑保持不变
});

it("doesn't show a 'show more' button when `hasNextPage` is false", async () => {
  const cache = new InMemoryCache(); // 每个用例单独实例化缓存
  render(
    <MemoryRouter initialEntries={['/media/1']}>
      <MockedProvider mocks={[getCharacterMockNextPageFalse, getMediaMock]} cache={cache}>
        <Route path='/media/:id'>
          <Media />
        </Route>
      </MockedProvider>
    </MemoryRouter>
  );
  // 其余测试逻辑保持不变
});

方案2：不显式传递cache参数 #

MockedProvider 默认会为每个实例自动创建独立的缓存，如果你没有特殊的自定义缓存配置需求，直接去掉cache属性即可，无需手动管理缓存实例：

<MockedProvider mocks={[getCharacterMock, getMediaMock]}>
  <Route path='/media/:id'>
    <Media />
  </Route>
</MockedProvider>

方案3：复用缓存则每次用例结束后清空 #

如果你确实需要复用同一个缓存实例，可以在afterEach钩子中调用缓存的reset方法清空所有历史数据：

import { InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache();

afterEach(() => {
  cache.reset();
});

// 后续测试用例代码保持不变

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