reactjs - 如何在生产中使用 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）。

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

标签： reactjsintegration-testingcypressproduction-environment

Answer 1

根据这个问题（20天前）“未找到组件”，因为未考虑 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';
  ...
}