はじめまして、フロントエンドエンジニアをしている川上です。 業務では、主にサービス要件に沿ったフロントエンド開発を担当しています。 今回は、私自身初めての経験だったフロントエンドのテスト導入手順や、 導入するにあたって気をつけた点などをお話しできればと思います。 はじめに Vueコンポーネントのテストについて Jestの導入について Jestを利用したテスト おわりに はじめに マイクロアドには様々なプロダクトがありますが、私の担当しているUNIVERSEというプロダクトについては、 フロントエンドフレームワークにVue.jsを利用しています。 jp.vuejs.org テストの導入を行うにあたって、今後、現在利用しているVue2をVue3へ移行していくことを考えると*1 TypeScript*2でテストを書いていくのがいいということになりました。 また、TypeScriptのメリットでも
Here come the jesters… In this article we will be discussing Jest’s Snapshot test feature and how it can be used to help maintain consistent UI output while refactoring React components. For those unfamiliar with Jest, it is a powerful javascript testing library that was released by Facebook in 2014. Though the library was not designed to be used exclusively with React it has become the go to test
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? もう駄目だ。ついに React 以外のプロジェクトでも Jest 一択になってしまった。 もともと自分の選択するテストツールは、むかしは jasmine、いまは mocha + chai（ときどき power-assert） をベースに周辺ツールと連携させていて、React を使うようになってしばらくして Jest を入れるようになった。ここ5年くらいのフロントエンド界隈では標準の一種だと思う。 それがどうしてこんなに Jest びいきになったのか。 その1. 楽 とにかく楽だからだ。 Jest の売りはオール・イン・ワンとゼロ・コンフ
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
LAST UPDATE: June 24, 2017. Original writing: May 19, 2016. I have been using Jest since its beginnings. I won’t lie, the path has been painful: Things like updating from version 0.x.0 to version 0.y.0 (specially to version 0.4.0) was particularly terrible for my tests. Furthermore, I struggled myself more than once with the way Jest works and I even bothered the community with questions like 1, 2
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
昨日はUnitテストの設定方法からComponentのユニットテストまで説明しました。今日は、ロジックのテストを解説します。React Nativeでアプリを作る場合は、Fluxアーキテクチャを選ぶと思います。Reduxはその中でも秀逸であり、Testの方法もしっかりドキュメントされています。 アプリのロジックをReduxを用いてテストしていきます。実はここはReact Nativeに限った話ではないかもしれません。しかし、Objective-Cやswiftでしっかりロジックのテストを書くのは難しい（私のswiftスキルがないのが原因だと思いますが。。）ように感じます。個人的にはアプリに状態を持たせて、それをテストできるというReduxの真骨頂がここにあるような気がしています。 Testing store with dispatch Reduxのドキュメントではactionとreducer
概要 flux の store 部分のテストの書き方。 jest を使う。 入力は Action。結果は Store の状態と Change Listener が呼ばれることを確認。 localStorage のモック。 テスト対象 web/static/js/stores/AuthStore.js をテストします。 以下の機能を持っています。 LOG_IN アクションを受け取ると token を localStorage に保存し、Change Listener に通知する。 LOG_OUT アクションを受け取ると token を localStorage から削除し、Change Listener に通知する。 環境設定 elixir / phoenix の勉強用に作成したサンプル (tag qiita-jest-flux-store)を使って説明します。 jest-cli, reac
概要 Reactでユニットテストをしたく、コンポーネントのテストであれば以下の様な記事を参考にすればできそうだが、Fluxをつかったアプリで、ActionやDispatcherにロジックがある時には、それでは十分で無いと考えた。 React.js + Jest - Qiita 今回はReact+Reduxを使っているので、Action、Reducerを個別にテストする方針を考えた。テストフレームワークは、karma+jasmineを使用している。 Action テストするactionは以下の様なものを想定している。単純にAPIを叩いてresを得るというもの。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; functio
ReactJs has attained lot of momentum since its initial release in 2013, and became the best JavaScript library for developing rich UI interface. React also popularized different concepts like Virtual DOM, Uni-directional data flow and Componentization in the front-end community. As of today, React has more than 20,000 stars in Github repo, and actively maintained by the Facebook team. Update Feb 9
JestでReact.jsアプリケーションのテスト Jestとは facebookがgithub.comに出している テスティングフレームワーク。 JestでReact.jsアプリケーションのテストを書く ...と書くとざっくりしているが、 Jestのサイトで、tutoria/reactに、React.jsアプリケーションでの Jestを使ったサンプルが載っていた。 コードもgithub.com上に上がっている。 githubリポジトリに、コードをそのまま載せてみた。 Jestを使うためのセットアップ 前提条件 node.jsのバージョンは2014年12月現在stableのv0.10.xxであること という条件がある。 React.addons.TestUtils Jest単体はReact.js向けのテストフレームワークとしては書かれておらず、 VirtualDOMを使ったり、clickイ
今回はReact.jsとテストについて書きたいと思います。 React.jsとテスト React.jsのテストということはComponentに対してテストをすることになるので、DOMが絡んで来て辛そうだなと思うかと思いますがReact.jsはAddonとしてReact.addons.TestUtilsに便利な関数を提供してくれているのでそれを使うとテストが書きやすくなります。 DOMは必要？ React.jsのテストを書くとき、server-sideでも動くのでnodeの環境でテストを実行したくなりますが、実際にonClickイベントに反応して〜などのテストを書こうとするとやはりDOMが必要になってきます。 ちなみに、Prop渡してrenderToStaticMarkupを使ってその結果のHTMLを確認するようなテストであればnodeの環境で実行することは出来ます。 イベントのシュミレート
import ReactTestUtils from 'react-dom/test-utils'; // ES6 var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm Overview ReactTestUtils makes it easy to test React components in the testing framework of your choice. At Facebook we use Jest for painless JavaScript testing. Learn how to get started with Jest through the Jest website’s React Tutorial. Note: We recommend using React Te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
