React + Testing Library + Jestの覚書
最近、Zenn に全然(?)記事書けてないなぁっていうのと、フロントエンドのテスト大事やなぁと感じることが多かったので、React + Testing Library + Jest の覚書を雑に書くことにした (特定の用途で覚書まとめたら、この内容だったら Zenn にも出せるやんか、とかそんなことがあったわけでは断じてない) JavaScript のテストフレームワークである Jest について Create React App(以下:CRA)ではテストランナーに Jest を採用している https://create-react-app.dev/docs/running-tests CRA での Jest のコンフィグのベースは下記の実装を確認する https://github.com/facebook/create-react-app/blob/main/packages/react
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
React Testing Libraryにチャレンジします 1（現在進行形）
こんにちは。 最近YoutubeにてAmplifyの動画をあげているのでぜひ見てください。 して、 今回はこちらの動画を見ていて思ったわけです。 テストって大事だなと。 そんなこんなでReact Testing Libraryにチャレンジした記事になります。 感想文を書いているのでマサカリは歓迎します。 こういうところが間違っているなどの指摘の場合は根拠も添えていただけますとわかりやすいですが、 根拠はあなたが探してください、ただ私は間違っていることをしてきしたまでです。は精神的に疲れるのでやめてくださいね。 対象 駆け出しエンジニア 中級者や上級者はブラウザバックです。 Render.test まずはReactがレンダリングされた時にどの要素がレンダリングされるのかをチェックすることができるようです 一つずつ見ていくと 例えば次のようなjsのファイルがあったとします import Rea
JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
Vuex内のaxiosをモックしてテストする - istyle Tech Blog
こんにちは、アイスタイルのVue.jsマン（自称）ことkubotakです。 今回はVue.jsにおける、Vuexのactionsでaxiosによる非同期通信取得をしている場合のテストと、クライアントのテストに関して紹介したいと思います。 （若干私的な備忘録も兼ねてます） テストコードに関しての説明となるのでjestやaxiosについては割愛します。 前提条件 vue-cliにより作成したプロジェクト jestでのunit test ajax通信はaxiosで行なっている axiosクライアントをラップしたクライアントモジュールを用意する クライアントのテスト axiosクライアントをラップしたクライアントモジュールの実装としては以下のような感じです。 import axios from "axios"; export const client = axios.create({ baseUR
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
Vue.jsのテストをモダンにする - Qiita
はじめに 1年半前くらいに弊社のVue.jsプロジェクトのユニットテスト環境を「Karma + Mocha + power-assert」で作成し、現在までメンテナンスしながら使っていたが、「Jest + vue-test-utils」が非常に良さそうなので、環境を全て作り直すことにした 作り直したコードですが、弊社のコードは公開できないので、プライベートでメンテナンスしている以下のリポジトリで確認できる https://github.com/kurosame/vuejs-boilerplate Vue.jsとVuexとTypeScriptを使っている テスト対象 今回は以下をテスト対象とした Vuex Action Mutation Getter (State) ⇒ 初期値を設定する時に分岐などのロジックを入れた場合があれば書く Vue.js コンポーネント全て そもそもなぜテスト環境を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Ayc0/mock-match-media: Mock window.matchMedia for Node.JS environments (like tests or NextJS)