16、React 组件测试与表单验证实战

React 组件测试与表单验证实战

1. 测试驱动回调属性

在开发 React 应用时，我们经常需要对组件的回调属性进行测试。为了模拟子组件的提交行为，我们引入了 propsOf 扩展函数，它可以获取传递给模拟子组件的属性。

首先，我们需要在 test/reactTestExtensions.js 中定义 propsOf 函数：

export const propsOf = (mockComponent) => {
    const lastCall = mockComponent.mock.calls[
        mockComponent.mock.calls.length - 1
    ];
    return lastCall[0];
};

然后，在 test/App.test.js 中更新导入语句，包含 propsOf ：

import {
    initializeReactContainer,
    render,
    element,
    click,
    propsOf,
} from "./reactTestExtensions";

同时，导入 act 函数和 AppointmentFormLoader