在测试环境中将测试数据属性设置为反应应用程序中的锚点答案

【问题标题】：Settings test data attributes as anchors in react application in testing environment在测试环境中将测试数据属性设置为反应应用程序中的锚点
【发布时间】：2019-11-14 17:15:32
【问题描述】：

我正在使用nightwatch 对我的应用程序进行端到端测试。同时我在构建中使用 CSS 模块，什么不允许我将 css-selector 链接到测试代码中的某些常量：

module.exports = {
    url() {
        return this.api.launchUrl`;
    },
    elements: {
        reactComponent: {
            selector: '?',
        },
    },
};

是否有一种方便的方式/方法可以在 react 项目中自动将某种 test-id=* 属性分配给 react 组件（取决于环境模式），还是我应该明确地进行这项工作？

【问题讨论】：

根据我的经验...您需要将 id 显式添加到组件中。这也是一个很好的做法，可以确保您确切地知道您正在测试什么 id，而不仅仅是让您的测试可能破坏另一层（由于全局添加逻辑或应用程序中的实际错误而知道 id 不存在）。不过，您可以向下传递值。因此，您可以拥有一个“级联”测试 ID，当它向下移动时，您可以将它传递下去，然后添加子组件。
实际上，如果开发 React 页面的人遵循 React 的指导方针，那么就不会有任何带有 id 的 React 元素，因为这应该是禁忌，因为 React 使用回收的视图并且 id 是特定于一个视图/元素。我不确定为什么不能为元素选择器输入 CSS 属性，因为 CSS 是一种有效的定位器策略。尝试以 '[data-attribute="whatever"]' 的形式使用已经可用的数据属性。这就是我在我们的 React 应用程序中使用的，它运行良好。除了 xpath 哈哈
@king_wayne 问题是没有数据属性，我正在寻找一种方法来设置它（自动或手动）。
我希望它是完全确定性的，我不想在生产模式下拥有过多的数据属性。
我有一种方法可以根据环境确定值，如果这对您有帮助的话。我从命令行传入--env 参数，然后在我的脚本中使用process.argv[3] 访问它，然后根据该值转到数据文件（json）并以这种方式检索值。不确定这对元素的选择器有什么帮助，但也许这会给你一个想法？

标签： css reactjs webpack nightwatch.js

【解决方案1】：

简短的回答是您必须自己设置test-id 属性。

我们在一个 React 项目中处于类似的情况，我们不希望我们的测试属性一直在生产中可见。为了解决这个问题，我们的每个测试属性都设置为

test-id=${testIdFunc('someComponentName')}

然后，我们的 React Root 组件中有一个代码块，用于检查浏览器中是否存在某个 cookie。如果 cookie 存在，则 testIdFunc 定义为 id => id，如果 cookie 不存在，则定义为 () => null。 testIdFunc 然后在 React Context 上设置，以便任何组件都可以访问它。

最终结果是，只有存在该 cookie 时才会显示您的测试属性，这听起来像是您想要的。

要在您的测试中访问它，一旦您打开浏览器窗口，您需要导航到您域中的某个 URL（最好是快速加载的 URL），设置测试 cookie，然后刷新页面（或导航到您想开始测试的任何 URL）。

【讨论】：

我发现this 包给出了类似的结果
类似，是的，只是它不允许您在 prod 中打开 data-test-ids，因此您无法在 prod 中运行测试。