Atomic Designでのテストを考える【初級】 - Qiita
概要 初Atomic Designを導入して開発をしてて、どこにどうやってテスト書けばいいんだっけ？ という旨の備忘録です。 仕様言語とかツールとか TypeScript React+Redux redux-saga Jest AtomicDesign ※Atomic Designの説明はしません（Atomic Designの説明はこちらが分かりやすいです） ※超初歩&限定的な内容な気がするので、書いてないメソッドやパターンについては適宜調べていただけると嬉しいです 概要 Jestを使います。 やること インタラクションテスト ロジックテスト テスト対象 AtomicDesignにより分類された各コンポーネント 本記事での例題はatomsのButton インタラクションテストする Reducer ロジックテストする 対象外 middleware 別途書く予定です Jestって？ 公式HP
getComputedStyle()がJestで期待通りに動作しない件について - Qiita
import React from 'react'; class App extends React.Component { getWidthFromDiv() { const computedStyle = window.getComputedStyle(this.refDiv); const widthInString = computedStyle.getPropertyValue('width'); const widthInInt = parseInt(widthInString); console.log("div.width:", widthInInt); console.log("window.getComputedStyle(div):", computedStyle); return widthInInt; } getRFromCircle() { const comp
Vue.js+Vuexで作成したカウンターアプリのユニットテストを作成する - Qiita
概要 Vue.js+Vuexを利用したカウンターアプリのテストクラスを作成します。テストツールはJestを使用。 この記事では、カウンターアプリのテストとして適切であるかという点よりも、Vue.js+Vuexのテストのサンプルとなるように意識して書いています。 これからテストを書こうと思っている方の参考になれば幸いです。 テスト対象 今回のテストの対象となるコンポーネントとカウンターモジュールです。 Counterコンポーネント カウントされる数値とincrement!と decrement!ボタンが表示されています。 <template> <div> <p>{{ counter }}</p> <button @click="increment">increment!</button> <button @click="decrement">decrement!</button> </div
Reactで一人TDD修行 - Qiita
Reactで一人TDD修行したので紹介 TDDとは TDD(Test Driven Development:テスト駆動開発)は、実装を進めるより先にテストコードを書くことです。はじめにテストを書き、そのテストを実行し失敗させます。その後、目的部分のコードを書き、テストを成功する形にします。次にテストが通るままでリファクタリングを行っていきます。 TDDでは、この失敗(Red) -> 成功(Greed) -> リファクタリング(Refactor)を繰り返して、少しずつ作っていきます(一気に複数の機能は実装しない)。 Red TDDのスタート地点の状態。テストが、失敗に終わる・コンパイルエラー(プロダクトコードが無い初期状態に限る)になる状態。書いたテストに対して、想定通りにエラーになることを確認。このとき、プロダクトコードがなくてもテストのみに注力。 Greed Redで失敗しているテストを
Babel 6 + TS 環境に Stylelint を雑に入れると Jest が通らない - Qiita
先日 Babel の v7.0.0 がついに 正式リリース されましたが、今自分がやっているプロジェクトでは訳あってもう少し 6 系を使う予定です。 そんな折、軽率に node_modules ディレクトリを削除して作り直したら Jest が通らなくなってしまい困ったので、おおまかな原因と解決方法をメモします。 前提 JavaScript と TypeScript で開発をしている JS のトランスパイルには Babel 6 を使っている Stylelint も使っている Jest も使っている ts-jest@23.1.4 を使っている 起きたこと Jest が以下のようなエラーを吐くようになり、 TypeScript のテストをパス出来なくなってしまった。 FAIL path/to/test.spec.ts ● Test suite failed to run TypeError: C
Jestのマニュアルモックのドキュメントの和訳 - Qiita
Jestのマニュアルモックのドキュメントの和訳 趣味プロダクトでfsのモッキングをする必要が出てきたので https://jestjs.io/docs/en/manual-mocks の和訳をしました。英語は苦手なのでおかしな点が間違いなくあります。お気づきの方は編集リクエストをくれると助かります。 マニュアルモックはモックデータを返す機能をスタブするために使用します。例えば、ウェブサイトやデータベースのような外部リソースにアクセスする代わりに、偽データを使えるマニュアルモックがほしいと考えるでしょう。これによりテストは高速で信頼性の高いものになります。 ユーザーモジュールのモック マニュアルモックはモジュールディレクトリ直下の__mocks__/サブディレクトリにモックモジュールを作成することで定義します。例えばmodelsディレクトリにuserと呼ばれるモジュールのモックを作成するには
ReactJSとReduxの単体テストを'きちん'と書く - Qiita
React ComponentとRedux（action、reducer）のテスト ReactのComponent周りとReduxのaction周りのCIテストを行いたいと思ったので Jest+Enzymeで単体テストを書いてみました。 JestはFacebookが開発しているReactJS単体テスト用のライブラリです。 単体テストに加え、Reactのレンダリング結果をスナップショットとして保存することもできるため、 レンダリングの差分テストを行うこともできます。 EnzymeはAirbnbが開発しているReactのUnitテスト用ライブラリです。 propsにパラメータを渡したり、stateの変更を行ったりできます。 ReactJSを実践で使う時は Redux、 Matarial-UI、 redux-formを組み合わせることが多いと思います。 今回はMatarial-UI、redux-
Vue.jsのテストでコンポーネントをいい感じにwrapする方法 - Qiita
Vue-test-utilsのshallowMountとmountの違いについて この記事では Vue-test-utils の shallowMount と mount の違いについてをメインに記事にしていきます。また shallowMount + stubs についても書いていきたいと思います。 Component.methods とコンポーネントから直接 methods を呼び出す方法もあるのでよかったら見ていってください。 mount shallowMount shallowMount + stubs TodoContainer.methods このあたりでを書いていきたいと思います。 個人的には「Vue-test-utils」には、Vue.jsのコンポーネントとかをいい感じにwrapしてくれて、jestとかのテストランナーに乗せれるようにしてくれるいい感じのヤツという認識がありま
Alexa スキルを Serverless + Typescriptで開発する - Qiita
はじめに 自分もAlexaスキルを作ってみようとちょっといじってみた。 Alexaスキルのバックエンドには AWS Lambda を Node.js ランタイムで利用するのが手っ取り早い。 どうせなら、この機会に Typescript も使ってみようと思って Typescript と VSCode にも入門した。 また、Lambdaのデプロイ等の操作には今の所、 AWS SAM よりも 手間が少ないと感じる Serverless Framework を利用している。 Serverless Framework にはGithubなどで公開されている既存のアプリケーションを元にアプリケーションの雛形を作る機能(serverless install)があるので、ベースの部分をテンプレートとして公開してみた。 HeRoMo/serverless-aws-alexa-ts READMEの日本語版がわり
JS のソースコードに TS を取り入れたおはなし - Qiita
既存プロジェクトの JavaScript アプリケーションのソースコードに TypeScript を含め始めました。 その際やったことや参考にした記事などをメモします。 前提 環境 OS: macOS エディタ: VSCode TypeScript: 2.9.2 プロジェクトはこれまで ES2015+ で開発をしてる。 Webpack@3.x (laravel-mix) + Babel 既存のコードベースを TypeScript に置き換えることはしない。 たいへんなので・・・ TypeScript を触るのは初めて。 TypeScript の Linter については今回は考慮しない。 達成したこと TS での開発ができるようになった。 TS in JS ができた。 JS のコード内で import SomeTsFile from './some-ts-file' みたいな事ができた。
テストドリブンなAlexaスキルの開発
はじめに Alexaスキルを実装するときにもテストしながら開発したい。 でも、実機で声を出しながら実装するのは流石に効率が悪い。 Alexaシミュレータを使うのも繰り返していると辛くなってくる。 コードを変更するたびに Lambda関数をデプロイするのも辛いし、Alexaシミュレータに発話を入力するのも面倒。 なにより、エラーになったときに発生箇所がわかりにくく、デバッグログを仕込んではCloudWatchLogsで確認するのが辛い。 ローカルでテストしながら開発できないものか。。。 ということで Jest + virtual-alexa でAlexaスキルをテストする方法を紹介する。 開発環境 最初に私の開発環境について、記述する。 AlexaスキルのバックエンドはLambdaを利用している。ランタイムはNode8.10。ローカルのテストにおいてもNode8.10を利用している。 Typ
restify + TypeScript + Jestの開発環境をセットアップしてみる - Qiita
はじめに 最近はTypeScript+ExpressでWeb APIサーバーぼちぼちやってるんだけど、restifyなるExpress拡張がなんかいい感じっぽいので今回はrestify + TypeScriptでRest API Serverを開発してみることにした。テストは最近気に入ってるJestのTypeScript用 ts-jest を使う。 Get started Express + TypeScript する が大変参考になった。restifyとexpressを読み替えればいい感じの Webpack なトランスパイル環境が整えられる。感謝。 以下、コマンドと設定を垂れ流し。 モジュールをインストールする globalに TypeScriptやWebpackが入ってない場合は入れておく
Vue.js + Jest でnpm run unit をするとSecurityError: localStorage is not available for opaque originsが発生する - Qiita
Vue.js + Jest でnpm run unit をするとSecurityError: localStorage is not available for opaque originsが発生するVue.jsJest Vue.jsのテストをやろうかと思って、とりあえず vue-cli で自動生成される HelloWorld.vue のテスト(npm run unit)を実行したら以下のエラーが発生したので、その対処法を残す。 見てみると、 SecurityError: localStorage is not available for opaque origins が発生している。 ググってみると、jest.config.jsに以下のパラメータを追加すれば良いとのこと。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptとioredisのコードをJestでテストしたらコンストラクタじゃないと言われた件 - Qiita
Jestを使ったReact + AtomicDesignユニットテスト【初級】
WebStorm のテスト開発を Live Template でちゃっちゃか書く - Qiita
next の引数指定で saga の call の戻り値を差し替えてテストを進める - Qiita
Vue / Vuetify / Jest での開発環境構築 - Qiita
jestで"SecurityError: localStorage is not available for opaque origins"と言われてテストがコケる - Qiita
Vue-cli で作ったプロジェクトの Jest で開発用 API のテストをする - Qiita
