这是一个来自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来验证
因为开启Session,所以原本abc页面的验证是用Cookie,现在要更改为验证Session存在...
Day 23 - Android 程序实作:简单的使用者进入 昨天我讲了我对Android的兴趣,今...
在讲Hoisting之前,要先解释一下undefined 与 is not defined 的差异:...
这一次被公司派往盐水支援自动化专案 每天最期待的就是下班後要吃什麽 是要待在盐水吃意面 还是要去新营...
庆祝国庆日啦 成功的 失败的 import "./styles.css"; im...