【翻译】https://github.com/dojo/framework/blob/master/docs/en/testing/basic-usage.md

Dojo 的 @dojo/cli-test-intern 提供了一个健壮的测试框架。它能高效地测试小部件的输出并确认是否如你所愿。

功能描述极简 API用于测试和断言 Dojo 部件预期的虚拟 DOM 和行为的精简 API。单元测试单元测试是指运行在 node 和浏览器上的测试，用于测试独立的代码块。功能测试功能测试通过 Selenium 运行在浏览器中，模拟用户与软件的交互来测试整体功能。断言模板断言模板能构建期望的渲染函数，以验证部件的输出。测试 Dojo 应用程序

Dojo 使用 @dojo/cli-test-intern 运行 tests 文件夹下的单元测试和功能测试。

你可在 node 中快速运行测试。

命令行

dojo test运行测试

Dojo 支持两种类型的测试方法：单元测试和功能测试。单元测试是运行在 node 和本地 Selenium 通道上的测试，用于测试独立的代码块。功能测试通过 Selenium 运行在浏览器中，模拟用户与软件的交互来测试整体功能。在 Selenium 上运行单元测试和功能测试时，必须先使用 @dojo/cli-build-app 进行适当的构建。

以下命令仅执行单元测试。

命令行

dojo test --unit --config local

以下命令使用 Selenium 在本地的 headless Chrome 实例中运行功能测试。

命令行

dojo test --functional --config local单元测试

Dojo 自带用于测试部件的 harness API。

src/tests/unit/widgets/Home.ts

const { describe, it } = intern.getInterface('bdd');import harness from '@dojo/framework/testing/harness';import assertionTemplate from '@dojo/framework/testing/assertionTemplate';import { w, v } from '@dojo/framework/widget-core/d';import Home from '../../../src/widgets/Home';import * as css from '../../../src/widgets/styles/Home.m.css';const baseTemplate = assertionTemplate(() => v('h2', { classes: [css.root] }, ['Home Page']));describe('Home', () => { it('default renders correctly', () => { const h = harness(() => w(Home, {})); h.expect(baseTemplate); });});

harness API 能让你核实渲染部件的输出是否如你所愿。

它是否按预期渲染?事件处理器是否按预期工作?功能测试

功能测试允许你加载一个页面并在浏览器中执行你的代码，以更好的测试部件的行为。

当编写测试用例时，你可以控制页面中测试的交互行为，来单击按钮并验证页面的内容。

tests/functional/main.ts

describe('routing', () => { it('profile page correctly loads', ({ remote }) => { return ( remote // 在本地的 node 服务器中加载 HTML 文件 .get('../../output/dev/index.html') // 根据 id 找到超链接标签的 .findById('profile') // 单击链接 .click() // 结束此操作 .end() // 找到 h2 标签 .findByTagName('h2') // 获取 h2 标签中的文本 .getVisibleText() .then((text) => { // 核实 profile 页面中 h2 标签中的内容 assert.equal(text, 'Welcome Dojo User!'); }) ); });});断言模板

断言模板提供了一种创建基本断言的方法，该方法允许你在每个测试中修改期望输出中的部分内容。

一个部件可根据属性值渲染不同的内容。

src/widgets/Profile.ts

export interface ProfileProperties { username?: string;}export default class Profile extends WidgetBase<ProfileProperties> { protected render() { const { username } = this.properties; return v('h2', { classes: [css.root] }, [`Welcome ${username || 'Stranger'}!`]); }}

你可以使用 @dojo/framework/testing/assertionTemplate 创建一个断言模板。

tests/unit/widgets/Profile.ts

// 创建一个断言const profileAssertion = assertionTemplate(() => v('h2', { classes: [css.root], '~key': 'welcome' }, ['Welcome Stranger!']));describe('Profile', () => { it('default renders correctly', () => { const h = harness(() => w(Profile, {})); // 基于基本断言测试 h.expect(profileAssertion); });});

使用在断言模板中定义的 ~key 属性，你可以为任何要测试的虚拟 DOM 提供一个值。在 .tsx 中对应的是 assertion-key 属性。

tests/unit/widgets/Profile.ts

describe('Profile', () => { it('default renders correctly', () => { const h = harness(() => w(Profile, {})); h.expect(profileAssertion); }); it('renders given username correctly', () => { // 使用给定的用户名更新期望的结果 const namedAssertion = profileAssertion.setChildren('~welcome', () => ['Welcome Kel Varnsen!']); const h = harness(() => w(Profile, { username: 'Kel Varnsen' })); h.expect(namedAssertion); });});

使用断言模板的 setChildren 方法，传入指定的 ~key 来定位一个虚拟 DOM，并修改该虚拟 DOM 的结构，然后返回更新的断言模板，你可以基于新的断言模板测试部件的输出。