如何在生产中使用 cypress-react-selector 执行集成测试？

Question

我在 SO 和文档网站上搜索了很多，但没有解决我的问题。
我们正在使用 cypress-react-selector 来测试我们的 React 应用程序，它在本地开发中运行良好。

问题是，一旦我们继续生产并且 React 组件被缩小，所有测试都不会通过，因为 cy.getReact() 方法无法找到组件。

比如我在本地开发中有这样一段代码：

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

但在生产中 Button 组件被缩小了（使用 React 开发工具我发现它被简单地称为 d）。

如何创建能够在本地和生产环境中 运行 的测试？

Answer 1

根据这个问题（20 天前）"Component not found" because of not considered displayName，您可以通过添加 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.

对于功能组件，

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

Button.displayName = 'Button'

对于 class 个组件

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