How to perform integration tests with cypress-react-selector in production?

user_6326261 0
Viewed 386

I've searched a lot in SO and documentation sites, but nothing solved my issue.
We're using cypress-react-selector to test our React application at work, and it works great in local development.

The problem is that as soon as we go on production and the React components get minified, al the tests don't pass since the cy.getReact() method is not able to find the components.

For example, in local development I use to have this piece of code:

cy
  .getReact('Button', { props: { icon: 'myAwesomeIcon' } })
  .should(({ node }) => node ? node.click() : null);

but in production the Button component is minified (and with the React Development tools I find that it is simply called d).

How can I create a test that is capable to run both in local and production env?

cypress reactjs production-environment integration-testing
1 Answers

According to this issue (20 days ago) "Component not found" because of not considered displayName, you can fix it by adding a displayName

Previously, the used resq dependency did not consider the displayName as it's done in the React Dev Tools. The result was that, it was not possible to find components by their name, if their name is minified, even if they had a displayName.

I've provided a fix for that, which has now been merged and released in resq version 1.10.1.

Can you please update cypress-react-selector to use the new resq version, so that displayName is also considered here?

Thanks @jens-duttke , it is available in the current version.

For a functional component,

const Button = (props) => { ... }

Button.displayName = 'Button'

For a class component

class Button extends React.Component {
  static displayName = 'Button';
  ...
}
Admin1
Related