• Stars
    star
    766
  • Rank 59,308 (Top 2 %)
  • Language
    Shell
  • License
    Creative Commons ...
  • Created over 2 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🃏《Jest 实践指南》

🃏《Jest 实践指南》

Coverage Status

前言

Jest 看似很简单,就像很多博客写的那样:

expect(sum(1, 1)).toEqual(2)

然而在真实业务中,写出一个好测试的难度并没有大家想的那么低。我总结了一下写测试的几个难点:

不会配置。 Jest 的上手文档非常简单,甚至不需要配置。但真实情况是只要一个配置没配好,所有测试都跑不起来。测试不像开发,代码有问题可以慢慢调。 测试是一个 0 - 1 游戏,不是成功就是失败,挫败感非常强。

不知道要怎么 Mock。 这个绝对是经典中的经典。虽然官方文档有教程,但是真实的业务往往不是那么理想,远比文档要复杂的多。

不会构造测试用例。 刚接触测试时,很容易把做业务那套 “实现 XXX 功能” 的想法代入测试。但测试的重点不在于实现功能,而是构造用例。

没有测试策略。 上面是 “技” 的难点,测试还有 “术” 的难点。闷着头一通肝测试代码并不高效,使用合适的测试策略远比写 10 个测试用例重要。

上面这些问题很容易让人写出难以维护和复杂的测试。只要业务一改,不仅要维护业务代码还要维护测试代码。 这时,你不禁感叹:“测试真浪费时间”,最终放弃写测试,直接开摆。

好的测试会让你获得很高的代码信心,而不好的测试则会严重拖垮项目开发。所以,大家所厌恶的不应该是测试本身,而是那些维护性差的测试。

目的

我在网上翻找关于前端测试的资料时,我发现真的太少了,几乎可以分为几类:

  1. 入门类。 安装 Jest,外加 expect(1 + 1).toEqual(2) 小例子
  2. API 说明书类。 类似于把 Jest 官网抄了一遍
  3. 理论类。 是什么、为什么、测试分类等,但最重要的 “怎么做” 没有说

并不是说这些文章不好,只是,这些文章大多数停留在最初级,很不利于其他同学来学习一门新技术。

同时,我还拜访了一下 Jest 的官网 。没想到,都 2022 年了,中文翻译依然这么难看:

先不说翻译的正确性如何,单看这中文的内容就让人没有想看下去的欲望,真希望 Jest 能找稍微专业一点的人来做翻译。 由于官网的中文翻译做的实在太烂,遇到问题几乎在中文社区是找不到的。

终于,我看到了 React Testing Library 作者 Kent C. Dodds 的 博客

他写了很多关于测试思路的文章,每一篇都非常精彩。受他的启发,我觉得有必要把这些思想和技巧分享出来,最终形成了这本小书。

内容

此次教程主要分享测试的思路为主,虽然以 React 为主要技术栈,但使用其它技术栈的读者依然可以流畅阅读。

本教程是我结合了自身实践、Kent C. Dodds 文章、StackOverflow、Github Issue 以及别的博客最终总结出来的一套实践指南。

小书包含 3 部分:

基础实践。 从 0 到 1 写项目和测试,每一章会通过一个业务例子来分享测试难点、解法和思路。

测试思路。 分享一些 Kent 的文章(中文翻译)以及测试总结。

配套项目 如果你在某一步卡壳了,也可以参考这个项目。

最近给这个 Repo 开了一个 讨论区 ,如果你有任何问题(Jest、测试、小书) ,都可以在这里一起讨论 😄。

求关注

这教程 + 配套项目写了 3 周,说实话挺累的。原创不易,打赏就不必了,观众老爷省着吧。只求大家多关注一下我的新公众号【写代码的海怪】。

More Repositories

1

make-wheels

🔥 🔥 《造轮子》系列小书 —— 带你造 10 个实用的 npm 库 📦
HTML
1,631
star
2

overwatch-ui

🎮 A UI library of Overwatch, built with Vue.js
Vue
446
star
3

nest-todo

🐱 使用 React.js + Nest.js 实现一个简单的 Todo App。
TypeScript
379
star
4

linter-tutorial

👮‍♀️ 《Linter 上手完全指南》
JavaScript
200
star
5

guitar-tabs-editor

🎸 A portable guitar tabs editor 🎼 based on react.js, inspired by Markdown and LaTex.
JavaScript
128
star
6

codeblock-beautifier

💅 A chrome extension for highlighting codes of Medium Articles
CSS
121
star
7

jest-tutorial-example

🃏《Jest 实践指南》的配套项目
TypeScript
89
star
8

my-react-error-bounday

手把手教你实现 react-error-boundary
TypeScript
61
star
9

ttplayer

用 React + Audio API 实现一个千千静听
TypeScript
48
star
10

weixin-cash

💰 仿微信记账小程序的 React App。
TypeScript
34
star
11

wtf-cli

A command tool for looking up abbreviation.
JavaScript
32
star
12

react-p2p-chatroom

使用 Peer.js 写的一个 React Chat App
JavaScript
21
star
13

react-chord-generator

Generator for generating chords of guitar or ukulele in the form of svg.
JavaScript
21
star
14

my-js-cookie

手把手带你造 js-cookie 轮子
TypeScript
18
star
15

my-copy-to-clipboard

手把手带你造一个 copy-to-clipboard 轮子
TypeScript
14
star
16

leetcode-python

Python solutions to coding questions in Leetcode
Python
13
star
17

my-redux

从 0 到 1 实现一个 redux
TypeScript
13
star
18

qiankun-refactor

一个用来重构的管理后台
JavaScript
11
star
19

ebook-paypal-payment

TypeScript
11
star
20

bigass-micro-app

京东 MicroApp 例子
JavaScript
11
star
21

my-react-infinite-scroller

手把手实现基于 React 的无限滚动
TypeScript
10
star
22

bilibili-activity-page-demo

TypeScript
9
star
23

react-media-recorder

封装一个录音、录像的 React Hook 方法
TypeScript
9
star
24

my-promise-poller

手把手实现 JS 的 Promise 轮训机制
TypeScript
9
star
25

mini-load-micro-app

加载微应用的最小实现
JavaScript
9
star
26

awesome-a-cat-a-dog

This repo is a collection of App: a-cat-a-dog for showing cats 🐱 and dogs 🐶.
HTML
8
star
27

easy-refer

一个方便在北美内推的网站应用
Vue
7
star
28

react-guitar-lyrics

JavaScript
6
star
29

cxk-dance

字符画:蔡徐坤跳舞
Python
6
star
30

mini-jest

Jest 的最小实现
JavaScript
6
star
31

node-autodoc

An API documentation generator driven by unit testing.
JavaScript
6
star
32

qiankun-bigass-app

JavaScript
5
star
33

my-cli

Some Awesome cli tools!
5
star
34

tenet

A VsCode extension for writing code in the inversion world
TypeScript
5
star
35

mini-css-sandbox

实现一个简单的样式隔离沙箱
JavaScript
5
star
36

uci-reg-api

To get class information from UCI REG
TypeScript
5
star
37

video-category-feeds-demo

TypeScript
5
star
38

webrtc-take-photo

JavaScript
5
star
39

sweep-skeleton

扫光骨架屏
TypeScript
5
star
40

my-idb-keyval

手把手带你造一个 idb-keyval 轮子
TypeScript
5
star
41

learn-xlsx

使用 xlsx 实现 Excel 导入导出。
TypeScript
5
star
42

resume

我的个人简历,欢迎查看与 Clone 来生成你的简历。
JavaScript
5
star
43

sketch-book

A demo for sketch book.
JavaScript
4
star
44

react-rxjs-pokemon

React + Rxjs 的 Pokemon 项目
TypeScript
4
star
45

yan-xuan

模仿网易严选
Vue
4
star
46

learn-redux-from-docs

根据 Redux 的垃圾文档来总结如何使用 Redux
TypeScript
4
star
47

haixiangyan

JavaScript
4
star
48

split-wise-react

React 版本的记账软件
JavaScript
4
star
49

my-redux-thunk

手把手实现一个 redux-thunk 中间件
JavaScript
4
star
50

bucket-list

拒绝肥宅从我做起!
3
star
51

number-display-demo

TypeScript
3
star
52

docker-todo

使用 Docker 部署一个简单的 Todo App,包含 client, server, redis, mariadb 四个容器。
JavaScript
3
star
53

static-webapp-typescript-template

A minimum template for building a static web app with TypeScript.
JavaScript
3
star
54

learn-react-hooks

学习 React hooks 的项目
TypeScript
3
star
55

facebook-ui

A UI library is built for Facebook, using React.
TypeScript
2
star
56

mini-js-sandbox

Qiankun 沙箱简单实现
JavaScript
2
star
57

leizixin

2
star
58

keng

坑 🐛
2
star
59

my-mini-books

收录所有我写的小书,欢迎白嫖和 Star~
2
star
60

a-cat-a-dog-react

A Vue App for showing cats 🐱 and dogs 🐶.
TypeScript
2
star
61

overwatch-ui-doc

Documentation website of Overwatch UI library.
Vue
2
star
62

ui-demo

UI 交互 Demo
TypeScript
2
star
63

mini-redux

redux 的简单实现
JavaScript
2
star
64

my-react-contenteditable

手把手实现一个简单的文本编辑器
TypeScript
2
star
65

a-cat-a-dog-ng

An Angular App for showing cats 🐱 and dogs 🐶
TypeScript
2
star
66

electron-demo

Little demo for building electron app
JavaScript
1
star
67

thanos-snap-cli

Randomly delete half of files in current folder
JavaScript
1
star
68

webrtc-video-peer.js

使用 peer.js 来使用 WebRTC
HTML
1
star
69

learn-reduce

学习 reduce 函数
TypeScript
1
star
70

origin-yanxuan

JavaScript
1
star
71

jianshu

CSS
1
star
72

uci-cs-253

Homework of CS 253 in UCI
JavaScript
1
star
73

split-wise-vue

Vue
1
star
74

linter-guide

已改名为 linter-tutorial,请前往 https://github.com/haixiangyan/linter-tutorial 查看
1
star
75

feishu-chatgpt

Go
1
star
76

sea-monster-ui

A very cool ui library built with React.js
JavaScript
1
star
77

split-wise-ruby

A project to learn ruby step by step
Ruby
1
star
78

learn-webpack

学习 Webpack
TypeScript
1
star
79

ant-design-cms

使用 Ant Design 实现的一个管理后台.
TypeScript
1
star
80

sliding-clock

滚动时钟
TypeScript
1
star
81

go-sync

使用 Go 实现手机、电脑同传的软件
JavaScript
1
star
82

translate-chr

Chrome extension for translation
JavaScript
1
star
83

lintcode-java

Solutions for lintcode
Java
1
star
84

my-supertest

手把手实现一个测试接口的框架 supertest
JavaScript
1
star
85

checkin-1point3acres

一键签到一亩三分地
TypeScript
1
star
86

react-adder

TypeScript
1
star
87

vue3-easy-ui

Vue
1
star
88

nest-passport

Nest.js + Passport 的最简单实现,包含各种基本身份验证场景。
TypeScript
1
star
89

react-marquee

制作一个跑马灯
TypeScript
1
star
90

easy-refer-server

项目 easy-refer 的服务器
TypeScript
1
star
91

facebook-ui-doc

TypeScript
1
star
92

a-cat-a-dog-vue

A Vue App for showing cats 🐱 and dogs 🐶.
Vue
1
star
93

hero-list

TypeScript
1
star
94

node-todo

Todo list made with fs module of Node.js
JavaScript
1
star
95

debounce-throttle

debounce 和 throttle 的简单实现
JavaScript
1
star
96

ant-design-lowcode

使用 low code 的方式编辑 ant-design list
1
star
97

flutter_todo

Dart
1
star
98

upload-server

JavaScript
1
star
99

awesome-blogs

收集一些国外优秀博客。
1
star
100

security-demo

A repo for simulating network attacks: XSS, CSRF and DDoS.
JavaScript
1
star