如何在生产中使用 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来修复它

以前，使用的 resq 依赖项没有像在 React 开发工具中那样考虑 displayName。 结果是，如果它们的名称被缩小，即使它们有一个 displayName，也无法通过它们的名称找到组件。

我已经为此提供了一个修复程序，该修复程序现已合并并在 resq 版本 1.10.1 中发布。

能否请您更新 cypress-react-selector 以使用新的 resq 版本，以便这里也考虑 displayName？

感谢@jens-duttke，它在当前版本中可用。

对于功能组件，

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

Button.displayName = 'Button'

对于一个类组件

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