11、端到端测试与 React 组件重构全解析

端到端测试与 React 组件重构全解析

1. 端到端测试用例规划

在进行端到端测试时，我们需要明确测试的方向。可以站在最终用户的角度，在应用中进行操作，思考常见的用户交互以及大多数用户可能遇到的错误情况，然后将这些情况转化为具体的测试用例。

以下是一些关键路径的测试用例：
| 路径 | 测试用例 |
| — | — |
| /register | 1. 应显示注册表单
2. 应允许用户注册
3. 若用户名已被占用，应抛出错误
4. 若电子邮件地址已被占用，应抛出错误 |
| /login | 1. 应显示登录表单
2. 应允许用户登录
3. 若凭证不正确，应抛出错误 |
| /logout | 1. 应注销用户 |
| /status | 1. 若用户已登录，应显示用户信息
2. 若用户未登录，不应显示用户信息 |
| / | 1. 若用户未登录，应正确显示页面 |

2. 注册功能测试实现

在“e2e”目录下添加一个名为“register.test.js”的新文件，并编写以下测试代码：

import { Selector } from 'testcafe';
const randomstring = require('randomstring');
const username = randomstring.generate();
const email = `${username}@test.com`;
const TEST_URL =