[Docs]: v30 Migration question re: `SpyInstance`

[Stanzilla]

Page(s)

https://github.com/jestjs/jest/blob/main/docs/UpgradingToJest30.md

Description

The upgrade guide about SpyInstance is a bit unclear to me,

If you were using jest.SpyInstance in your TypeScript code (for instance, to annotate the return of jest.spyOn), you should update to using jest.Mock or the more specific jest.MockedFunction types.

but the types of SpyInstance do not work with MockedFunction? Is it the case that the whole SpyOn system changed?

If I want to continue using SpyOn which type should I use?

Example migration:

Here is the whole file:

import React from 'react';
import { IntlProvider, IntlProviderService } from '..';
import { render } from '@testing-library/react';

type IntlProviderReturnType = ReturnType<IntlProvider['fetchLocaleMessages']>;
type IntlProviderParameters = Parameters<IntlProvider['fetchLocaleMessages']>;

type IntlProviderServiceReturnType = ReturnType<
  (typeof IntlProviderService)['updateLocaleMessages']
>;
type IntlProviderServiceParameters = Parameters<
  (typeof IntlProviderService)['updateLocaleMessages']
>;

describe('IntlProvider', () => {
  let fetchLocaleMessagesSpy: jest.SpyInstance<
    IntlProviderReturnType,
    IntlProviderParameters
  >;
  let updateLocaleMessagesSpy: jest.SpyInstance<
    IntlProviderServiceReturnType,
    IntlProviderServiceParameters
  >;

  beforeEach(() => {
    jest.clearAllMocks();
    fetchLocaleMessagesSpy = jest.spyOn(
      IntlProvider.prototype,
      'fetchLocaleMessages'
    );
    updateLocaleMessagesSpy = jest.spyOn(
      IntlProviderService,
      'updateLocaleMessages'
    );
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('componentDidMount calls fetchLocaleMessages on mount', async () => {
    render(<IntlProvider>Test</IntlProvider>);

    expect(fetchLocaleMessagesSpy).toHaveBeenCalledTimes(1);
  });

  it('componentDidUpdate calls fetchLocaleMessages when the locale property change', async () => {
    const { rerender } = render(<IntlProvider locale="en">Test</IntlProvider>);
    expect(fetchLocaleMessagesSpy).toHaveBeenCalledTimes(1);
    expect(updateLocaleMessagesSpy).toHaveBeenCalledWith('en');

    rerender(<IntlProvider locale="pt">Test</IntlProvider>);

    expect(fetchLocaleMessagesSpy).toHaveBeenCalledTimes(2);
    expect(updateLocaleMessagesSpy).toHaveBeenCalledWith('pt');
  });

  it('componentDidUpdate not call fetchLocaleMessages when the locale property do not change', async () => {
    const { rerender } = render(<IntlProvider locale="en">Test</IntlProvider>);

    expect(fetchLocaleMessagesSpy).toHaveBeenCalledTimes(1);
    expect(updateLocaleMessagesSpy).toHaveBeenCalledWith('en');

    rerender(<IntlProvider locale="en">Test</IntlProvider>);

    expect(fetchLocaleMessagesSpy).toHaveBeenCalledTimes(1);
    expect(updateLocaleMessagesSpy).toHaveBeenCalledWith('en');
  });
});

[mrazauskas]

Since you mentioned that you use @types/jest, there are no changes in that case. This package is maintained outside of the jest repo.

Changes mentioned in the migration guide are only applicable for those importing from @jest/globals. I agree the migration guid could be more specific in this aspect, obviously.

[Stanzilla]

@jest/globals

Actually I think our setup is a bit mixed? It is a very large monorepo and there is a shared setup file that has this:

[mrazauskas]

For me it seems that in the sample you have posted above jest.SpyInstance is picked up from the global jest namespace. There is no import form @jest/globals and @types/jest ensures you have globals like jest defined.

• for @types/jest, there are no changes (yet, as fast far as I see they did not publish v30)
• if you import from @jest/globals, try using jest.Spied instead

[Stanzilla]

For me it seems that in the sample you have posted above jest.SpyInstance is picked up from the global jest namespace. There is no import form @jest/globals and @types/jest ensures you have globals like jest defined.

• for @types/jest, there are no changes (yet, as fast far as I see they did not publish v30)
• if you import from @jest/globals, try using jest.Spied instead

Okay but what will the migration look like once the new types package is out?

[mrazauskas]

Hard to say. @types/jest is managed in the DefinitelyTyped repo. I believe they should follow the behaviour of Jest, but helper types like Mocked or Spied are not actually the behaviour.

Perhaps it is worth opening a PR to @types/jest with similar changes like in #14621?

[mrazauskas]

@Stanzilla Thanks for asking the questions. The documentation can be improved, so I opened #15639.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.