Test Renderer

Dojo 提供了一个简单且类型安全的测试渲染器(test renderer)，以便于浅断言部件期望的输出结构和行为。测试渲染器的 API 在设计之初就鼓励将单元测试作为最佳实践，以确保 Dojo 应用程序的高度可靠性。

断言和测试渲染器是结合断言结构中定义的包装的测试节点来使用的，确保在测试的整个生命周期类型安全。

使用 assertion 定义部件的期望结构，然后将其传给测试渲染器的 .expect() 函数，测试渲染器就可执行断言。

src/MyWidget.spec.tsx

  1. import { tsx } from '@dojo/framework/core/vdom';
  2. import renderer, { assertion } from '@dojo/framework/testing/renderer';
  4. import MyWidget from './MyWidget';
  6. const baseAssertion = assertion(() => (
  7.     <div>
  8.         <h1>Heading</h1>
  9.         <h2>Sub Heading</h2>
  10.         <div>Content</div>
  11.     </div>
  12. ));
  14. const r = renderer(() => <MyWidget />);
  16. r.expect(baseAssertion);

包装的测试节点

为了让测试渲染器和断言能在期望和实际的节点结构中标识节点，需要使用指定的包装节点。在期望的断言结构中，可使用包装的节点代替实际节点，从而保持所有正确的属性和子类型。

使用 @dojo/framework/testing/renderer 中的 wrap 函数来创建一个包装的测试节点：

src/MyWidget.spec.tsx

  1. import { wrap } from '@dojo/framework/testing/renderer';
  3. import MyWidget from './MyWidget';
  5. // Create a wrapped node for a widget
  6. const WrappedMyWidget = wrap(MyWidget);
  8. // Create a wrapped node for a vnode
  9. const WrappedDiv = wrap('div');

测试渲染器使用测试节点在预期树结构中的位置，尝试对被测部件的实际输出上执行任意请求操作（r.property() 或 r.child）。如果包装的测试节点与实际输出数结构上对应的节点不匹配，则不会执行任何操作，并且断言会报错。

注意： 包装的测试节点只能在断言中使用一次，如果在一次断言中多次检测到同一个测试节点，则会抛出错误，并导致测试失败。

断言

断言（assertion）用于构建预期的部件输出结构，以便在 renderer.expect() 中使用。断言公开了一系列 API，允许在不同的测试间调整期望的输出。

假定有一个部件，它根据属性值渲染不同的内容：

src/Profile.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  3. import * as css from './Profile.m.css';
  5. export interface ProfileProperties {
  6.     username?: string;
  7. }
  9. const factory = create().properties<ProfileProperties>();
  11. const Profile = factory(function Profile({ properties }) {
  12.     const { username = 'Stranger' } = properties();
  13.     return <h1 classes={[css.root]}>{`Welcome ${username}!`}</h1>;
  14. });
  16. export default Profile;

使用 @dojo/framework/testing/renderer#assertion 创建一个断言：

src/Profile.spec.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion, wrap } from '@dojo/framework/testing/renderer';
  5. import Profile from '../../../src/widgets/Profile';
  6. import * as css from '../../../src/widgets/Profile.m.css';
  8. // Create a wrapped node
  9. const WrappedHeader = wrap('h1');
  11. // Create an assertion using the `WrappedHeader` in place of the `h1`
  12. const baseAssertion = assertion(() => <WrappedHeader classes={[css.root]}>Welcome Stranger!</WrappedHeader>);
  14. describe('Profile', () => {
  15.     it('Should render using the default username', () => {
  16.         const r = renderer(() => <Profile />);
  18.         // Test against the base assertion
  19.         r.expect(baseAssertion);
  20.     });
  21. });

为了测试将 username 属性传给 Profile 部件，我们创建一个新的断言，将其更新为期望的用户名。但是，随着部件功能的增加，为每个场景重新创建整个断言将变得冗长且难以维护，因为对部件结构中的任何更改都需要调整所有断言。

为了避免维护开销并减少重复，断言提供了一套详尽的 API 来基于基础断言创建出变体。断言 API 使用包装的测试节点来标识要更新的期望结构中的节点。

src/Profile.spec.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion, wrap } from '@dojo/framework/testing/renderer';
  5. import Profile from '../../../src/widgets/Profile';
  6. import * as css from '../../../src/widgets/Profile.m.css';
  8. // Create a wrapped node
  9. const WrappedHeader = wrap('h1');
  11. // Create an assertion using the `WrappedHeader` in place of the `h1`
  12. const baseAssertion = assertion(() => <WrappedHeader classes={[css.root]}>Welcome Stranger!</WrappedHeader>);
  14. describe('Profile', () => {
  15.     it('Should render using the default username', () => {
  16.         const r = renderer(() => <Profile />);
  18.         // Test against the base assertion
  19.         r.expect(baseAssertion);
  20.     });
  22.     it('Should render using the passed username', () => {
  23.         const r = renderer(() => <Profile username="Dojo" />);
  25.         // Create a variation of the base assertion
  26.         const usernameAssertion = baseAssertion.setChildren(WrappedHeader, () => ['Dojo']);
  28.         // Test against the username assertion
  29.         r.expect(usernameAssertion);
  30.     });
  31. });

在基础断言之上创建新断言意味着，如果对默认的部件输出进行了更改，则只需修改基础断言，就可更新部件的所有测试。

断言 API

assertion.setChildren()

返回一个新断言，根据传入的 type 值将新的子节点放在已存子节点之前，或者之后，或者替换掉子节点。

  1. .setChildren(
  2.   wrapped: Wrapped,
  3.   children: () => RenderResult,
  4.   type: 'prepend' | 'replace' | 'append' = 'replace'
  5. ): AssertionResult;

assertion.append()

返回一个新断言，将新的子节点追加在已存在子节点之后。

  1. .append(wrapped: Wrapped, children: () => RenderResult): AssertionResult;

assertion.prepend()

返回一个新断言，将新的子节点放在已存在子节点之前。

  1. .prepend(wrapped: Wrapped, children: () => RenderResult): AssertionResult;

assertion.replaceChildren()

返回一个新断言，使用新的子节点替换掉已存在的子节点。

  1. .append(wrapped: Wrapped, children: () => RenderResult): AssertionResult;

assertion.insertSiblings()

返回一个新节点，根据传入的 type 值，将传入的子节点插入到 before 或 after 位置。

  1. .insertSiblings(
  2.   wrapped: Wrapped,
  3.   children: () => RenderResult,
  4.   type: 'before' | 'after' = 'before'
  5. ): AssertionResult;

assertion.insertBefore()

返回一个新节点，将传入的子节点插入到已存在子节点之前。

  1. .insertBefore(wrapped: Wrapped, children: () => RenderResult): AssertionResult;

assertion.insertAfter()

R 返回一个新节点，将传入的子节点插入到已存在子节点之后。

  1. .insertAfter(wrapped: Wrapped, children: () => RenderResult): AssertionResult;

assertion.replace()

返回一个新断言，使用传入的节点替换掉已存在的节点。注意，如果你需要在断言或测试渲染器中与传入的新节点交互，则应传入包装的测试节点。

  1. .replace(wrapped: Wrapped, node: DNode): AssertionResult;

assertion.remove()

返回一个新断言，其中完全删除指定的包装节点。

  1. .remove(wrapped: Wrapped): AssertionResult;

assertion.setProperty()

返回一个新断言，为指定的包装节点设置新属性。

  1. .setProperty<T, K extends keyof T['properties']>(
  2.   wrapped: Wrapped<T>,
  3.   property: K,
  4.   value: T['properties'][K]
  5. ): AssertionResult;

assertion.setProperties()

返回一个新断言，为指定的节点设置多个新属性。

  1. .setProperties<T>(
  2.   wrapped: Wrapped<T>,
  3.   value: T['properties'] | PropertiesComparatorFunction<T['properties']>
  4. ): AssertionResult;

可以设置一个函数来代替属性对象，以根据实际属性返回期望的属性。

触发属性

除了断言部件的输出结构外，还可以使用 renderer.property() 函数测试部件行为。property() 函数接收一个包装的测试节点和一个在下一次调用 expect() 之前会被调用的属性 key。

src/MyWidget.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import icache from '@dojo/framework/core/middleware/icache';
  3. import { RenderResult } from '@dojo/framework/core/interfaces';
  5. import MyWidgetWithChildren from './MyWidgetWithChildren';
  7. const factory = create({ icache }).properties<{ onClick: () => void }>();
  9. export const MyWidget = factory(function MyWidget({ properties, middleware: { icache } }) {
  10.     const count = icache.getOrSet('count', 0);
  11.     return (
  12.         <div>
  13.             <h1>Header</h1>
  14.             <span>{`${count}`}</span>
  15.             <button
  16.                 onclick={() => {
  17.                     icache.set('count', icache.getOrSet('count', 0) + 1);
  18.                     properties().onClick();
  19.                 }}
  20.             >
  21.                 Increase Counter!
  22.             </button>
  23.         </div>
  24.     );
  25. });

src/MyWidget.spec.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion, wrap } from '@dojo/framework/testing/renderer';
  4. import * as sinon from 'sinon';
  6. import MyWidget from './MyWidget';
  8. // Create a wrapped node for the button
  9. const WrappedButton = wrap('button');
  11. const WrappedSpan = wrap('span');
  13. const baseAssertion = assertion(() => (
  14.     <div>
  15.         <h1>Header</h1>
  16.         <WrappedSpan>0</WrappedSpan>
  17.         <WrappedButton
  18.             onclick={() => {
  19.                 icache.set('count', icache.getOrSet('count', 0) + 1);
  20.                 properties().onClick();
  21.             }}
  22.         >
  23.             Increase Counter!
  24.         </WrappedButton>
  25.     </div>
  26. ));
  28. describe('MyWidget', () => {
  29.     it('render', () => {
  30.         const onClickStub = sinon.stub();
  31.         const r = renderer(() => <MyWidget onClick={onClickStub} />);
  33.         // assert against the base assertion
  34.         r.expect(baseAssertion);
  36.         // register a call to the button's onclick property
  37.         r.property(WrappedButton, 'onclick');
  39.         // create a new assertion with the updated count
  40.         const counterAssertion = baseAssertion.setChildren(WrappedSpan, () => ['1']);
  42.         // expect against the new assertion, the property will be called before the test render
  43.         r.expect(counterAssertion);
  45.         // once the assertion is complete, check that the stub property was called
  46.         assert.isTrue(onClickStub.calledOnce);
  47.     });
  48. });

可在函数名之后传入函数的参数，如 r.property(WrappedButton, 'onclick', { target: { value: 'value' }})。当函数有多个参数时，逐个传入即可 r.property(WrappedButton, 'onclick', 'first-arg', 'second-arg', 'third-arg')。

断言函数型的子节点

要断言函数型子节点的输出内容，测试渲染器需要理解如何解析子节点的渲染函数。包括传入任意期望的注入值。

测试渲染器的 renderer.child() 函数能够解析子节点，以便将解析结果包含到断言中。使用 .child() 函数时，需要包装使用了函数型子节点的部件，以在断言中使用，然后将包装的节点传给 .child 函数。

src/MyWidget.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import { RenderResult } from '@dojo/framework/core/interfaces';
  4. import MyWidgetWithChildren from './MyWidgetWithChildren';
  6. const factory = create().children<(value: string) => RenderResult>();
  8. export const MyWidget = factory(function MyWidget() {
  9.     return (
  10.         <div>
  11.             <h1>Header</h1>
  12.             <MyWidgetWithChildren>{(value) => <div>{value}</div>}</MyWidgetWithChildren>
  13.         </div>
  14.     );
  15. });

src/MyWidget.spec.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion, wrap } from '@dojo/framework/testing/renderer';
  5. import MyWidgetWithChildren from './MyWidgetWithChildren';
  6. import MyWidget from './MyWidget';
  8. // Create a wrapped node for the widget with functional children
  9. const WrappedMyWidgetWithChildren = wrap(MyWidgetWithChildren);
  11. const baseAssertion = assertion(() => (
  12.     <div>
  13.       <h1>Header</h1>
  14.       <WrappedMyWidgetWithChildren>{() => <div>Hello!</div>}</MyWidgetWithChildren>
  15.     </div>
  16. ));
  18. describe('MyWidget', () => {
  19.     it('render', () => {
  20.         const r = renderer(() => <MyWidget />);
  22.         // instruct the test renderer to resolve the children
  23.         // with the provided params
  24.         r.child(WrappedMyWidgetWithChildren, ['Hello!']);
  26.         r.expect(baseAssertion);
  27.     });
  28. });

自定义属性比较器

在某些情况下，测试期间无法得知属性的确切值，所以需要使用自定义比较器。自定义比较器用于包装的部件，结合 @dojo/framework/testing/renderer#compare 函数可替换部件或节点属性。

  1. compare(comparator: (actual) => boolean)
  1. import { assertion, wrap, compare } from '@dojo/framework/testing/renderer';
  3. // create a wrapped node the `h1`
  4. const WrappedHeader = wrap('h1');
  6. const baseAssertion = assertion(() => (
  7.     <div>
  8.         <WrappedHeader id={compare((actual) => typeof actual === 'string')}>Header!</WrappedHeader>
  9.     </div>
  10. ));

断言时忽略节点

当处理渲染多个项的部件时，例如一个列表，可能需要让测试渲染器忽略输出中的一些内容。比如只断言第一个和最后一项是有效的，然后忽略这两项中间的所有项的详细信息，只是简单断言期望的类型。要让测试渲染器做到这一点，需使用 ignore 函数让测试渲染器忽略节点，只检查节点类型是否相同即可，即匹配标签名或部件的工厂或构造器。

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import renderer, { assertion, ignore } from '@dojo/framework/testing/renderer';
  4. const factory = create().properties<{ items: string[] }>();
  6. const ListWidget = create(function ListWidget({ properties }) {
  7.     const { items } = properties();
  8.     return (
  9.         <div>
  10.             <ul>{items.map((item) => <li>{item}</li>)}</ul>
  11.         </div>
  12.     );
  13. });
  15. const r = renderer(() => <ListWidget items={['a', 'b', 'c', 'd']} />);
  16. const IgnoredItem = ignore('li');
  17. const listAssertion = assertion(() => (
  18.     <div>
  19.         <ul>
  20.             <li>a</li>
  21.             <IgnoredItem />
  22.             <IgnoredItem />
  23.             <li>d</li>
  24.         </ul>
  25.     </div>
  26. ));
  27. r.expect(listAssertion);

Mocking 中间件

当初始化测试渲染器时，可将 mock 中间件指定为 RendererOptions 值的一部分。Mock 中间件被定义为由原始的中间件和 mock 中间件实现组成的元组。Mock 中间件的创建方式与其他中间件相同。

  1. import myMiddleware from './myMiddleware';
  2. import myMockMiddleware from './myMockMiddleware';
  3. import renderer from '@dojo/framework/testing/renderer';
  5. import MyWidget from './MyWidget';
  7. describe('MyWidget', () => {
  8.     it('renders', () => {
  9.         const r = renderer(() => <MyWidget />, { middleware: [[myMiddleware, myMockMiddleware]] });
  11.         h
  12.             .expect
  13.             /** 断言执行的是 mock 的中间件而不是实际的中间件 **/
  14.             ();
  15.     });
  16. });

测试渲染器会自动 mock 很多核心中间件，并注入到任何需要他们的中间件中：

  • invalidator
  • setProperty
  • destroy

此外，当测试使用了 Dojo 中间件的部件时，还可以使用很多对应的 mock 中间件。有关已提供的 mock 中间件的更多信息，请查看 mocking。