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 即时更新留言

30天程序语言研究

今天是30天程序语言研究的第二十七天,由於最近写unix语言的东西用到很多,所以做了很多笔记,就想说...

Day 14:965. Univalued Binary Tree

今日题目 题目连结:965. Univalued Binary Tree 题目主题:Tree, De...

Microsoft 2022 一月份修正问题

https://www.bleepingcomputer.com/news/microsoft/ne...

Day28 D3js Diagram常见的两点浪漫路径

D3js Diagram常见的两点浪漫路径 用途 在绘制diagram图表时,会用到的垂直水平连线,...

[Day 08] 原形设计的样板参考

由於不是设计师,对於UI/UX相关的东西懂得可能就跟完全没接触过的人一样, 所以在想做一个自己的Ap...