测试调用另一个钩子的自定义react钩子

Question

在为我的自定义react钩子创建测试时，我遇到了一个难题。(我是测试新手(

基本上，我有这个钩子useUpdateProfileName，它使用useSelectProfile钩子来管理我的配置文件的状态(配置文件是一个对象(，它所做的唯一事情就是更新当前所选配置文件的名称。

import { useSelectProfile } from './use-select-profile';
export const useUpdateProfileName = () => {
const { selectedProfile, setSelectedProfile } = useSelectProfile();
const updateName = (name: string) => {
selectedProfile.name = name;
setSelectedProfile(selectedProfile);
};
return { updateName };
};

如何模拟我的useSelectProfile挂钩，以便在使用给定字符串执行updateName时可以使用selectedProfile进行验证？

describe('Use Update Profile Name', () => {
let profile: Profile;
beforeAll(() => {
profile = {name: 'Out of office'};

wrapper = ({ children }) => {
return (
<ProfileStoreProvider>{children}</ProfileStoreProvider>
);
};
});

it('Should update profile name', () => {
const { result } = renderHook(() => useUpdateProfileName(), { wrapper });
act(() => {
//setSelectedProfile(profile);
result.current.updateName('Online');
});
expect(selectedProfile).toHaveProperty('name', 'Online');
});
});

Answer 1

您不需要模拟钩子。您可以从useUpdateProfileName挂钩返回selectedName：

import { useSelectProfile } from './use-select-profile';
export const useUpdateProfileName = () => {
const { selectedProfile, setSelectedProfile } = useSelectProfile();
const updateName = (name: string) => {
selectedProfile.name = name;
setSelectedProfile(selectedProfile);
};
return { updateName, selectedProfile };
};

然后在测试中，您应该能够对result.current.selectedProfile:进行断言

it("Should update profile name", () => {
const { result } = renderHook(() => useUpdateProfileName(), { wrapper });
act(() => {
result.current.updateName("Online");
});
expect(result.current.selectedProfile).toHaveProperty("name", "Online");
});