Angular 2 单元测试 - @ViewChild 未定义

2024-01-24

我正在编写 Angular 2 单元测试。我有一个@ViewChild组件初始化后我需要识别的子组件。在这种情况下,它是一个Timepicker来自 ng2-bootstrap 库的组件,尽管具体细节并不重要。之后我detectChanges()子组件实例仍然未定义。

伪代码:

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}
    
// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    }));
});

伪代码按预期工作,直到到达控制台日志。这timepickerChild未定义。为什么会发生这种情况?


我认为应该有效。也许您忘记在配置中导入某些模块。这是完整的测试代码:

import { TestBed, ComponentFixture, async } from '@angular/core/testing';

import { Component, DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { ExampleComponent } from './test.component';
import { TimepickerModule, TimepickerComponent } from 'ng2-bootstrap/ng2-bootstrap';

describe('Example Test', () => {
  let exampleComponent: ExampleComponent;
  let fixture: ComponentFixture<ExampleComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, TimepickerModule.forRoot()],
      declarations: [
        ExampleComponent
      ]
    });
    fixture = TestBed.createComponent(ExampleComponent);
  });

  it('should recognize a timepicker', async(() => {
    fixture.detectChanges();
    const timepickerChild: TimepickerComponent = fixture.componentInstance.timepickerChild;
    console.log('timepickerChild', timepickerChild);
    expect(timepickerChild).toBeDefined();
  }));
});

笨蛋的例子 https://plnkr.co/edit/Hhc3i0KECTs83JTeswHY?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 单元测试 - @ViewChild 未定义 的相关文章

随机推荐

  • 为 Telnet 会话创建脚本?

    有谁知道创建一个可以连接到 telnet 服务器的脚本的简单方法 执行一些常见的 telnet 操作 然后注销 我正在与不熟悉 telnet 及其需要运行的命令的用户打交道 我想要的只是让他们双击脚本 然后让该脚本自动为他们执行命令 您可能
  • 我可以在命令行上通过 xbuild 将参数传递给 msc 吗?

    xbuild 有没有办法通过命令行或构建脚本将附加参数传递给编译器 具体来说 我想通过 mcs debug 1获取堆栈跟踪内部编译器错误 https travis ci org libgit2 libgit2sharp builds 106
  • 如何将 SOAP 消息解析为 Jaxb 类

    我有一个 SOAPMessage 对象 我想将其解析并转换为一组 Jaxb 类 如何将消息转换为 Jaxb 可以解组的格式 javax xml bind Unmarshaller unmarshal SOAP 消息的正文包含实际数据及其要解
  • 如何在 CoreOS 的 Vagrant 虚拟机实例上运行 python?

    如何在 CoreOS 的 Vagrant 虚拟机实例上运行 python 我想访问 python 解释器 谢谢 您还可以安装python在 CoreOS 上使用下面的脚本 我们称之为install python sh bin bash e
  • PHP 联系表单在查看页面时发送空白电子邮件

    谁能帮助我阻止每次查看页面时发送空白电子邮件 这是我正在使用的代码
  • 指针减法不指向同一数组的不同元素在 C 中有效吗?

    指针减法不指向同一数组的不同元素在 C 中有效吗 下面的东西是否能保证按照 C 标准工作 我依稀记得读到这是无效的 int a int b a int 100 b int 200 printf d n b a 这会给我25吗 来自 C 规范
  • 剧作家按钮的点击效果不可预测

    我至少有三个选项可以单击按钮 await page Locator button new HasText ClickAsync await page GetByRole AriaRole Button new Name ClickAsync
  • jquery sortable 不能拖到手风琴之外

    我有 2 个相连的可排序列表 一个在手风琴里面 当我尝试从手风琴中的可排序项中拖动项目时 一旦我离开手风琴 助手就会消失 我可以拖放到其他连接的可排序项之一 该项目将显示 但在我拖动时它不会显示 如果我向下拖动项目 手风琴也会向下滚动 我可
  • Tensorflow2.0:GPU 在超参数调整循环期间内存不足

    我正在尝试对使用 GPU 扩展的 Tensorflow 2 0 编写的卷积神经网络进行一些超参数调整 我的系统设置是 Windows 10 64 位 GeForce RTX2070 8GB 张量流 2 0 测试版 CUDA 10 0正确安装
  • 如何在android中的同一个textview中显示粗体和普通文本?

    我搜索过互联网并尝试了以下代码 但它不起作用 SpannableString ss1 new SpannableString Health ss1 setSpan new android text style StyleSpan andro
  • 如何使用 Boost Hana 消除元编程递归

    我正在尝试根据发送到函数的类型创建一个位集 但让我们稍微减少一下测试用例 Warning 我在这个例子中使用自动 gcc 扩展 我不需要使用模板参数 该错误是由于使用手动递归导致的越界访问造成的 函数式编程的部分目的是提供结构来消除此类错误
  • 如何获取 Coldfusion 中的 URL 参数和值?

    如何获取 Coldfusion 中的 URL 参数和值 例如 我的网址是 test cfm par1 val1 par2 val2 par3 val3 是否可以直接获取第二个参数及其值 with
  • “git add --patch”包含新文件?

    当我跑步时git add p 有没有办法让 git 选择新制作的文件作为 hunk 来选择 所以如果我创建一个名为foo java 然后运行 git add p git 不会让我选择要添加到索引中的文件内容 当我尝试时git add p s
  • 如何将可观察列表转换为数组列表?爪哇

    我试图获取表视图中的所有项目并将它们放入数组列表中以进行进一步处理 这就是我想要实现的目标 但显然这是行不通的 ArrayList
  • 为什么 Channel.waitForConfirmsOrDie 不阻塞?

    我有一个发布 订阅用例 我想在发布端进行阻止 直到每个订阅者确认他们已完成处理发布者发送的消息 我 错误地 假设我可以使用 RabbitMQ 及其 Java amqp client 的 Channel waitForConfirmsOrDi
  • 如何向矢量绘图添加阴影?

    我有一个矢量可绘制对象 category bg 我将其用作 FrameLayout 的背景
  • sklearn随机森林索引feature_importances_如何实现

    我在 sklearn 中使用 RandomForestClassifier 来确定数据集中的重要特征 我如何能够返回实际的功能名称 我的变量标记为 x1 x2 x3 等 而不是它们的相对名称 它告诉我重要的功能是 12 22 等 下面是我当
  • 我应该怎么做才能从 eclipse - Android 连接到服务器?

    大师们 我对这个话题有点迷失 这是我正在尝试做的事情的细分 用户 Android 设备 将位置信息发送到服务器 gt 服务器 server 返回已使用 sql 排序的项目列表 gt db 服务器 获取表信息并返回给用户 gt 用户 Andr
  • 以编程方式配置 p2 更新存储库

    Eclipse wiki 中有一篇文章如何通过向您的产品添加静态conf 文件来配置 RCP 应用程序的用户 p2 默认存储库 Equinox p2 向 RCP 应用程序添加自我更新 配置用户的默认存储库 http wiki eclipse
  • Angular 2 单元测试 - @ViewChild 未定义

    我正在编写 Angular 2 单元测试 我有一个 ViewChild组件初始化后我需要识别的子组件 在这种情况下 它是一个Timepicker来自 ng2 bootstrap 库的组件 尽管具体细节并不重要 之后我detectChange