TL;DR When you have Jest as your test runner, passing the --maxWorkers=50% option will make the tests faster in most cases. For watch mode, use --maxWorkers=25%, and for CI disable Jest workers with --runInBand. You can experiment with the percentage and fine-tune for your particular setup. // package.json { "scripts": { // standalone Jest "test": "jest --maxWorkers=50%", "test:watch": "jest --wat
Making your UI tests resilient to changeOctober 7th, 2019 — 6 min read You're a developer and you want to avoid shipping a broken login experience, so you're writing some tests to make sure you don't. Let's get a quick look at an example of such a form: const form = ( <form onSubmit={handleSubmit}> <div> <label htmlFor="username">Username</label> <input id="username" className="username-field" />
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
Jest の非同期コードのテストの書き方は大きく分けて3つある。 3つのテスト方法 done expect.assertions + return Promise expect.assertions + async/await 1. done テストを記述する関数の第一引数の done を使用し、テストが全て終了したら done() を呼ぶ。 Jest は done が呼ばれるまで待機する。 done が呼ばれなかった場合はテストは失敗する。 // コールバックが呼ばれることを期待するケース it('the data is peanut butter', done => { function callback(data) { expect(data).toBe('peanut butter') done() } fetchData(callback) })
I'm building my app with React Native and I do my unit tests with Jest and Enzyme. How can I test my <FlatList />'s renderItem() function? It returns a <ListItem /> from the React-Native-Elements library. Let me give you the example code: import { ListItem } from 'react-native-elements' export class MyList extends Component { const list = [ { name: 'Amy Farha', subtitle: 'Vice President' }, { name
During the reading, I’ll cover the next topics: Define the correct order of components’ testing based on project structureFind what to omit in test coverage (what not to test)Identify the necessity of Snapshot TestingDefine what to test in the component and in which orderProvide detailed custom code examplesThe article requires that the reader already has knowledge about Jest and Enzyme setup. Inf
Home React, Redux, and Redux Saga With Symfony 3 Testing JavaScript's Fetch with Jest - Happy Path Testing JavaScript's Fetch with Jest - Happy Path In this, and the next video, we are going to cover refactoring the API call logic, extracting out the generic request portion of code from the specific call to any given endpoint. By doing this, we can start re-using the chunk of code that sends the r
JavaScriptではコードを非同期に実行することがよくあります。 非同期的に動作するコードがある場合、Jestはテスト対象のコードがいつ完了したかを別のテストに進む前に知る必要があります。 Jestはこのことを処理する方法をいくつか持っています。 Promises テストからpromiseを返すと、Jestはそのpromiseがresolveされるまで待機します。 promiseがrejectされると、テストが失敗します。 例えば、fetchDataが'peanut butter'という文字列でresolveされるpromiseを返すとします。 以下のようにテストすることができます: test('the data is peanut butter', () => { return fetchData().then(data => { expect(data).toBe('peanut
その他にReactにenzymeを連携させるためのenzyme-adapter-react-16や、Jestのスナップショットを行うためのreact-test-renderer、Jestでenzyme-matchersを使用するためのjest-enzymeなどが状況により必要となります。 なお、create-react-appを使う場合は、デフォルトでJestが組み込まれており、特にBabelなどの設定を行う必要はありません。enzymeについては、別途インストールが必要です。 JestについてJestはテスティングフレームワークです。以下のような特徴があります。 JestはJasmine 2をベースに作られていて、JasmineのMatcherがそのまま使えます。Facebook製でReactのイメージが強いですが、他のフレームワークなどでも普通に使えます。Node.js上のjsdomで
はじめに React、便利ですね。 初めはJSXの独特の書き味にパンチを食らいましたが、慣れてくると各Componentを小さく作れるので設計がしやすいのと、データの流れが想像しやすいのは実際に自分で実装してみても感じるところでした。 ただ、いくらReactでComponent単位で管理していたとしても各Componentの処理の依存度が高く複雑に書かれてしまっていてはせっかくの恩恵を受けられません。 そこで今回はFormを対象にして、実装していく中で肥大化していったComponentをリファクタリングしながらユニットテストを整備していくことで、コードを解きほぐしていこうと思います。 対象バージョン react: 16.4.2 jest: 23.5.0 enzyme: 3.4.1 enzyme-adapter-react-16: 1.2.0 sinon: 6.1.5 事前準備 事前にユニッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
