Create React App项目中Cypress的visit命令无法使用问题求助

核心问题定位 #

你使用了错误的Cypress启动命令：open-ct是组件测试专属启动命令，而你编写的是端到端（E2E）测试代码，二者逻辑不匹配，是报错的核心原因。

分步修复方案 #

• 调整启动命令
  跑普通E2E测试请使用标准启动命令：

  # 打开可视化界面跑测试
  yarn cypress open --config-file cypress.json
  # 无头模式跑测试
  yarn cypress run --config-file cypress.json
  

• 提前启动React本地服务
  执行Cypress测试前，需要先在独立的终端窗口启动你的Create React App项目，确保http://localhost:3000可以正常访问：

  yarn start
  

• 冗余代码优化（可选）
  你编写的beforeEach逻辑完全冗余，无论接口返回状态码是否正常都调用了cy.visit，可以直接简化为：

  beforeEach(() => {
    cy.visit('http://localhost:3000')
  })
  

  你已经在配置中开启了failOnStatusCode:false，无需额外做状态码判断。
• 组件测试适配（如果确实要测组件）
  如果你本意是要跑组件测试，不需要调用cy.visit访问完整站点，直接挂载对应组件即可，参考代码如下：

  import App from './App'
  
  describe('App component', () => {
    it('renders learn react link', () => {
      cy.mount(<App />)
      cy.contains('Learn React')
    })
  })
  

  同时需要额外安装React组件测试依赖：

  yarn add @cypress/react @cypress/webpack-dev-server webpack-dev-server --dev
  

依赖问题排查 #

如果调整命令后仍然报依赖缺失错误，执行Cypress官方环境校验命令：

npx cypress verify

如果输出验证通过，说明系统依赖无缺失；如果验证失败，按照提示安装对应依赖即可，Ubuntu 18.04环境可优先补装libgbm1、libdrm2两个高版本Cypress常用依赖。

内容的提问来源于stack exchange，提问作者ryl