Reactjs 如何在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 (!

我正在使用react native和jest创建测试。我在测试一个事件侦听器时遇到了问题,该侦听器侦听来自expo链接的url事件。此事件列表器位于useEffect挂钩内

下面是自定义钩子中的代码,其中包含useEffect和事件侦听器:

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');

});