Reactjs 如何在useEffect中使用事件侦听器测试自定义挂钩?
我正在使用react native和jest创建测试。我在测试一个事件侦听器时遇到了问题,该侦听器侦听来自expo链接的url事件。此事件列表器位于useEffect挂钩内 下面是自定义钩子中的代码,其中包含useEffect和事件侦听器:Reactjs 如何在useEffect中使用事件侦听器测试自定义挂钩?,reactjs,react-native,testing,jestjs,listener,Reactjs,React Native,Testing,Jestjs,Listener,我正在使用react native和jest创建测试。我在测试一个事件侦听器时遇到了问题,该侦听器侦听来自expo链接的url事件。此事件列表器位于useEffect挂钩内 下面是自定义钩子中的代码,其中包含useEffect和事件侦听器: useEffect(() => { isMounted.current = true; Linking.addEventListener('url', async () => { try { if (!
useEffect(() => {
isMounted.current = true;
Linking.addEventListener('url', async () => {
try {
if (!navigation.isFocused() || !isMounted.current) return;
setIsLoading(true);
const response = await api.get('sessions/auth/success');
if (!response.data) return;
console.log('aqui');
const { notRegisteredUser, token } = response.data;
api.defaults.headers.authorization = `Bearer ${token}`;
if (notRegisteredUser && token) {
setIsLoading(false);
navigation.navigate('BirthDateScreen');
dispatch(
updateUser({
...notRegisteredUser,
}),
);
}
} catch (err) {
Alert.alert('Error', `${translate('loginRegisterError')}: `, err);
}
});
return () => {
isMounted.current = false;
};
}, [dispatch, navigation]);
在我的测试文件中,我有以下模拟:
jest.mock('expo-linking', () => {
return {
addEventListener: (event: string, callback: () => void) => callback(),
};
});
jest.mock('@react-navigation/native', () => {
return {
useNavigation: () => ({
isFocused: mockedNavigationFocus,
navigate: mockedNavigation,
}),
};
});
jest.mock('react-redux', () => {
return {
useDispatch: jest.fn(),
};
});
jest.mock('../../../store/modules/user/actions', () => {
return {
updateUser: jest.fn(),
};
});
jest.mock('i18n-js', () => {
return {
locale: 'en',
t: () => 'any key',
};
});
最后,这是我第一次尝试时的测试结果:
it('should pass the test', async done => {
mockedNavigationFocus.mockImplementation(() => true);
apiMock.onGet('sessions/auth/success').reply(200, {
notRegisteredUser: { name: 'Logan' },
token: '123',
});
render(<LoginScreen />);
await waitFor(() =>
expect(mockedNavigation).toHaveBeenCalledWith('BirthDateScreen'),
);
done();
});
通过这两个测试,我得到以下错误:
我得到的另一个错误是,useEffect中的回调函数在停止之前运行了很多次,而这在我不测试时不会发生
有人知道我怎么写这个测试吗
it('should pass the test', async () => {
mockedNavigationFocus.mockImplementation(() => true);
apiMock.onGet('sessions/auth/success').reply(200, {
notRegisteredUser: { name: 'Logan' },
token: '123',
});
const { result, waitForValueToChange } = renderHook(() => useLoginButton());
const { isLoading } = result.current;
await waitForValueToChange(() => isLoading);
await waitForValueToChange(() => isLoading);
expect(mockedNavigation).toHaveBeenCalledWith('BirthDateScreen');
});