如何使用react测试库测试使用Redux Toolkit Query(Redux API)创建的API钩子的react组件

e37o9pze 于 5个月前发布在 React

关注(0)|答案(1)|浏览(50)

我正在使用Redux工具箱查询从React组件进行API调用。现在功能运行得很好，但我正在努力使用react-testing库为组件编写单元测试用例

== Redux Toolkit Query API ==

const AssetInstancesAPI = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:3003',
    headers: genHeaders(token)
  }),
  reducerPath: 'AssetInstances',
  tagTypes: [`table-contents`],
  endpoints: (build) => ({
    getAssetsTableData: build.query<any, void>({
      query: (body) => ({
        url: '/assets/summary',
        method: 'get',
        data: body
      }),
      providesTags: [`table-contents`]
    })
  })
});

export const { useGetAssetsTableDataQuery } = AssetInstancesAPI;

个字符

redux

来源：https://stackoverflow.com/questions/75388415/how-to-test-a-react-component-which-is-using-an-api-hook-created-by-redux-toolki

1条答案

按热度按时间

l3zydbqr1#

你需要模拟你的API调用。使用像https://mswjs.io/这样的库。然后你会有这样的东西：

//handlers.ts

import { rest } from "msw";

export const handlers = [
    rest.get("/assets/summary", async (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json({
                MOCK_DATA,
            })
        );
    })
]

//browser.ts

export const worker = setupWorker(...handlers);

//server.ts
export const server = setupServer(...handlers);

//setup.ts
beforeAll(() =>
    server.listen({
        //do stuff
    })
);

afterAll(() => server.close());
...

//main.ts
if(USING_MOCK){
  import('./browser')
   .then(({worker}) => {
      worker.start();
   })
   .then(() => {
      root.render(<Main/>);
   });
} else {
  root.render(<Main/>);
}

字符串

赞(0）回复(0）举报 5个月前

我来回答

如何使用react测试库测试使用Redux Toolkit Query(Redux API)创建的API钩子的react组件

1条答案

相关问题

热门标签

最新问答