问题标签 [angular-testing-library]

我正在尝试使用 Kent C Dodds 的 @testing-library/angular 来测试角度组件。我的组件依赖于 Angular 服务。我在 api 文档中没有看到有关如何注入模拟服务以为我的单元测试提供模拟数据的信息。

在我的 component.html 中，我保留了一些必需的子组件。我想测试那些存在。我CUSTOM_ELEMENTS_SCHEMA也在我的测试平台中使用。如果我不使用它，我需要在测试中添加另外 20 个组件，这些组件不直接被测试组件使用。

在这种情况下，如何在测试中找到子组件的存在？

这是我的html：

我的测试规范文件：

任何人请帮助我？

我正在尝试将输入值添加到*ngFor元素。使用ngFori 生成表 td，其中添加了反应形式。

这是我的html：

从上面的 html 中，我选择了第一个 td( data-testid="form-create-td[0])，它是第一个孩子 ( form-create-name-field[0])，我正在尝试为其添加值，如下所示：

并尝试添加如下值： td.children[0] - is input element here

但不起作用。

我正在设置formControlNamefrom ngFor。但我无法设置它。如果我控制台td.children[0]- 获得以下值：

在这里将值设置为输入元素的正确方法是什么？

更新

当我有带有验证器对象的表单字段时，我无法设置该值。例如，我无法在以下方面增加价值：

如果我删除验证器对象并像这样更新：

工作正常。

我正在尝试index用我的 id 添加值。但得到一个错误：

这是我的模板：

我的代码有什么问题？有人帮我吗？

我正在使用https://testing-library.com/进行测试

这是我的反应形式：

});

根据图书馆的建议，我将值设置为这样的表单字段：

在其中我无法使用 设置值Name，如果我updateOn: 'blur'从表单中删除参数 - 它会设置。如何解决这个问题？否则我的表格有什么问题？

有人帮帮我吗？

更新： 组件功能：

测试onCreateFormSubmit和ssCreated- 但ssCreated不起作用：

规格文件：

我正在使用https://testing-library.com/来测试我的 Angular 应用程序。

这是我的组件功能：

测试规格：

得到错误：

如何用我设置的数据检查我的发射数据？

提前致谢。

我@testing-library用来测试我的React项目，它Material-UI用作它的主要 UI 库。正如所@testing-library暗示的，它的主要理念是以与用户使用它的方式完全相同的方式测试应用程序。例如，单击“提交”按钮或编辑标签为“用户名”等的输入。测试库为我提供了一些辅助方法，例如getByText,getByLabel等...。

我的问题是，对于某些测试，例如表单的输入测试，我需要查询输入的值或更改它的当前值。我需要getByLabel查询我的标签并转到父组件以查询其中包含的输入。该库提供了一个closestDOM 查询助手，但在某些情况下没有用，就像我刚刚描述的那样。

以这种方式编写测试感觉很好，我的意思是从用户的角度编写测试。但问题是我过于依赖Material-UI. 也许在下一次升级中，输入及其对应的标签不是祖先节点的子节点，等等......。

有什么我做错了吗？还是它@testing-library提供的测试哲学的陷阱？

这是我的包堆栈：

有没有办法使用角度的“测试库”框架测试私有方法或声明？

这是我的代码：

私有name声明和setLang方法都不可用，规范文件。什么是正确的处理方式。看来，除非我为我的两个私有声明编写测试用例，否则我无法达到 100% 的覆盖率。

我只是在尝试这个库，似乎无法通过他们的 ARIA 角色访问元素。

我使用 angular 10.0.6、jest 26.2.1 以及 jest-preset-angular 8.2.1 和 @testing-library/angular 10.0.1。我相信已经按照https://www.npmjs.com/package/jest-preset-angular和https://testing-library.com/docs/angular-testing-library/intro中的描述设置了项目

这是我要测试的组件：

以及一些测试的相关部分：

但是，我收到一条错误消息，提示找不到该角色。

我可以通过将hidden选项设置为true.

由于我尝试过的其他查询功能（例如getByTextand getByTestId）工作正常，而且我从未遇到过类似的 react 问题，我想我以某种方式搞砸了我的配置。

这是我完整的 package.json

我已将我的 repo 上传到GitHub。我做错了什么？

目前我在 Angular 9 上运行，当我使用 Jest 测试我的组件时，我收到类似“无法从 service.ts 中找到模块 'ngx-store'”的错误，并且代码显示了服务文件中的错误（购物车服务）。

从“ngx-store-9”导入 {SessionStorageService}

有一些服务注入到组件的构造函数中。为此，我正在将代码写入测试组件。

beforeEach(()=>{imports:[WebStorageModule],providers:[{provide:cartService,useClass:mockcartService}] } 这里有什么问题。