使用带有 cypress 的 styled-components 或自定义组件答案

【问题标题】：using styled-components or custom component with cypress使用带有 cypress 的 styled-components 或自定义组件
【发布时间】：2020-05-06 13:34:32
【问题描述】：

Cypress 选择器很简单，只需执行 cy.get('.myComp') 和 <input className="myComp" /> 将被选中，但使用 styled-component

也许我们需要使用自定义属性，如 cy-data、cy-testid 等。我想除了用这些自定义属性填充我们的组件之外没有其他捷径吧？

使用 cypress 的另一个麻烦是当您使用 css 模块时，每次构建都会生成不同的类，并且想象您的组件是，那么您需要一直向下传递自定义属性

<Custom cy-data="btn1" />

const Custom = ({cy-data}) => <button cy-data={cy-data} />

有什么办法可以避免这种痛苦吗？

【问题讨论】：

标签： javascript cypress e2e-testing

【解决方案1】：

我们使用 data-test-target 属性并在 JSX 中手动写入。在简单版本中，这就是您所需要的。但是，如果您有复杂的案例，例如同一页面上具有相同字段的两个表单，则需要区分它们。所以我们这样做：

目标可以由3个参数构建：

屏蔽：必需
元素：可选
上下文：可选

假设您有一个 React 组件并想要设置测试目标。例如，您在组件中有 2 个按钮：删除和编辑，所以它看起来像

<button data-test-target="component-name:remove">Remove</button>
<button data-test-target="component-name">Edit</button>

如果页面上有多个此组件，则应在 props 中传递上下文：

<button data-test-target="component-name:remove::todo-list">Remove</button>

我用来遵循这个想法的助手：

import dashify from 'dashify';

export const createTestAttribute = ({
    block: blockPart,
    element,
    context,
}) => {
    const elementPart = element ? `:${dashify(element)}` : '';
    const contextPart = context ? `::${dashify(context)}` : '';

    return `${blockPart}${elementPart}${contextPart}`;
};

用法：

<button
  data-test-target={createTestAttribute({
    block: 'component-name',
    element: 'remove',
    context: props.testContext,
  })}
>
  Remove
</button>

使用它的测试将是稳定的，它们不会依赖于您的标记结构和类名

【讨论】：

我想你没有理解我的问题，我说的是如何避免将 data-test-target 传递给内部组件
我想没有办法避免至少传递一个上下文。但在大多数情况下，只需添加不需要指定上下文的目标。

【解决方案2】：

您可以创建仅针对某些环境返回测试属性的函数。例如，用于开发和登台。

const dataTestTarget = (v) => {return !process.env.PRODUCTION ? { 'data-test-target': v } : ''}

这样的事情通常可以工作。

【讨论】：