对cypress使用样式化组件或自定义组件

Question

柏树选择器很简单，只需做cy.get('.myComp')和<input className="myComp" />将被选中，但带有样式的组件

也许我们需要使用像cy-data，cy-testid这样的自定义属性。我想除了用这些自定义属性来淹没我们的组件之外，没有其他的捷径了，对吧？

使用cypress的另一个麻烦是当您使用css模块时，每次生成的类都是不同的，假设您的组件是这样的，那么您需要一直向下传递您的自定义属性。

<Custom cy-data="btn1" />

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

有什么解决方法可以避免这种痛苦吗？

Answer 1

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

目标可以通过3个参数构建：

可选数据块: required

• element: optional

• context：

假设您有一个React组件，并且想要设置测试目标。例如，组件中有两个按钮:移除和编辑，因此如下所示

<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>

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

Answer 2

你可以创建一个只在某些环境下返回test属性的函数。例如，对于开发和登台。

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

像这样的东西可以在一般情况下工作。