どのpackageがimportされているか調べる方法
create-react-appで使われているテスト系ライブラリって何よ
いやまあ、公式ガイドか何かを見れば一発だとは思うのですが、ちょっとゼロから調べてみます。
create-react-appでテスト系のライブラリとして何が使われているのか調べてみます。
create-react-appで生成したアプリであればターミナルでnpm testでテストを実行出来ます。
npm testは、"test": "react-scripts test --env=jsdom"のエイリアスですね。
それでは、react-scriptsの中で何かライブラリが定義されているのか見てみます。
react-scriptsのpackage.jsonを見てると、テスト系ライブラリとしてjtestがあります。これっぽいですね。
GitHub - facebook/jest: 🃏 Delightful JavaScript Testing.
更に、package.jsonを何気なく眺めていると以下記述を発見。
"bin": {
"react-scripts": "./bin/react-scripts.js"
},
./bin/react-scripts.jsを見てみます。
これは、ターミナルでreact-scripts xxxが実行されたときに呼ばれるラッパーみたいなものですね。
react-scripts testが実行されたとき、./scripts/test.jsが呼ばれるようになっており、test.jsの中でjtestを実行していますね。
もうこれで、create-react-appは、jtestをテストライブラリとして使っているの確定。
今日は何もせず
orz
いや、今日はピーな事とかで色々あったのですよ。
Reactのベスプラが知りたい
特に、Container/Componentの関係について。
ViewHelper的な関係で、ComponentはあくまでもViewという役割、
ContainerはComponentに渡すデータの取得/加工といったHelperという役割。
この時、Componentはstateを持たない。
という理解です。
ただ、Component内でstateを持ちたい場合もあるはず。
チェックボックスON/OFF、ドロップダウンとか、とか。
その時、Containerまで上げていくのはいかがなものかな感があるのです。
このあたり、実践的なサンプルとか見れば分かるかなぁ…
今日はお休み
色々ありましたです。ハイ。
とりあえずこの猛暑はどうにかならんものかな。。。。
Reactでグラフ作るの巻
rechartsってやつを使ってとりあえず棒グラフを作っています。
X軸を表現するコンポーネントが<XAxis>ってやつなんですが、
歯抜けなデータだと全てのlabel(tick?)が表示されないことがあるっぽいです。
その時はとりあえず以下のようinterval={0}にしておくとよいです。
<XAxis dataKey="name" interval={0} />
