Testing Redux Toolkit Query返回空集合- Provider问题(?) &g

Question

我有一个features/postsSlice文件:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const postsSlice = createApi({
// Reducer Path it's name shown on Redux Tab
reducerPath: "postsSlice",
baseQuery: fetchBaseQuery({
baseUrl: process.env.REACT_APP_BACKEND_URL,
}),
// With tag type we can invalidate cache
tagTypes: ['posts'],
endpoints: (builder) => ({
getPosts: builder.query({
query: () => "/posts"
})
})
});
export const { useGetPostsQuery } = postsSlice;

我有一个简单的组件来显示从typicode得到的帖子

import React from "react"
import { useGetPostsQuery } from "../features/postsSlice"
export const GenericList = () => {
const {
data: posts,
} = useGetPostsQuery();
console.log(posts)
if (posts && posts.length > 0) {
return (
posts.map(post => {
return <p key={post.id}>{post.body}</p>
})
)
}
return <p>No data to shown</p>
}

这是store/index.js文件:

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/dist/query";
import { postsSlice } from "../features/postsSlice";
export const store = configureStore({
reducer: {
[postsSlice.reducerPath]: postsSlice.reducer
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(postsSlice.middleware),
})
setupListeners(store.dispatch);

它的工作原理。现在我想用Jest和nwm来测试它。

这是测试文件

import { render } from "@testing-library/react";
import { rest } from "msw";
import { setupServer } from "msw/node";
import { GenericList } from "../../components/GenericList";
import { Provider } from "react-redux";
import { store } from "../../../src/store/index";
const server = setupServer(
rest.get("https://api.example.com/api/posts", (req, res, ctx) => {
return res(
ctx.json([
{
id: 1,
body: "Foo",
},
{
id: 2,
body: "Bar",
},
])
);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
describe("Test GenericList component", () => {
test("Can render list of posts", () => {
render(<Provider store={store}><GenericList /></Provider>)
});
});

但是在控制台我有undefined控制台日志。

PASS  src/__tests__/components/GenericList.test.js
● Console
console.log
undefined
at GenericList (src/components/GenericList.js:10:13)
console.log
undefined
at GenericList (src/components/GenericList.js:10:13)
PASS  src/__tests__/App.test.js
● Console
console.log
undefined
at GenericList (src/components/GenericList.js:10:13)
console.log
undefined
at GenericList (src/components/GenericList.js:10:13)

编辑# 1

我试图完全删除mws包装器，让测试调用真正的API。我有另一个时间undefined。所以，我认为<Provider>的实现是错误的。

Answer 1

没有问题。
当数据正在加载时，在这里获得undefined是完全正常的-并且您的测试只是渲染组件并立即查看结果。
当然，此时你处于加载状态。

你只是没有注意到，因为你只看了data.
看看该对象的其他属性，你会注意到你测试的情况是isUninitialized或isLoading都是true。