reactjs - Att mocka react-router-dom för useHistory-hooken orsakar följande fel - TS2698: Spridningstyper kan endast skapas från objekttyper

Jag försöker mocka react-router-dom i ett av mina testfall så att useHistory-hooken fungerar i mina tester. Jag bestämmer mig för att använda jest.mock för att mocka hela modulen, och jest.requireActual för att bevara de andra egenskaperna som jag kanske inte vill mocka.

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory: () => ({
    location: {
      pathname: '/list',
    },
  }),
}));

Detta är faktiskt hämtat från en av de högt rankade lösningarna på följande fråga: Hur man mockar useHistory-hooken i jest?

Men TypeScript-kompilatorn markerar följande fel på följande rad ...jest.requireActual('react-router-dom'),

TS2698: Spridningstyper kan endast skapas från objekttyper.

Intressant nog stöter jag bara på detta problem efter att ha uppdaterat jest och ts-jest till de senaste versionerna (jest v26). Jag stöter inte på några av dessa problem när jag använde jest 24.x.x.

"@types/jest": "^26.0.4",
"jest": "^26.1.0",
"ts-jest": "^26.1.1",

Vet någon hur man löser detta problem för de senaste versionerna av Jest?

Svar #1

jest.requireActual returnerar unknown-typ som inte kan spridas.

En korrekt typ är:

import * as ReactRouterDom from 'react-router-dom';

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom') as typeof ReactRouterDom,
  useHistory: ...,
}));

En snabb lösning är any:

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom') as any,
  useHistory: ...,
}));

Det är acceptabelt eftersom det inte påverkar typesäkerheten i detta fall.

Eftersom react-router-dom är ett ES-modul, är ett mer korrekt sätt att mocka det:

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom') as any,
  __esModule: true,
  useHistory: ...,
}));

Relaterade artiklar