对于一个 React 应用,通常有两种测试,一种是单元测试,另一种是 E2E 测试。在 puppeteer 出现以后,我们可以借助 puppeteer 来帮我们进行 E2E 测试。
然而,puppeteer 的几乎所有的 API 都是异步的,它返回的是一个 Promise
。
这就导致整个代码有点啰嗦,下面是一个简单的例子:
const assert = require('assert')
const puppeteer = require('puppeteer')
test('a simple test', async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://example.com')
const text = await page.$eval('.greeting', element => element.textContent)
assert.strictEqual(text, 'Hello World')
await browser.close()
})
如您所见,一堆的 await
关键字使得代码不太优雅。
为此,我受到了 Laravel Dusk 的启发,写了 Rize
这个库。
上面的例子如果用 Rize 重写,将会是这个样子:
const Rize = require('rize')
const rize = new Rize()
rize
.goto('http://example.com')
.assertSeeIn('.greeting', 'Hello World')
.end()
除此之外,Rize
还提供了很多方便实用的断言方法,使得测试变得简单。例如,您可以用 assertClassHas
方法来断言某个元素上存在指定的类名,等等。
更多的 API 可以参考 Rize 的文档(链接在下方)。
Rize 库的 GitHub 仓库:https://github.com/g-plane/rize (欢迎 star)
Rize 库的文档教程:https://rize.js.org/
Rize 库所有的 API 参考:https://rize.js.org/api/classes/index.rize.html