7、React 数据输入的测试驱动开发

React 数据输入的测试驱动开发

在 React 开发中，测试驱动开发（TDD）是一种非常有效的开发方式。它可以帮助我们确保代码的质量和可靠性，同时也能提高开发效率。本文将介绍如何使用 TDD 来开发一个包含下拉框和单选按钮的预约表单。

为下拉框提供选项

初始空白选项测试

首先，我们希望下拉框的第一个选项是一个空值，这是用户创建新预约时的初始选择。我们可以编写如下测试：

it('initially has a blank value chosen', () => {
  render(<AppointmentForm />);
  const firstNode = field('service').childNodes[0];
  expect(firstNode.value).toEqual('');
  expect(firstNode.selected).toBeTruthy();
});

为了使这个测试通过，我们需要在 select 标签的顶部添加一个空选项：

export const AppointmentForm = () => (
  <form id="appointment">
    <select name="service">
      <option />
    </select>
  </form>
);