Cypress 基于 React 应用端对端测试

2023-10-16 16:49:00

搭建 Cypress：

安装 Cypress：打开命令行窗口并输入 "npm install cypress --save-dev"。
在项目中初始化 Cypress：运行 "npx cypress open"，这将在项目目录中创建一个 "cypress" 文件夹。
创建第一个测试：在 cypress/integration 文件夹中创建一个名为 "first-test.js" 的文件，并输入以下代码：

describe('My First Test', () => {
  it('should visit the home page', () => {
    cy.visit('http://localhost:3000');
  });
});

运行测试：打开命令行窗口并输入 "npx cypress run"。这将在浏览器中启动 Cypress 测试运行器，并自动运行你的第一个测试。

集成 Cypress 与 React：

安装必要的依赖：输入 "npm install @cypress/react --save-dev"，将 Cypress React 集成到你的项目中。
配置 Cypress：打开 cypress.json 文件，添加 "component"：{ "supportFile"： "cypress/support/component.js" } 行。
在 cypress/support/component.js 中添加以下代码：

import React from 'react';

function mountComponent(component) {
  const root = document.createElement('div');
  document.body.appendChild(root);
  ReactDOM.render(component, root);
  return root;
}

function unmountComponent(root) {
  ReactDOM.unmountComponentAtNode(root);
  root.parentNode.removeChild(root);
}

Cypress.Commands.add('mount', component => {
  cy.wrap(mountComponent(component));
});

Cypress.Commands.add('unmount', root => {
  cy.wrap(unmountComponent(root));
});