Question

我目前正在尝试在我使用Material UI的React项目中改进测试。我正在利用玩笑和酶来进行测试。

到目前为止，我一直在使用.find查找组件并对其执行操作。最近，我偶然发现了一个无法找到答案的烦恼/问题。为了选择某种方案，我在下面选择了一种方案：

我有一个用户输入的表格

名字
姓氏
电子邮件
电话号码
依此类推...

我正在为此表格创建包装器，而找到.simulate('change')字段的最合理的方法是使用包装器并执行以下操作：

// Arrange
const formWrapper = formWrapper(); // <--- A mount function to create the above described form
const firstNameField = formWrapper.find('input').at(1); // <--- This is currently my issue
const lastNameField = formWrapper.find('input').at(2); // <--- This is currently my issue
// ... and so forth

// Act
firstName.simulate('change', { target: { name: 'firstName', value: 'Bobby' },});
lastName.simulate('change', { target: { name: 'lastName', value: 'Brown' },});
// ... more simulations ofc

// Assert
// ... and some expects.

让我烦恼的是我“获取”我的输入的方式。我知道firstName字段是.at(1)的唯一原因是因为我已经查看了HTML。这不是一个非常可靠的方法。如果我需要更新该表单，那么整个测试将失败，并且我将不得不再次确定哪些字段是

。

一个小小的注意事项是，我使用Material UI Text Fields作为基本组件，但是我已经根据需求设置了样式。我尝试将一些自定义属性传递给我的组件（例如test="firstNameField"），但这并不是一个很好的解决方案，因为Material UI将其传递给所有子组件。如果这样做，我当然总是可以找到.at(1)，如果我使自定义道具对每个字段都是唯一的。但是我也不认为这是做到这一点的方法。应该还有我还不知道的其他方式。

所以我的问题是：

有人知道一种更强大的方法吗？

编辑：

在阅读评论和建议后，我发现我对问题的回答可能太具体了。当然，示例（上面有输入）是我面临的问题之一，但是其他组件也是如此。

假设我在上述表单元素上具有两个相同的组件（印刷字段-更具体地是段落标签），它们都由相同的基本组件组成，我将如何区分这两个组件？是否会强制为他们提供唯一的ID，或者还有其他方法吗？即使我确实给他们提供了唯一的ID，这些ID也将传递给Material UI组件具有的所有子代。

Answer 1

您可以使用react-testing-library进行查询，以根据用户与您的应用程序（在您的情况下）与应用程序的交互方式进行选择。

例如，如果您想输入名称，并且标签具有正确的htmlFor，则可以使用

const nameField = getByLabelText('name');

Answer 2

好的。

因此，在经过大量研究和文档通读后，我发现您可以简单地链接.find()，如果您认为还不够，还可以使用.findWhere()适合您的口味。

因此，最后我要做的是获取具有属性name: 'firstName且是input字段的“字段”。

以下代码段说明：

const firstNameField = formWrapper.find({name: 'firstName'}).find('input');
const lastNameField = formWrapper.find({name: 'lastName'}).find('input');

const firstNameField = formWrapper.findWhere(n => n.name === 'firstName' && n.type === 'input');
const lastNameField = formWrapper.findWhere(n => n.name === 'lastName' && n.type === 'input');

此方法从Material UI（所有从其父代传递了prop的子代）中删除了过多的节点。

我还找到了有关使用Material UI内置的经过修改的“酶”程序包的文档，但是到目前为止，就我的问题而言，它什么都没有改变，常规酶程序包也可以正常工作。

使用笑话和酵素进行可靠的测试

2 个答案: