☰

useHistory フックの react-router-dom をモックすると、次のエラーが発生します - TS2698: スプレッド型はオブジェクト型からのみ作成できます 質問する

tag-icon • tag-icon reactjs typescript react-router jestjs react-hooks
useHistory フックの react-router-dom をモックすると、次のエラーが発生します - TS2698: スプレッド型はオブジェクト型からのみ作成できます 質問する

react-router-domテストケースの 1 つでモックを作成し、useHistoryフックがテストで機能するようにしようとしています。jest.mockモジュール全体をモックし、jest.requireActualモックしたくないその他のプロパティは保持するために、 を使用することにしました。

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

これは実際には、次の質問に対する評価の高い解決策の 1 つから派生したものです。jest で useHistory フックをモックするにはどうすればいいですか?

しかし、TypeScriptコンパイラは次の行で次のエラーをフラグ付けしています。...jest.requireActual('react-router-dom'),

TS2698: スプレッド タイプはオブジェクト タイプからのみ作成できます。

興味深いことに、この問題はjestとts-jestを最新バージョン（jest v26）にアップデートした後にのみ発生しました。jest 24.xxを使用していたときには、これらの問題は発生しませんでした。

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

最新の jest バージョンでこの問題を解決する方法を知っている人はいますか?

ベストアンサー1

jest.requireActualunknownスプレッドできないタイプを返します。

正しいタイプは次のとおりです。

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

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

簡単な修正方法は次のとおりですany。

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

この場合は型の安全性が損なわれないため、許容されます。

ES モジュールなのでreact-router-dom、これをモックするより正しい方法は次のとおりです。

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

おすすめ記事