使用 react-testing-library 时 setupServer 不工作

问题描述

我想使用 react-testing-library 进行单元测试 当我第一次渲染组件时，从 API 获取一些信息。

所以我使用 setupServer 来模拟 API 并使用 REST 发送虚拟数据 但是组件中只有加载程序并且 setupServer 无法正常工作

我该如何解决这个问题？

detail.tsx

import React,{ FC,useEffect,useState } from 'react';
import { RouteComponentProps,useHistory,withRouter } from 'react-router-dom';
import {
    actorInfo,detailMovie,movieInfo,popularResponseType,} from '../../types';
import { fetcher,} from '../../utils/request';
import * as S from './styles';
import * as C from '../../utils/constants';
import Loader from '../Loader';

interface movieID {
    id: string;
}
const Detail: FC<RouteComponentProps<movieID>> = ({ match }) => {
    const [detail,setDetail] = useState<detailMovie>();
    const [isLoading,setIsLoading] = useState(false);
    const [error,setError] = useState(false);

    useEffect(() => {
        const getData = async () => {
            setIsLoading(true);
            const movieDetail: detailMovie = await fetcher(`https://api.themoviedb.org/3/movie/343611{API_KEY}&language=kr-KR`);
            setDetail(movieDetail);

            setIsLoading(false);
        };
        getData();
    },[]);
    if (error) {
        return <p>something went wrong</p>;
    }
    return ( isLoading ? (
       <Loader />
)
        <S.Container>
            <S.IntroduceContainer>
                {detail ? (
                    <S.Poster src={`${C.IMAGE_URL_W500}/${detail?.poster_path}`} />
                ) : (
                    <S.Poster />
                )}
                <S.InfoContainer>
                    <S.Title>{detail?.title}</S.Title>
                    <S.RunningTime>{`${detail?.runtime}분`}</S.RunningTime>
                    <S.Description>{detail?.overview}</S.Description>
                </S.InfoContainer>
            </S.IntroduceContainer>           
        </S.Container>
    );
};

export default withRouter(Detail);

detail.test.js

import React from 'react';
import { render,waitFor,screen } from '@testing-library/react';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import Detail from '../index';
import movieDetailDummy from '../../../dummy/movieDummy';
import { Route,MemoryRouter } from 'react-router-dom';
import { act } from 'react-dom/test-utils';
import { API_KEY,API_URL_MOVIE } from '../../../utils/constants';

const server = setupServer(
    rest.get(`https://api.themoviedb.org/3/movie/343611{API_KEY}&language=kr-KR`,(req,res,ctx) => {
        return res(ctx.status(200),ctx.json(movieDetailDummy));
    })
);
beforeAll(() => server.listen());
afterall(() => server.close());
afterEach(() => server.resetHandlers());

const renderComponenet = ({ movieID }) =>
    render(
        <MemoryRouter initialEntries={[`/detail/${movieID}`]}>
            <Route path="/detail/:id">
                <Detail />
            </Route>
        </MemoryRouter>
    );

describe('<Detail />',() => {
    it('get movieDetail from tmdb',async () => {
        act(() => {
            renderComponent({ movieID: 343611 });
        });
        await waitFor(() => screen.getByText('잭 리처: 네버 고 백'));
    });
});

fetcher

export const fetcher = async (url: string) => {
    const response = await fetch(url);
    if (!response.ok) {
        const error = new Error('Error while fetching the data');
        error.message = await response.json();
        throw error;
    }
    const result = await response.json();
    return result;
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）