如何使用 CodeceptJS 对 JS 函数进行单元测试答案

【问题标题】：How to use CodeceptJS to unit-test a JS function如何使用 CodeceptJS 对 JS 函数进行单元测试
【发布时间】：2021-08-21 10:13:54
【问题描述】：

我已经为一个项目设置了 CodeceptJS，并用它来测试各种端到端场景。

现在我想扩展测试套件以同时运行单元测试来验证自定义 JS 函数的功能。

例如：我有一个具有version 属性的全局对象App。作为第一个测试，我想确认 App.version 存在并且有一个值。

我的第一次尝试是包含以下代码的 test.js 文件：

Feature('Unit Tests');

Scenario('Test App presence', ({ I }) => {
    I.amOnPage('/');

    I.executeScript(function() {return App.version})
        .then(function(value) { I.say(value) } );
});

此代码存在问题

主要问题：如何断言App.version 存在？
我的脚本可以显示该值，但如果缺少它也不会失败
对于这样一个简单的测试，我的代码非常复杂。
我确信有一种更清洁/更快的方法来执行该测试，对吧？

【问题讨论】：

标签： unit-testing codeceptjs

【解决方案1】：

这是一个适合我的解决方案：

从浏览器读取数据：

我通过npx codecept gh 创建了一个自定义助手并将其命名为BrowserAccess。
帮助函数getBrowserData 使用this.helpers['Puppeteer'].page.evaluate() 从浏览器范围运行和返回自定义代码。 .evaluate() 的文档

自定义断言：

安装codeceptjs-assert 包，例如npm i codeceptjs-assert
将AssertWrapper-helper 添加到codecept-config 文件中。这将启用像I.assert(a, b) 这样的检查

完整代码

codecept.conf.js

exports.config = {
    helpers: {
        AssertWrapper: {
            require: "codeceptjs-assert"
        },
        BrowserAccess: {
            require: './browseraccess_helper.js'
        },
        ...
    },
    ...
}

browseraccess_helper.js

const Helper = require('@codeceptjs/helper');

class BrowserAccess extends Helper {
    async getBrowserData(symbolName) {
        const currentPage = this.helpers['Puppeteer'].page;
        let res;

        try {
            res = await currentPage.evaluate((evalVar) => {
                let res;
                try {
                    res = eval(evalVar);
                } catch (e) {
                }
                return Promise.resolve(res);
            }, symbolName);
        } catch (err) {
            res = null;
        }

        return res;
    }
}

jsapp_test.js（测试现在是async）

Feature('Unit Tests');

Scenario('Test App presence', async ({ I }) => {
    I.amOnPage('/');

    const version = await I.getBrowserData('App.version');
    I.assertOk(version);
});

【讨论】：