Typescript Aurelia StageComponent-如何将子组件呈现到DOM树中？

如果我有一个app.html模板，如下所示：

<template>
  <require from="./MyComponent"></require>
  <h1>${message}</h1>
  <my-component>test</my-component>
</template>

和MyComponent.html：

<template>
    MyComponent
</template>

真菌成分

以下单元测试将始终失败：

import {App} from '../../src/app';
import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';

describe('the app', () => {
  var app ;
  beforeEach(() => {
    app = StageComponent
    .withResources('app')
    .inView('  <require from="./MyComponent"></require>' +
      '<h1>${message}</h1>' +
      '<my-component>test</my-component>')
    .boundTo(new App());
  } );

  it('says hello', (done) => {
    app.create(bootstrap).then( () => {
      var myComponent = document.querySelector('my-component');
      expect(myComponent.innerHTML).toContain('MyComponent');
      done();
    });

  });
});

从'../../src/App'导入{App}；
从“aurelia测试”导入{StageComponent}；
从'aurelia bootstrapper'导入{bootstrap}；
描述（'应用程序'，（）=>{
var-app；
在每个之前（（）=>{
app=舞台组件
.withResources（“应用程序”）
.inView（“”）+
“${message}”+
"测试")
.boundTo（新应用程序（））；
} );
它（'说你好'，（完成）=>{
创建（引导）。然后（（）=>{
var myComponent=document.querySelector（'my-component'）；
expect（myComponent.innerHTML）.toContain（'myComponent'）；
完成（）；
});
});
});

请注意，StageComponent正确地将app.html模板中的${message}替换为app.html，但不会创建新的MyComponent实例。 在浏览器中运行此操作时，生成的DOM为：

  <h1>Hello World!</h1>
  <my-component class="au-target" au-target-id="2">
    MyComponent
</my-component>

<h1>Hello World!</h1>
<my-component>test</my-component>

你好，世界！
真菌成分

但当在测试中通过StageComponent运行相同的代码时，生成的DOM是：

  <h1>Hello World!</h1>
  <my-component class="au-target" au-target-id="2">
    MyComponent
</my-component>

<h1>Hello World!</h1>
<my-component>test</my-component>

你好，世界！
测试

---

我遗漏了什么？

不确定，但我认为您需要这样做（或者添加customElement是可选的？）

然后

it（“测试用例”，完成=>
舞台组件
.withResources（“/full/path/to/MyComponent”）
.inView（“”）
.创建（引导）
.然后（（）=>{…}）
.然后（完成）；

我不太清楚为什么要在app.html中添加相同的html，这是为了证明它可以工作，但不是为了一个组件

或者你想测试什么

• 是否要测试应用程序视图是否使用其组件正确渲染
• 或者自定义MyComponent是否正确渲染

---

嗨，埃里克，谢谢你的回复。您在上面描述的是单独测试MyComponent元素。我试图同时呈现app组件和MyComponent，这是上述代码在浏览器中的行为。为了回答您的问题，是的，我想测试应用程序视图是否使用其组件正确呈现。

it("test case", done => 
     StageComponent 
        .withResources("./full/path/to/MyComponent")
        .inView("<my-component></my-component>"))
        .create(bootstrap)
        .then(() => {...})
        .then(done);