使用styled-components或自定义组件与Cypress一起使用

Question

Cypress选择器很容易，只需执行cy.get('.myComp')即可选择<input className="myComp" />，但对于styled-component，也许我们需要使用自定义属性如cy-data，cy-testid等。我猜除了用大量自定义属性来解决，没有其他捷径。

当你使用css模块时，Cypress另一个麻烦之处在于类每次构建时生成的方式不同。想象一下你的组件是<MyComp className={styles.myComp} />，那么你需要一路传递自定义属性。

<Custom cy-data="btn1" />

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

有没有任何方法来避免这种痛苦？

- akibo

Answer 1

我们使用data-test-target属性，并在JSX中手动编写。在简单的情况下，这就是你需要的全部。但如果你有复杂的情况，比如在同一页上有两个具有相同字段的表单，你需要区分它们。所以我们这样做：

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

块(block)：必填

元素(element)：可选

上下文(context)：可选

想象一下，你有一个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>

使用它进行测试将更加稳定，并且不会依赖于您的标记结构和类名。

- Mark Partola

---

我觉得你没有理解我的问题，我说的是如何避免将 data-test-target 传递到内部组件中。 - akibo

我猜没有办法完全避免传递至少一个上下文。但是，只需添加目标，大多数情况下不需要指定上下文。 - Mark Partola

Answer 2

你可以创建一个函数，仅在某些环境下返回测试属性。例如，在开发和暂存环境中。

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

一般情况下，类似这样的东西可能会起作用。

- Vjeko Babic