目前,我试图测试我使用习俗的成分,但我似乎无法人工改变该构成部分中使用的习惯。
我的法典如下:
src/components/movies/MovieDetail.tsx
import { useParams } from react-router-dom ;
import { Movie } from ../../models/Movie ;
import { useFetch } from ../../hooks/useFetch ;
import { SCYoutubeVideoPlayer } from ../YoutubeVideoPlayer ;
import { SCTagList } from ../tags/TagList ;
import { SCActorList } from ../actors/ActorList ;
import { SCMovieSpecs } from ./MovieSpecs ;
import { SCServerError } from ../errors/ServerError ;
import { SCLoading } from ../loading/Loading ;
import styles from ./MovieDetail.module.scss ;
export const SCMovieDetail = () => {
const { slug } = useParams();
const { error, loading, data: movie } = useFetch<Movie>({ url: `http://localhost:3000/movies/${slug}` });
if (error) {
return <SCServerError error={error} />;
}
if (loading || movie === undefined) {
return <SCLoading />;
}
return (
<>
<section className={`${styles.spacing} ${styles.container}`}>
<h2>{movie.title}</h2>
<SCMovieSpecs movie={movie} />
</section>
<section className={styles[ trailer-container ]}>
<div>
<SCYoutubeVideoPlayer src={movie.trailer} />
</div>
</section>
<section className={`${styles.spacing} ${styles.container}`}>
<SCTagList tags={movie.tags} />
<div className={styles.description}>
<p>{movie.description}</p>
</div>
<SCActorList actors={movie.cast} />
</section>
</>
);
};
src/components/movies/MovieDetail.test.tsx
import renderer from react-test-renderer ;
import { render, screen } from @testing-library/react ;
import { MemoryRouter } from react-router-dom ;
import { SCMovieDetail } from ./MovieDetail ;
describe( SCMovieDetail , () => {
const componentJSX = () => {
return (
<MemoryRouter>
<SCMovieDetail />
</MemoryRouter>
);
};
it( Should match snapshot , () => {
const component = renderer.create(<SCMovieDetail />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it( Should render error , () => {
jest.mock( ../../hooks/useFetch );
render(componentJSX());
expect(screen.getByText( Hello! )).toBeInTheDocument();
});
});
<>斯特凡>
import { useFetchPayload, useFetchProps } from ../useFetch ;
export const useFetch = <T>({ url, method = GET }: useFetchProps): useFetchPayload<T> => {
let data: T | undefined = undefined;
let error: string | undefined = undefined;
let loading = false;
console.log( MOCKED!!! );
console.log( MOCKED!!! );
console.log( MOCKED!!! );
switch (url) {
case success :
data = {} as T;
break;
case error :
error = `${method} request failed`;
break;
case loading :
loading = true;
break;
}
return { data, error, loading };
};
src/hooks/useFetch.ts
import { useEffect, useState } from react ;
export interface useFetchProps {
url: string;
method?: GET | POST | UPDATE | PATCH | DELETE ;
}
export interface useFetchPayload<T> {
data?: T;
error?: string;
loading: boolean;
}
export const useFetch = <T>({ url, method = GET }: useFetchProps): useFetchPayload<T> => {
const [data, setData] = useState<T | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
const [loading, setLoading] = useState(false);
console.log( REAL!!! );
console.log( REAL!!! );
console.log( REAL!!! );
useEffect(() => {
const abortController = new AbortController();
const fetchData = async () => {
try {
const response = await fetch(url, { method, signal: abortController.signal });
if (!response || !response.ok) {
throw new Error( Request failed! );
}
const json = await response.json();
setData(json);
} catch (error: unknown) {
if (error instanceof DOMException && error.name == AbortError ) {
return;
}
const customError = error as Error;
setError(customError.message);
} finally {
setLoading(false);
}
};
fetchData();
return () => abortController.abort();
}, [url, method]);
return { data, error, loading };
};
名录结构迅速超支;
src/
|-- ...
|-- components/
| | ...
| |-- movies/
| | |-- MovieDetail.tsx
| | |-- MovieDetail.test.tsx
| | |-- ...
|-- hooks/
| |-- __mocks__/
| | |-- useFetch.tsx
| |-- useFetch.tsx
| |-- ...
|-- ...
我已经搜索了多个中继站和其他地点,但仍未找到答案。 希望你能帮助我找到失踪人员! I m 采用React 18, Jest 29。 目标是在Im 仍在学习后,结合Jest,使用最低数量的 no子和重试图书馆。 如果能够重新使用模拟器,那么最好使用mocks目录,而不是每一次在我的测试中直接模拟执行。