使用 rtk-query 请求测试组件答案

【问题标题】：Testing components with a request for rtk-query使用 rtk-query 请求测试组件
【发布时间】：2022-08-22 20:47:56
【问题描述】：

大家好，我开始测试 React 应用程序并遇到了一个问题 - 我无法测试从服务器加载的组件。上传数据的请求是通过rtk-query发出的，我只知道如何在axios上测试。代码请求：

    export const postApi = createApi({
    reducerPath: \'getAllChallenges\',
    baseQuery: fetchBaseQuery({ baseUrl: urlDomain }),
    tagTypes: [\'Challenge\'],
    endpoints: (build) => ({
        getAllChallenges: build.query<IChallenge[], string>({
            query: () => ({
                url: urlGetChallenges,
            }),
            providesTags: res => [\'Challenge\']
        }),
        getChallengeById: build.query<IChallengeDetails, string>({
            query: (id: string) => ({
                url: urlGetChallengeById + id,
                headers: {
                    token: localStorage.getItem(\'token\') || \'\',
                    signature: localStorage.getItem(\'signature\') || \'\',
                    \'Content-Type\': \'application/json\',
                }
            }),
            providesTags: res => [\'Challenge\']
        }),
        getChallengeMembers: build.query<IChallengeMember[], string>({
            query: (id: string) => ({
                url: urlGetChallengeMembers + id,
                headers: {
                    token: localStorage.getItem(\'token\') || \'\',
                    signature: localStorage.getItem(\'signature\') || \'\',
                    \'Content-Type\': \'application/json\',
                }
            }),
            providesTags: res => [\'Challenge\']
        }),
        acceptChallenge: build.mutation<IChallengeMember[], string>({
            query: (id: string) => ({
                url: urlAcceptChallenge + id,
                headers: {
                    token: localStorage.getItem(\'token\') || \'\',
                    signature: localStorage.getItem(\'signature\') || \'\',
                    \'Content-Type\': \'application/json\',
                }
            }),
            invalidatesTags: [\'Challenge\']
        })
    })
})

正在加载的组件的代码：

    const Challenges: FC = () => {
    const { data: challenges, isLoading } = postApi.useGetAllChallengesQuery(\'\')
    const { loginStatus } = useTypedSelector(state => state.login)
    return (
        <MainWrapper dataTestid=\'challenges-page\'>
            <Popup />
            {loginStatus && <CreateChallenge />}
            {isLoading && <Loader />}
            {challenges && challenges.map(challenge =>
                <ChallengesItem data-testid=\'challenge-item\' key={challenge.challenge_id} challenge={challenge} />
            )}
        </MainWrapper>
    )
}

export default Challenges

标签： reactjs redux react-redux react-testing-library rtk-query

【解决方案1】：

您可以使用像 msw 这样的库来模拟您的 api - 这就是我们在 Redux Toolkit 代码库中用于测试 RTK Query 的内容。

【讨论】：

【解决方案2】：

您是否实施了该问题？我一直坚持使用 RTK Query 测试组件，但不知道如何实现

【讨论】：