Reactでテスト駆動開発をする
nozomiこの記事がjestとreact-testing-libraryの概要をしるには良かった
jestとreact-testing-libraryのペアが今は人気そう
色々記事を読んでは見たが、結局手を動かさないと分からなそうなので、良さげなチュートリアルを片っ端からやっていくっていうことをしようかな
具体的にやりたいこととしては
- コンポーネントが内の関数が正しく動くかのテスト
- 通信を使ったCRUD処理のテスト
ができたら実践で導入していくことができそう
nozomiYouTubeのvideoIDが不正です
↑mswも使っているから良さそう
これらをやってみて、jestと、react-testing-libraryの使いかたを学ぶ
nozomi通信を使ったCRUD処理のテスト
これをするにはmswっていうのを使うのが良さそう
ただ、まだ完璧なテストというわけではなさそう
mockを作った場合データ構造が変わるたびにmockも一緒に修正しないといけないっていうのが結構なデメリットになるのでは？とか思ったけど、どうなんだろう？
これも実際に手を動かしてみないと見えてこないこといっぱいありそう
nozomi
やってみたけど思ったよりもハンズオンじゃなくて読んだだけで終わってしまった。。
とりあえず、mockのやり方だけ調べて、それ以外は実践で学んでいこうかな
nozomireact + graphqlのプロジェクトでテストを導入してみる
MockedProviderを使用して、
MemoryRouterオブジェクトを使う
MemoryRouter works when you don't need access to the history object itself in the test, but just need the components to be able to render and navigate.
nozomiTypeError: window.matchMedia is not a function
これをbeforeEachメソッドの中身に書けば一応テストは通った
でも、毎回書くのがめんどくさいから工夫する必要あり
jest.setup.tsに書いてみたがテストが通らなかった
nozomivitestを試してみる
happy-domを使ってみる
tsconfig.node.json の修正が必要だった(修正するファイルあってる？)
nozomiJestでESMのパッケージを読み込んだときにエラーが発生する
Details:
/client/node_modules/antd/es/tooltip/style/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import '../../style/default.less';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (node_modules/@ant-design/pro-utils/lib/components/LabelIconTip/index.js:12:1)
package.jsonにjestの設定を書くことで解決？
nozomiuseHref() may be used only in the context of a <Router> component.
it(‘renders Menu component’, () => {
render(<Menu />, {wrapper: BrowserRouter});
});
上記のように書くことで解決
nozomiTypeError: window.matchMedia is not a function
Object.defineProperty(window, 'matchMedia', {
value: () => ({
matches: false,
addListener: jest.fn(),
removeListener: jest.fn()
})
})
テストカバレッジについて
この二個読めばだいたい分かる
nozomi絶対パスが読み込まれない場合の対処法