使用 useEffect、axios 和 useParams 进行反应测试

Question

  .....
  .....
  const MovieDetails = () => {
  .....
  ..... 
  let { movieId } = useParams();
  const [movie, setMovie] = useState(null);
  
  useEffect(() => {
    // axios settings
    let unmounted = false;
    let source = axios.CancelToken.source();
    axios.get(`http://localhost:4000/movies/${movieId}`, {
      cancelToken: source.token
    }).then(result => {
      if (!unmounted) {
        setMovie(result.data)
      }
    }).catch(function (e) {
      if (!unmounted) {
        if (axios.isCancel(e)) {
          console.log(`request cancelled:${e.message}`);
        } else {
          console.log("another error happened:" + e.message);
        }
      }
    });
    return function () {
      unmounted = true;
      source.cancel("Cancelling in cleanup");
    };
  }, [movieId]);

  return (
    <div className={styles.movieDetail}>
      {movie && (
  .....
  .....
  .....
  .....
  export default MovieDetails;

嗨，

如何为上面的代码编写反应测试？

它包括“axios”、“useEffect”和“useParams”。

基本上，我正在列出电影，并且单击时会显示电影详细信息。

我的测试现在看起来像这样：

渲染部分失败，因为不知何故我必须将 useParams 与 axios 一起使用

  .....
  .....
  describe('MovieDetails', () => {
  let testList = movieList;

  test('render movie details when a movie is selected', () => {
    render(
      <MemoryRouter>
        <MovieDetails />
      </MemoryRouter>
    );
    const element = screen.getByTestId('movieDetails');
    expect(element).toBeInTheDocument();
    const image = element.querySelector("img");
  .....
  .....
  .....
  .....
  export default MovieDetails;

Answer 1

您可以使用

jest

来模拟

axios

，并使用

MemoryRouter

来模拟 movieId 的 URL。让我知道这样的事情是否有帮助：

import React from 'react';
import { render, screen } from '@testing-library/react';
import MovieDetails from './MovieDetails';
import { MemoryRouter } from 'react-router-dom';
import axios from 'axios';

jest.mock('axios');

describe('MovieDetails', () => {
  const movieId = 1; // Mock movie ID
  const mockMovieData = {
    // Put your data here
  };

  beforeEach(() => {
    axios.get.mockResolvedValue({ data: mockMovieData });
  });

  test('renders stuff when a movie is selected', async () => {
    render(
      <MemoryRouter initialEntries={['/movies/1']}>
        <MovieDetails />
      </MemoryRouter>
    );

    await waitFor(() => {
      expect(screen.getByTestId('movieDetails')).toBeInTheDocument();
      // Place your assertions here for the rendered elements
    });
  });
});