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