Mocking UiRouter Classes with Jest

[jennyeg]

Hi! In our react app we are using UiRouter. When our team has tried to create unit tests, using jest and enzyme, for our components that are involved with the UiRouter we are getting several errors from the UiRouter. I was wondering if you could provide me with some information on how to appropriately mock the UiRouter in a unit test. The error our team is facing looks like the following:

TypeError: Cannot read property 'rules' of undefined

This is occurring in our router file where we are calling router.urlService.rules.initial( {state: "fakeState"} );

How can we mock the urlService class and the UrlRulesAPI implemented by the urlService class that is provided by the UiRouter so that our unit tests will pass successfully?

Note: we are currently already mocking the uirouter module as follows:
jest.mock('@uirouter/react');

Thank you for your help!

[christopherthielen]

It depends what you're trying to test, but I've had success mocking just the uirouter.stateService.go function.

For example:

react/src/components/__tests__/UISref.test.tsx

Lines 68 to 80 in 24a678d

	it('triggers a transition to target state', async () => {
	const goSpy = jest.spyOn(router.stateService, 'go');
	const rendered = mountInRouter(
	<UISref to="state2">
	<a data-testid="anchor" />
	</UISref>
	);
	rendered.getByTestId('anchor').click();
	expect(goSpy).toHaveBeenCalledTimes(1);
	expect(goSpy).toHaveBeenCalledWith('state2', expect.anything(), expect.anything());
	});

[muz3]

@christopherthielen, thanks. this is helpful.

It depends what you're trying to test, but I've had success mocking just the uirouter.stateService.go function.

For example:

react/src/components/__tests__/UISref.test.tsx

Lines 68 to 80 in 24a678d

	it('triggers a transition to target state', async () => {
	const goSpy = jest.spyOn(router.stateService, 'go');
	const rendered = mountInRouter(
	<UISref to="state2">
	<a data-testid="anchor" />
	</UISref>
	);
	rendered.getByTestId('anchor').click();
	expect(goSpy).toHaveBeenCalledTimes(1);
	expect(goSpy).toHaveBeenCalledWith('state2', expect.anything(), expect.anything());
	});

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions!

[stale]

This issue has been automatically closed.