using styled-components or custom component with cypress

Question

Cypress selector is easy, just do cy.get('.myComp') and <input className="myComp" /> will be selected but with styled-component

maybe we need to use custom attribute like cy-data, cy-testid etc. I guess there's no other shortcut than flood our component with those custom attribute right?

The other hassle using cypress is when you use css module, where the class is generated differently every build, and imagine your component is , then you need to pass your the custom attribute all the way down

<Custom cy-data="btn1" />

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

any workaround to avoid this pain?

Mark Partola · Accepted Answer · 2020-05-06 13:54:45Z

1

We use data-test-target attribute and write in manually in JSX. In simple version it's all that you need. But if you have complex cases like two forms on the same page with the same fields you need to distinct them. So that we do this:

Target can be built by 3 parameters:

block: required
element: optional
context: optional

Imagine you have a React component and want to set test targets. For example you have 2 buttons in the component: remove and edit, so it would look like

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

If you have more then one this component on the page you should pass a context in props:

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

Helper that I use to follow this idea:

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}`;
};

Usage:

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

Using it tests will be stable and they won't depend on your markup structure and class names

edited May 6, 2020 at 13:54

answered May 6, 2020 at 13:48

Mark Partola

6643 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

akibo Over a year ago

I think you didn't understand my question, I'm talking about how to avoid passing data-test-target into inner component

Mark Partola Over a year ago

I guess there is no way how to avoid passing at least a context. But just adding targets you don't need to specify context in most cases.

Vjeko Babic · Accepted Answer · 2021-01-27 12:35:02Z

1

Well you can create function that will return test attribute only for some environments. For development and for staging for example.

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

Something like this could work in general.

answered Jan 27, 2021 at 12:35

Vjeko Babic

273 bronze badges

Collectives™ on Stack Overflow

using styled-components or custom component with cypress

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related