typescript - スラッシュを含むモジュールをどのようにモックしますか？
標準的な npm プロジェクトのモックは簡単です。node_modules フォルダの隣に __mocks__ フォルダを作成し、パッケージ名をファイル名として設定して、その中にモックの内容を書きます。
例: /__mocks__/axios.ts
私が行き詰まっているのは、npmパッケージのインポートがこのようになっていることです: @auth0/auth0-react
このファイルの内容をどのようにモックできますか？@auth0/auth0-react.tsxという名前のファイルを作成してみましたが、Jestはモックされたファイルを認識していないようです。import { Auth0Provider } from '@auth0/auth0-react'; としてインポートし、console.log(Auth0Provider) を実行すると、標準の Jest.fn() 属性しか表示されません。
こちらはモックされたファイルの内容です
/* eslint-disable import/prefer-default-export */
export const Auth0Provider = (component: JSX.Element): JSX.Element => component;
このメソッドでは jest.fn() を使用しなかったので、console.log(Auth0Provider) が関数を含んでいることを示すことを期待しています。
私のテストコードでは、テストの前に jest.mock('@auth0/auth0-react') を使っています。何かアイデアはありますか？
回答 #1
私はkcarraによる別のStackOverflowの質問を通じて解決策を見つけました。
答えをまとめると、2つのポイントで答えます：
`__mocks__` ディレクトリは、テスト対象のファイルの近くに配置する必要があります。もしファイルが `/src/MyComponent` にある場合、モックフォルダのパスは `/src/__mocks__/` であるべきです。
__mocks__の下のフォルダ構造は、インポートで示されているパスを模倣する必要があります。私のシナリオでは、@auth0という名前のフォルダを作成し、そのフォルダ内にauth0-react.tsxというファイルを作成する必要があります。
私がテストとモックのファイルをどのように構成したかはこちらです。
- モック:
/src/__mocks__/@auth0/auth0-react.tsx - テスト:
/src/__tests__/MyComponent.tsx - 実際のコンポーネントファイル:
/src/MyComponent.tsx