Test With 3rd Party Library

2021-04-18 约 705 字预计阅读 2 分钟

https://images.unsplash.com/photo-1671227498016-93aa927686f8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80

场景

一般的前端开发情况下，我们都会用到其他的第三方库，比如 UI 库 Ant Desgin，请求库 axios 等，通常对于 UI 库，我们可以通过快照等操作对其进行测试，但是对于像 axios 这类第三方库，我们必须通过 mock 的方式来实现。

问题

上周四晚上突然收到同事的微信求助，怎么 mock 一个 jwt-decode 这个库。然而理想很丰满，现实很骨干。妹子找了 jest 官网的各种测试方式，没有成功，我岂能随随便便成功。

妹子的问题如下：

1
2
3
4
5
6
7
8



import jwt_decode from 'jwt-decode'

const cookieAccessToken = cookie.parse(window.document.cookie) {
  "cookie-key"
}
const userJwt = (cookieAccessToken && jwt_decode(cookieAccessToken))
....

解决方案

在构建项目前期，通过各种尝试启动一个支持 import 语法的项目，始终未遂。最终还是按照 Jest 官网的提示一步步走，构建起了一个项目。

参考官网示例

官网示例如下，是一个 mock 有方法的类的，但是通过上面的代码可知，这个不是一个类，而是直接使用的一个方法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import moduleName, {foo} from '../moduleName';

jest.mock('../moduleName', () => {
  return {
    __esModule: true,
    default: jest.fn(() => 42),
    foo: jest.fn(() => 43),
  };
});

moduleName(); // Will return 42
foo(); // Will return 43

很明显这是不符合我么场景的。通过观察可知，jest.mock 的第二参数是工参数，返回了一个对象，然后通过调用个这个对象的方法，返回特定的 mock 数据。那么对于我们这种情况，我们只需要返回一个 mock 后的方法即可。

so, 方案可整理如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import jwt_decode from "jwt-decode";

jest.mock("jwt-decode", () => {
	return jest.fn().mockImplementation(() => {
		return "test";
	});
});

it("jwt", () => {
	var token =
		"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmb28iOiJiYXIiLCJleHAiOjEzOTMyODY4OTMsImlhdCI6MTM5MzI2ODg5M30.4-iaDojEVl0pJQMjrbM1EzUIfAZgsbK_kgnVyVxFSVo";

	const decoded = jwt_decode(token);
	expect(decoded).toBe("test");
});

然后运行 test，通过。

Code 地址：https://github.com/guzhongren/awesome-unittest/tree/main/JavaScript/Frontend/src/3rd-part-test

Refs

博客：https://guzhongren.github.io/

Disclaimer

本文仅代表个人观点，与 Thoughtworks 公司无任何关系。

SHA256 checksum: f2fe1394e4ab9297ed69ff73ac32e9ac1375f01c2102183b509bf9379a5995d6

赞助

SHA256 checksum: 964978ecd2059064abe542e51dc02e204d3ee2e6c320ca68e2b1399ce0c6953c

使用此文件进行校验： gpg --verify PayForGuzhongren.svg.sig

目录

Test With 3rd Party Library

场景

问题

解决方案

参考官网示例

Refs

Disclaimer

赞助