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 即时更新留言
写程序一定会用到令人又爱又恨的 Git 这个版控软件,让我们来了解一下 git rebase 和 ...
游戏大厂EA被骇,被盗的资料在暗网贩售。 破解层层防护的方法是,弄到被盗的cookie获得EA使用的...
我今天选的是龙骨汤底+羊肉 (白饭是无限量供应的,淋上猪油,不小心就吃掉2碗了) 吃到饱这系列,三不...
(三)不同的范围 范围界定是规划资讯安全管理系统(ISMS)的导入及实施的关键点,组织通常会细分为较...
Swagger UI 是一个将 API 文件与 API 请求产生结合的介面套件,官方已於建立核心的 ...