Day 3 我要开始Mock了

Mock

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,假如不同会产生什麽问题?

  1. 回传值会因为时间或者是各种因素产生不同的结果,导致测试失败
  2. 在测试时,真实的模拟打API造成无谓的流量浪费,如果测试案例一大,流量你知道的

这时候我们就把这个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 即时更新留言

Day-27 请问 git rebase 和 git merge 是什麽?差别又在哪里?

写程序一定会用到令人又爱又恨的 Git 这个版控软件,让我们来了解一下 git rebase 和 ...

多层次纵深防御下失守案例的有效改善对策

游戏大厂EA被骇,被盗的资料在暗网贩售。 破解层层防护的方法是,弄到被盗的cookie获得EA使用的...

亿品锅 - 台中高工店 $130元也可以吃到饱

我今天选的是龙骨汤底+羊肉 (白饭是无限量供应的,淋上猪油,不小心就吃掉2碗了) 吃到饱这系列,三不...

ISO 27001 资讯安全管理系统 【解析】(十)

(三)不同的范围 范围界定是规划资讯安全管理系统(ISMS)的导入及实施的关键点,组织通常会细分为较...

Day8 Swagger UI & Open Match APIs

Swagger UI 是一个将 API 文件与 API 请求产生结合的介面套件,官方已於建立核心的 ...