使用React查询和axios测试React组件中的错误时出现问题。使用React测试库、Jest、msw进行测试

Question

我测试一个反应组件，它应该显示旋转器、错误或获取食谱的列表。我设法测试这个组件的加载和当它成功获得数据。我有一个测试错误的问题。我用msw创建了测试服务器，它具有返回错误的路由处理程序。我使用axios向服务器发出请求。我认为问题就出在这里：axios发出3个请求，直到最后一个响应useQuery返回isLoding=true，isError=false。只有在这之后，它才返回isLoding=false， isError=true。因此，在我的测试错误screen.debug（）显示微调器，和错误消息返回错误，因为它没有找到一个呈现的元素与文本错误，该组件应该显示何时发生错误。对此我能做些什么呢？我没有想法了。

编辑：

• 我发现useQuery中有一个设置，重试，默认为3个请求。我仍然不知道如何在我的测试中处理组件重试请求。

我不熟悉反应测试和打字脚本。

来自RecipeList.test.tsx：

import { setupServer } from 'msw/node';
import { rest } from 'msw';
import { QueryClient, QueryClientProvider, QueryCache } from 'react-query';

import RecipeList from './RecipeList';

const server = setupServer(
  rest.get(`${someUrl}`, (req, res, ctx) =>
    res(ctx.status(200), ctx.json(data))
  )
);

const queryCache = new QueryCache();
const RecipeListWithQueryClient = () => {
  const client = new QueryClient();
  return (
    <QueryClientProvider client={client}>
      <RecipeList />
    </QueryClientProvider>
  );
};

// Tests setup
beforeAll(() => server.listen());
afterAll(() => server.close());
afterEach(() => server.resetHandlers());
afterEach(() => {
  queryCache.clear();
});

describe('RecipeList', () => {
  //some tests that pass

  describe('while error', () => {
    it('display error message', async () => {
      server.use(
        rest.get(`${someUrl}`, (req, res, ctx) => res(ctx.status(404)))
      );
      render(<RecipeListWithQueryClient />);
      // FOLLOWING CODE RAISE ERROR
      const errorMessage = await screen.findByText(/error/i);
      await expect(errorMessage).toBeInTheDocument();
    });
  });
});

来自RecipeList.tsx：

import { fetchRecipes } from 'api';

const RecipeList: React.FC = () => {
  const { data, isLoading, isError } = useQuery<
    RecipeDataInterface,
    Error
  >('recipes', fetchRecipes);;

  if (isLoading) {
    return (
      <Spinner>
        <span className="sr-only">Loading...</span>
      </Spinner>
    );
  }

  if (isError) {
    return (
      <Alert >Error occured. Please try again later</Alert>
    );
  }

  return (
    <>
      {data?.records.map((recipe: RecipeInterface) => (
        <RecipeItem key={recipe.id} recipe={recipe.fields} />
      ))}
    </>
  );
};

Answer 1

我找到的解决方案是为测试设置单独的超时值。

在RTL for waitFor异步方法中，根据文档：

“默认超时为1000毫秒，这将使您保持Jest的默认超时5000毫秒。”

我必须为RTL异步函数设置超时选项，但这还不够，因为我遇到了一个错误：

"超过5000 ms的测试超时。如果这是一个长时间运行的测试，使用jest.set超时（newTimeout）来增加超时值。"我必须更改Jest为测试设置的超时值。如本评论所述，可以通过两种方式完成：

“1.向it添加第三个参数，即it（'运行缓慢'，（）=

最后，我的测试如下所示：

  it('display error message', async () => {
    server.use(
      rest.get(getUrl('/recipes'), (req, res, ctx) =>
        res(ctx.status(500), ctx.json({ errorMessage: 'Test Error' }))
      )
    );

    render(<RecipeListWithQueryClient />);

    expect(
      await screen.findByText(/error/i, {}, { timeout: 10000 })
    ).toBeInTheDocument();
  }, 10000);

这里可以使用不同的异步方法，如waitFor和waitForElementToBeRemoved，它们都可以将{timeout:10000}对象作为参数。

这个解决方案适合我，但是我想改进它，以避免测试花费太多时间。我只是还不知道怎么做。

Answer 2

我使用QueryClient禁用重试。和设置服务器到模拟网络连接

    import { QueryClient, QueryClientProvider} from 'react-query';
    import { setupServer } from 'msw/node'
    import { rest } from 'msw'

    
const server = setupServer( 
  rest.get('https://reqres.in/api/users', (req, res, ctx) => {      
      return res(
        ctx.status(200),
        ctx.json(userSuccessResponseJson()
            ),
      )
    }),)

beforeAll(() => server.listen())
afterEach(() => {
  server.resetHandlers();
  queryClient.clear();
})
afterAll(() => server.close())


const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retryDelay: 1,
      retry:0,
    },
  },
})
const Wrapper = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);



  test('Renders Error text when backend server response with error', async () => {
    server.use(
      rest.get('https://reqres.in/api/users', (req, res, ctx) => {
        return res(ctx.status(403))
      })
    );
  
    render(<Wrapper><CompanyList />)</Wrapper>);
  
    const linkElement = screen.getByText(/Loading/i);
    expect(linkElement).toBeInTheDocument();
  
    await waitFor(() => {      
      const fetchedText = screen.getByText(/Error:/i);      
      expect(fetchedText).toBeInTheDocument();
    })
  });