value not being updated after calling rerender()

Hello everyone! I tried to post on stackoverflow with no luck and neither my search through issues/google gave me any result 😕

So I’m doing a migration. I’ve got this custom hook that I’m testing with @testing-library/react-hooks, jasmine and karma. It’s an AngularJS/React application.

const useSearchParams = () => {
  const $rootScope = useAngularInjection('$rootScope');
  const stateProvider = useAngularInjection('$location');
  const [ url, setUrl ] = useState(stateProvider.search());

  $rootScope.$on('$locationChangeSuccess', () => {
    setUrl(stateProvider.search());
  });

  return url;
};

Where useAngularInjection is another hook that just injects AngularJS stuff (it works fine).

This is my test:

 it('should update the search query from the url when it changes', () => {
      $location.url('https://localhost:8000?all=true&order=title&start=0');
      $rootScope.$apply();

      const { result, rerender } = renderHook(() => useSearchParams());

      $location.url('https://localhost:8000?unscheduled=true&order=title&start=10');
      $rootScope.$apply();

      rerender();

      expect(result.current).toEqual({
        unscheduled: 'true',
        order: 'title',
        start: '10',
      });
 });

At the moment result.current is still {all: 'true', start: '0', order: 'title'} – it’s not updating.

I tried to debug it and it actually goes back into the $locationChangeSuccess branch so I don’t understand why it’s not updating the value of result.current

$rootScope and $location are injected previously and also work fine.

Any idea?

[steoo]

I’m on the latest version. Unfortunately, can’t figure out a way of building an easy sandbox for this.

Thank you very much for your help anyway! Never had such responsive support from library maintainers.

[steoo]

Moving to Jest actually solved the issue 😃