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来验证


<<:  DAY26-JAVA的Runnable介面

>>:  Day 13 Decorator Part - 1

Day29 Session 的使用-2

因为开启Session,所以原本abc页面的验证是用Cookie,现在要更改为验证Session存在...

Day 23 - Android 程序实作:简单的使用者进入

Day 23 - Android 程序实作:简单的使用者进入 昨天我讲了我对Android的兴趣,今...

[Day06] JavaScript - Hoisting 提升

在讲Hoisting之前,要先解释一下undefined 与 is not defined 的差异:...

[DAY 01] 在台南想瘦是不可能的吧...那就一起胖吧=w=

这一次被公司派往盐水支援自动化专案 每天最期待的就是下班後要吃什麽 是要待在盐水吃意面 还是要去新营...

Day 25 - 用 canvas 做 烟火

庆祝国庆日啦 成功的 失败的 import "./styles.css"; im...