介绍
resolve-snapshot-lite 是一个 npm 包，用于封装 GraphQL 的快照测试（Snapshot Testing）。
在前端开发中，我们写测试用例的目的是为了验证代码的正确性，但对于涉及到异步数据的情况，写测试用例就较为困难。针对这种情况，GraphQL 提供了一种方法，就是通过快照测试来验证异步查询结果的正确性。
resolve-snapshot-lite 就是一个非常实用的 npm 包，它可以帮助我们更方便地进行 GraphQL 快照测试。
安装
我们可以通过以下命令来安装 resolve-snapshot-lite ：
npm install --save-dev resolve-snapshot-lite
使用教程
1. 配置快照测试
首先，我们需要配置 jest 的测试运行器，使其支持快照测试。
在 package.json 文件中添加以下代码：
"jest": {
"snapshotSerializers": ["resolve-snapshot-lite"],
"moduleFileExtensions": ["js", "jsx", "json"],
"transform": {
"^.+\\.(js|jsx)?$": "babel-jest"
}
}2. 编写测试用例
在编写测试用例时，我们需要在文件头部引入 resolve-snapshot-lite：
import { snaphotTest } from 'resolve-snapshot-lite'然后，我们可以针对某个异步查询编写测试用例：
test('test async query', async () => {
const result = await myAsyncQuery()
snapshotTest(result)
})3. 运行测试
现在我们可以运行测试了：
npx jest
如果测试通过，将会在 snapshots 目录下生成一个快照文件。
4. 更新测试快照
当异步查询的响应数据发生变化时，我们需要更新测试快照。
在运行测试时，如果某个测试用例的结果与快照文件中的数据不一致，jest 会提示我们需要更新快照：
-- -------------------- ---- -------
------ ----------------
- ---- - -- ----
----------------------------------
-------- ----- ---- --- ----- ------ -------- --
- --------
- --------
-- ---- ---- --
------ -
- ------- ------ -
- ------- -------
- ------- ------ --
- ------- --------
--
-
- - -------- ------ -- -- -
- - ----- ---- - ---------
- - - ------------------------------
- -
- - --
- -我们只需要使用 jest 提供的更新快照的命令：
npx jest -u
就可以更新快照文件了。
示例代码
以下代码是一个完整的使用示例：
// my-async-query.js
export default async function myAsyncQuery() {
// ...
}// my-test.js
import { snapshotTest } from 'resolve-snapshot-lite'
import myAsyncQuery from './my-async-query'
test('test async query', async () => {
const result = await myAsyncQuery()
snapshotTest(result)
})-- -------------------- ---- -------
-- ------------
-
------- ----------
---------- --------
------------------ -
------------- ----------
------- ----------
------------------------ --------
--
------- -
---------------------- --------------------------
----------------------- ------ ------ --------
------------ -
------------------- ------------
-
-
-总结
resolve-snapshot-lite 的设计初衷是为了帮助我们更方便地进行 GraphQL 的快照测试，减少我们的测试用例编写量，提升测试效率。如果你经常在前端开发中使用 GraphQL，那么 resolve-snapshot-lite 这个 npm 包肯定是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63809