したいこと
jestを使ってreactをテストしようとしているのですが、モジュールのmockがうまくいきません。
export defaultの関数の外でmock対象の関数を実行していることが原因みたいなのですが、元のコードを変えずにテストしたいです。
mockしたいモジュールはmaterial-uiのmakeStylesという関数です。
コード
テスト対象のコード
javascript
1import { makeStyles } from "@material-ui/core/styles"; 2const useStyles = makeStyles(theme => ({ 3 root: { 4 spacing: 8, 5 flexGrow: 1 6 } 7})); 8export default function Search(props) { 9 const classes = useStyles(); 10 return( 11 <div className={classes.root}>テスト</div> 12 ); 13}
テストコード
javascript
1import * as muiStyle from "@material-ui/core/styles"; 2import "jest"; 3import React from "react"; 4import { act } from "react-test-renderer"; 5import Search from "./Search"; 6jest.mock("@material-ui/core/styles"); 7muiStyle.makeStyles = jest.fn().mockReturnValue(() => {root:"dummy"}); 8 9test("serch", async () => { 10 let component; 11 await act(async () => { 12 component = create(<Search />); 13 }); 14 const tree = component.toJSON(); 15 expect(tree).toMatchSnapshot(); 16}
###出力されたエラー
TypeError: useStyles is not a functionと出ます。
useStylesにはundefindが入っているみたいです。
試したこと
テストコードの順番をこのように変えてみましたがうまくいきませんでした。
import Search from "./Search"; jest.mock("@material-ui/core/styles"); muiStyle.makeStyles = jest.fn().mockReturnValue(() => {root:"dummy"});
Search関数内でmakeStylesを呼び出すと問題なくmockされます。
何か良い解決策があれば、ご教授ください。
あなたの回答
tips
プレビュー