7、React 表单测试驱动开发实战

React 表单测试驱动开发实战

1. 测试套件的否定匹配器

在测试中，除了常规的匹配器，还有否定形式的匹配器，例如：

expect(secondButton().className).not.toContain("toggled");

匹配器应支持这种形式，并能显示合适的失败消息。

2. 测试驱动的数据输入概述

在开发中，表单是构建 Web 应用的重要部分，是用户输入数据的主要方式。为确保应用正常工作，需要为表单编写自动化测试。接下来会构建一个新组件 CustomerForm ，用于添加或修改客户信息，它包含三个文本字段：名字、姓氏和电话号码。

3. 添加表单元素

添加表单元素可按以下步骤操作：
1. 创建新文件 test/CustomerForm.test.js ，添加如下代码：

import React from "react";
import {
  initializeReactContainer,
  render,
  element,
} from "./reactTestExtensions";
import { CustomerForm } from "../src/CustomerForm";

describe("CustomerForm", () => {
  beforeEach(() => {
    ini