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

Question

我正在使用nightwatch进行端到端测试我的应用程序。同时，我在构建中使用CSS模块，但不允许我将CSS选择器链接到测试代码中的某些常量：

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

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

Answer 1

简短的答案是，您将必须自行设置test-id属性。

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

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

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

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

要在测试中访问此文件，请在打开浏览器窗口后立即导航到您域中的某个URL（最好是快速加载的URL），设置测试Cookie并刷新页面（或导航至任何内容您要开始测试的URL）。