Comments (4)
Reactのtest方法(公式)
コンポーネントのテスト方法
大きく分けて2つ:
- コンポーネントツリーのレンダー
- シンプルなテスト環境で行い、その結果を検証 - アプリケーション全体の動作
- ブラウザ同等の環境で検証する(end2endテスト)
どちらかというと前者にフォーカスしたテストを紹介する
トレードオフ
- 実行速度 vs 環境の現実度
- モックの粒度
推奨ツール
リンク
公式:https://ja.reactjs.org/docs/testing.html
from ifcjs-react.
参考になりそうなリンク一覧
- https://zenn.dev/iamtillmans/articles/171f41fbd03c89
- https://reffect.co.jp/react/react-test
- https://ja.reactjs.org/docs/testing-recipes.html
- https://ja.reactjs.org/docs/testing-environments.html
from ifcjs-react.
環境構築
yarn add --dev jest
yarn add --dev @types/jest
yarn add --dev ts-jest
@testing-library/react
React コンポーネントテストのためのユーティリティライブラリーです。
@testing-library/jest-dom
Jest のマッチャーを拡張するユーティリティライブラリーです。
@testing-library/user-event
実際のイベントをシミュレートするためのユーティリティライブラリーです。
@testing-library/react-hooks
React が提供する Hooks テストのためのユーティリティライブラリーです。
yarn add --dev @testing-library/react
yarn add --dev @testing-library/jest-dom
yarn add --dev @testing-library/user-event
yarn add --dev @testing-library/react-hooks
yarn add --dev jest-environment-jsdom
from ifcjs-react.
ts-jestで外部ライブラリがimportできない
-> babelを使う
yarn add --dev babel-jest @babel/core @babel/preset-env
yarn add --dev @babel/preset-typescript
- babel.config.jsを作成する
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
'@babel/preset-typescript',
],
};
参考
- https://media-massage.net/blog/ts-jest%E3%81%8C%E5%A4%96%E9%83%A8%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92import%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6%E6%96%B9/
- https://jestjs.io/ja/docs/getting-started#babel-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B
from ifcjs-react.
Related Issues (20)
- deploy.ymlを書く
- やること HOT 1
- 画面を整える HOT 1
- ヘルパーを表示する HOT 1
- 建築確認のボタンを設置 HOT 2
- APIを繋ぐことへの検討 HOT 38
- Dockerでの開発環境の整備 HOT 2
- canvasが複製される HOT 3
- iconがviteのものになっている
- original viewとrevit viewをつくる
- keymapもできたらおもしろそう
- Helper/Helper.tsxをDialog/Dialog.tsxに変えた方が良さそう HOT 1
- 選択するチェックボックスに対して、全て選択、選択解除を行えるようにする HOT 1
- Goolgeアナリティクスを導入する
- IFC-APIに変更する HOT 1
- 本番環境でもstrictModeがonになっている HOT 5
- Psetをjson形式でとってくることができるっぽい HOT 1
- globalIDからモデル上に色をつける HOT 1
- questions on GIS and real-world scaling HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ifcjs-react.