jestのspyOnでmockする際に詰まった話

Transcript

1. jestのspyOnでmockする際に 詰まった話
2. 自己紹介
3. Riku Shimojima 株式会社HRBrain フロントエンド（React,TS） バックエンド(Go) エンジニア歴1年半 twitter: @Riku_0202_
4. ある日、CustomHooksのテストを書いていると、、、
5. なぜかテストが通らない、、、
6. なぜかテストが通らない、、、 例
7. なぜかテストが通らない、、、 例
8. refを渡したElementの 高さを取得し保持する CustomHook 例
9. 例 てすと
10. useRefのモックが上手くいってないっぽい？？
12. 調べてみた👀
13. jestのissueにめっちゃ書いてありました
14. 問題はこのimport方法にありました import * as React from "react"; import React from "react";
15. トランスパイル import { useRef } from "react" import * as React from "react" useRef React.useRef import React from "react" React.useRef
16. _react.useRef _react.useRef トランスパイル import { useRef } from "react" import * as React from "react" useRef React.useRef import React from "react" React.useRef _react["default"].useRef
17. ↑は _react["default"] をmockしている jest.spyOn(React, "useRef");
18. ↑は _react["default"] をmockしている jest.spyOn(React, "useRef"); 故に単一importしたuseRefは モックされない _react.useRef; _react["default"].useRef;
20. 成功！
21. [ 参考リンク ] Mock/Spy exported functions within a single module in Jest jest.spyOnで差し替わってなかった Jest spyOn() calls the actual function instead of the mocked
22. フロントエンドエンジニアを積極採用募集中です
23. フロントエンドエンジニアを積極採用募集中です @Riku_0202_
24. ありがとうございました！！ @Riku_0202_