React HooksのTest
React HooksのTest Code
React v18以降は@testing-library/reactを使う
それ以前の場合はreact-hooks-testing-libraryを使う
>#WIP
@testing-library/reactを使うのは良いが、docsのどこを見ればよいのかわからない #??
個別のAPI referrenceはあるが、小さな例とかがない
docsが整備されるまでは(?)、react-hooks-testing-libraryのdocsを読めばいい
1つの
test の中でexpectを何回も実行する感じになるのか test で囲うごとに、renderがresetされるtstest('should increment counter from custom initial value', () => {
const { result } = renderHook(() => useCounter(9000))
act(() => {
result.current.increment()
})
expect(result.current.count).toBe(9001)
})引数を変えて再renderingさせたいとき
tstest('should reset counter to updated initial value', () => {
const { result, rerender } = renderHook(({ initialValue }) => useCounter(initialValue), {
initialProps: { initialValue: 0 }
})
rerender({ initialValue: 10 })
act(() => {
result.current.reset()
})
expect(result.current.count).toBe(10)
})tstest('should clean up side effect', () => {
let id = 'first'
const { rerender } = renderHook(() => {
useEffect(() => {
sideEffect.start(id)
return () => {
sideEffect.stop(id) // this id will get the new value when the effect is cleaned up
}
}, [id])
})
id = 'second'
rerender()
expect(sideEffect.get('first')).toBe(false)
expect(sideEffect.get('second')).toBe(true)
})hooks Aが、Hook Bに依存している時に、Bのspyを作ってAをテストしたい
RenderResult
非同期処理
waitForNextUpdateとかを使う
renderHookの中にある
Error
import { renderHook } from '@testing-library/react-hooks/dom'; とすれば直るproject内でこの書き方してるところ全てにこの修正を施すと直った
import文に
/dom を加える異常系のテストを書きたい