What's mock?
先想像一个画面,当我们要隔离我们的元件时,一个component里面有诸多事件(event),不管是点选抓资料或者是useEffect去捞资料,但在测试阶段可能会外部元件进行交互e.g.call api.
这些行为的产生会为产生的结果产生不确定性,所以我们希望在做单元测试时,可以元件保持独立性(),各个元件之间不会互相影响,那如何做到? 那我们就来写个范例吧
export const GETv1CommonMsg = () => Promise.resolve('fetch successful');
再来
const [message, setMessage] = useState('fetch failure');
useEffect(() => {
const getMsg = async () => {
const res = await GETv1CommonMsg();
if (res) {
setStatus(res);
}
}
getMsg();
}, []);
有关於react hooks相关简介,会在後面章节简介.
这里暂停一下,看到这一幕,大家脑袋想一下,我们的message怎样变化.
很多人一定想,message会从fetch failure → fetch successful,答案是你没猜错这就是正确答案,但这时候您们可以想一下,啊 我是不是依赖到GETv1CommonMsg这个function了,因为我现在这边return 回来的值是hard code,假如不同会产生什麽问题?
这时候我们就把这个api mock起来
import { render, screen } from '@testing-library/react';
import App from './App';
import * as apis from './utils/api';
const mock = jest.spyOn(apis, 'GETv1ConsumerList');
test('should show success message', async () => {
mock.mockImplementation(() => Promise.resolve('good!'));
render(<App />);
expect(mock).toHaveBeenCalledTimes(1)
})
toHaveBeenCalledTimes是testing-library/react的api 稍後会介绍
<<: [Day17] Esp32用STA mode + Relay
>>: 前端工程师也能开发全端网页:挑战 30 天用 React 加上 Firebase 打造社群网站|Day18 即时更新留言
今天是30天程序语言研究的第二十七天,由於最近写unix语言的东西用到很多,所以做了很多笔记,就想说...
今日题目 题目连结:965. Univalued Binary Tree 题目主题:Tree, De...
https://www.bleepingcomputer.com/news/microsoft/ne...
D3js Diagram常见的两点浪漫路径 用途 在绘制diagram图表时,会用到的垂直水平连线,...
由於不是设计师,对於UI/UX相关的东西懂得可能就跟完全没接触过的人一样, 所以在想做一个自己的Ap...