React-jest / enzymeを使用したコントローラーコンポーネントのテスト

debugcn 投稿 Dev

クステミット

この特定の「コンポーネント」をテストする方法がわからないため、私は少し行き詰まっています。つまり、基本的に、トップレベルのコンポーネントであるコントローラーコンポーネントがあります。小道具を取り入れず、ルートコンポーネントによってレンダリングされます。コントローラコンポーネントにはいくつかの関数があり、そのうちのいくつかは子コンポーネントに渡され、イベントハンドラによってトリガーされます。

さらに、コントローラーコンポーネントは、グローバルウィンドウオブジェクトにアタッチされたAPIを使用します。APIはコールバック関数を取り込んでおり、メソッドが実行された後、APIで特定のメソッドを呼び出すと呼び出されます。今のところ、コントローラーのテスト方法がわかりません。すべての子コンポーネントをテストし、すべてが機能することを確認しましたが、コントローラーコンポーネント内のこれらの関数の一部は、実際に機能することをテストするために重要です。

const MyController = () => {
const [api, setApi] = useState(null)

useEffect(() => {
const globalApi = window.globalApi
setApi(globalApi)
init()
}, [])

function callBack(e) {
    console.log(e)
}

function init() {
        api.init(callBack)
}

function close() {
    api.close()
}

return (
    <MyComponent 
    close={close}
    />
)

}

ジョーロイド

APIをモックして、呼び出されたかどうかを確認します

グローバルからのAPI呼び出しをスパイできます（コードを正しく読んだ場合）。次に、それをモック実装できます。

const apiCall = jest.spyOn(global.globalApi, 'init').mockImplementation(jest.fn);
expect(apiCall).toHaveBeenCalled();

実行できるテストがいくつかあります。呼び出された回数を確認してください。呼び出された引数を確認してください。

注意

globalスパイでの使用。globalウィンドウを指します。

追加のテスト

これらのテスト以外に、レンダリングが常に機能していることを確認するために、浅いレンダリングのスナップショットを作成することをお勧めします。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事