Day 13 MSW的return Error Type

这是一个来自msw的错误处理当我们想要验证是否元件会因为server回传错误的资料而产生错误警示

import { useEffect, useState } from 'react';
import axios from 'axios';

type NewsType = {
  title: string;
  img: string;
};

const News = () => {
  const [newsList, setNewsList] = useState<NewsType[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const getNews = async () => {
      try {
        const news = await axios.get('http://localhost:5000/news');
      } catch (error) {
        setError('SERVER ERROR');
      }
    };

    getNews();
  }, []);

  return (
    <div>
      {newsList.length > 0
        ? newsList.map((news) => {
            return (
              <div key={news.title} role="news">
                {news.title}
              </div>
            );
          })
        : null}
      {error ? <div role="error">{error}</div> : null}
    </div>
  );
};

export default News;

那我们如何透过msw回传一个错误的状态码来让前端的component接收到catch

import { render, screen } from '@testing-library/react';
import { rest } from 'msw';
import News from '../News';
import { server } from '../../../mocks/server';

describe('<Users />', () => {
  test('should component show error message', async () => {
    server.resetHandlers(
      rest.get('http://localhost:5000/news', (req, res, ctx) => {
        return res(ctx.status(400));
      })
    );

    render(<News />);

    const error = await screen.findByRole('error');

    expect(error).toBeInTheDocument();
  });
});

这边我们就验证当我们回传一个错误讯息时，component的catch会抓到error进而产生错误讯息，这时我们可以重新resetHandler复写一个错误的response让测试的元件接收到statusCode(400)的错误

接下来使用tobeIndocument来验证