Make Your Jest Tests up to 20% Faster by Changing a Single Setting
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 change
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" />
Storybookとreg-suitで気軽にはじめるVisual Regression Testing - wadackel.me
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
【Jest】非同期コードのテストの3つの書き方 - Qiita
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) })
How to test that the renderItem function returns a <ListItem />?
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
Testing React Components with Jest and Enzyme- In Depth
How to define the correct order of component testing in shared the directory: Always follow the rule from simple to complex. Analyze each directory and define which components are independent - namely, their rendering doesn’t depend on the other components; they are self-completed and can be used separately as a single unit. From the structure above, it is input directory in forms folder. It conta
Testing JavaScript's Fetch with Jest - Happy Path
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
非同期コードのテスト · Jest
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
Jest + enzymeで行うReactのユニットテスト（単体テスト）について
その他に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の凝り固まったFormをユニットテストを整備しながら解きほぐしていく - Qiita
はじめに 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ページを開く
Unit tests in React-Native
Testing with Jest: 15 Awesome Tips and Tricks
Here’s How You Unit Test TextInput With React Native
CI環境ではjestのオプションに--ciを付ける - Qiita
jest内でassertを使う - Qiita
Using Jest, how can I check that an argument to a mocked function is a function?
Airbnb Engineering & Data Science
How to unit test a style of a React Component using Jest.js?
GitHub - jefflau/jest-fetch-mock: Jest mock for fetch