如何在 setState 回调参数中测试所有这些逻辑

Question

我正在尝试测试以下代码。我正在使用 jest 和 react 测试库。这是我第一次像这样使用 setState。我解决了我的初始问题，即避免传递当前状态的依赖关系，但我不确定如何测试它。有人可以请教。

useEffect(() => {
    setUsers(currentUsers => {
        if(currentUsers === undefined) {
            return userDataFromApi;
        } else {
            //Users already exist in state
            const mergedUserData = currentUsers.map(existingUser => {
                const matchedUser = userDataFromApi.find(user => user.name === existingUser.name);

                if (matchedUser) {
                    existingUser.stats = user.stats;
                }

                return existingUser;
            });

            return mergedUserData;
        }
    });
}, [setUsers, userDataFromApi]);

Answer 1

这段代码是实现细节。 React 测试库强制执行 UI 测试。你可以阅读this article from Kent Dodds。

在您的测试中，您可以执行与用户相同的操作（填写表单、单击等），然后检查用户应该看到或不看到的内容（可能是他的姓名、他的统计数据等）。

如果您从后端获取数据并且只想测试前端，则可以模拟后端的答案。