From cef06a88b8ffd0e01b03b62434b6f9df3941e738 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Wed, 28 Mar 2018 17:31:59 +0400 Subject: [PATCH 1/9] added waitForExpect with test --- .all-contributorsrc | 10 +++++++++ README.md | 4 ++-- package.json | 4 +++- src/__tests__/end-to-end.js | 42 +++++++++++++++++++++++++++++++++++++ src/index.js | 3 ++- 5 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 src/__tests__/end-to-end.js diff --git a/.all-contributorsrc b/.all-contributorsrc index 1dc8d820..b5d27f68 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -85,6 +85,16 @@ "contributions": [ "doc" ] + }, + { + "login": "lgandecki", + "name": "ลukasz Gandecki", + "avatar_url": "https://avatars1.githubusercontent.com/u/4002543?v=4", + "profile": "http://team.thebrain.pro", + "contributions": [ + "code", + "test" + ] } ] } diff --git a/README.md b/README.md index cfe56d0f..28a3cb4c 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ [![downloads][downloads-badge]][npmtrends] [![MIT License][license-badge]][license] -[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors) [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc] @@ -564,7 +564,7 @@ Thanks goes to these people ([emoji key][emojis]): | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | -| [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | +| [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
ลukasz Gandecki](http://team.thebrain.pro)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") | diff --git a/package.json b/package.json index 06c161a7..7d2e8792 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,9 @@ "keywords": [], "author": "Kent C. Dodds (http://kentcdodds.com/)", "license": "MIT", - "dependencies": {}, + "dependencies": { + "wait-for-expect": "^0.1.0" + }, "devDependencies": { "@types/react-dom": "^16.0.4", "axios": "^0.18.0", diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js new file mode 100644 index 00000000..0785a416 --- /dev/null +++ b/src/__tests__/end-to-end.js @@ -0,0 +1,42 @@ +import React from 'react' +import {render, waitForExpect} from '../' + +const fetchAMessage = () => + new Promise(resolve => { + // we are using random timeout here to simulate a real-time example + // of an async operation calling a callback at a non-deterministic time + const randomTimeout = Math.floor(Math.random() * 100) + setTimeout(() => { + resolve({returnedMessage: 'Hello World'}) + }, randomTimeout) + }) + +class ComponentWithLoader extends React.Component { + state = {loading: true} + async componentDidMount() { + const data = await fetchAMessage() + this.setState({data, loading: false}) // eslint-disable-line + } + render() { + if (this.state.loading) { + return
Loading...
+ } else { + return ( +
+ Loaded this message: {this.state.data.returnedMessage}! +
+ ) + } + } +} + +test('it waits for the data to be loaded', async () => { + const {queryByText, queryByTestId} = render() + + expect(queryByText('Loading...')).toBeTruthy() + + await waitForExpect(() => { + expect(queryByText('Loading...')).toBeNull() + expect(queryByTestId('message').textContent).toMatch(/Hello World/) + }) +}) diff --git a/src/index.js b/src/index.js index fd46ac9e..1fd4a9a9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import ReactDOM from 'react-dom' import {Simulate} from 'react-dom/test-utils' +import waitForExpect from 'wait-for-expect' import * as queries from './queries' function render(ui, {container = document.createElement('div')} = {}) { @@ -24,4 +25,4 @@ function flushPromises() { return new Promise(resolve => setImmediate(resolve)) } -export {render, flushPromises, Simulate} +export {render, flushPromises, Simulate, waitForExpect} From e53d137244bef2f598ea57004aa0541ef4dde2e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 17:00:44 +0400 Subject: [PATCH 2/9] added typescript and simplified version of the waitForExpect, used and exports its typings --- package.json | 2 +- typings/index.d.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 7d2e8792..99242db7 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "author": "Kent C. Dodds (http://kentcdodds.com/)", "license": "MIT", "dependencies": { - "wait-for-expect": "^0.1.0" + "wait-for-expect": "0.4.0" }, "devDependencies": { "@types/react-dom": "^16.0.4", diff --git a/typings/index.d.ts b/typings/index.d.ts index 55c9963c..153836db 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -1,4 +1,5 @@ import {Simulate as ReactSimulate} from 'react-dom/test-utils' +import waitForExpect from 'wait-for-expect' interface RenderResult { container: HTMLDivElement @@ -21,3 +22,5 @@ export function render( export function flushPromises(): Promise export const Simulate: typeof ReactSimulate + +export function waitForExpect(): typeof waitForExpect From dc7e692d2f1b414825e43bace702310494188f0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 17:53:32 +0400 Subject: [PATCH 3/9] added initial notes about waitForExpect --- README.md | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3b5e5f7d..875c0eba 100644 --- a/README.md +++ b/README.md @@ -291,6 +291,14 @@ expect(getByTestId('count-value')).not.toHaveTextContent('21') // ... ``` +### Other + +## `waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>;` + +When in need to wait for non-deterministic periods of time you can use waitForExpect, +to wait for your expectations to pass. Take a look at [`Is there a different way for waiting for things to happen?`](#waitForExceptMine) part of the FAQ, +or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) + ## `TextMatch` Several APIs accept a `TextMatch` which can be a `string`, `regex` or a @@ -595,6 +603,35 @@ for promises that are not already resolved by the time you attempt to flush them +
+ +Is there a different way for waiting for things to happen? For example for end to end or contract tests? +Definitely! There is an abstraction called `waitForExpect` that will keep +calling your expectations until a timeout or the expectation passes - whatever happens first. + +Please take a look at this example (taken from [`here`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/end-to-end.js): +```javascript +import {render, waitForExpect} from 'react-testing-library' +test('it waits for the data to be loaded', async () => { + const {queryByText, queryByTestId} = render() + + // Initially the loader shows + expect(queryByText('Loading...')).toBeTruthy() + + // This will pass when the state of the component changes once the data is available + // the loader will disappear, and the data will be shown + await waitForExpect(() => { + expect(queryByText('Loading...')).toBeNull() + expect(queryByTestId('message').textContent).toMatch(/Hello World/) + }) +}) +``` + + For consistency and making your tests easier to understand, you can use it instead of flushPromises. + +
+ + ## Other Solutions In preparing this project, @@ -632,12 +669,10 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): - | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | -| [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
ลukasz Gandecki](http://team.thebrain.pro)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") | - +| [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
ลukasz Gandecki](http://team.thebrain.pro)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | This project follows the [all-contributors][all-contributors] specification. From 1f15dbc026cd93c05d11854e073cb41836bfc828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 17:56:50 +0400 Subject: [PATCH 4/9] fixed styling --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 875c0eba..8d17143e 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,7 @@ facilitate testing implementation details). Read more about this in * [Custom Jest Matchers](#custom-jest-matchers) * [`toBeInTheDOM`](#tobeinthedom) * [`toHaveTextContent`](#tohavetextcontent) +* [Other](#other) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) * [Examples](#examples) @@ -291,12 +292,12 @@ expect(getByTestId('count-value')).not.toHaveTextContent('21') // ... ``` -### Other +## Other -## `waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>;` +#### `waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>;` When in need to wait for non-deterministic periods of time you can use waitForExpect, -to wait for your expectations to pass. Take a look at [`Is there a different way for waiting for things to happen?`](#waitForExceptMine) part of the FAQ, +to wait for your expectations to pass. Take a look at [`Is there a different way for waiting for things to happen?`](#waitForExcept) part of the FAQ, or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) ## `TextMatch` @@ -605,11 +606,12 @@ for promises that are not already resolved by the time you attempt to flush them
-Is there a different way for waiting for things to happen? For example for end to end or contract tests? +Is there a different way for waiting for things to happen? For example for end to end or contract tests? Definitely! There is an abstraction called `waitForExpect` that will keep calling your expectations until a timeout or the expectation passes - whatever happens first. Please take a look at this example (taken from [`here`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/end-to-end.js): + ```javascript import {render, waitForExpect} from 'react-testing-library' test('it waits for the data to be loaded', async () => { @@ -627,11 +629,10 @@ test('it waits for the data to be loaded', async () => { }) ``` - For consistency and making your tests easier to understand, you can use it instead of flushPromises. +For consistency and making your tests easier to understand, you can use it instead of flushPromises.
- ## Other Solutions In preparing this project, @@ -669,10 +670,12 @@ light-weight, simple, and understandable. Thanks goes to these people ([emoji key][emojis]): + | [
Kent C. Dodds](https://kentcdodds.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [๐Ÿš‡](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [
Ryan Castner](http://audiolion.github.io)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
Paweล‚ Mikoล‚ajczyk](https://github.com/Miklet)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ร‘รกรฑez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[๐Ÿ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [
Justin Hall](https://github.com/wKovacs64)
[๐Ÿ“ฆ](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Anto Aravinth](https://github.com/antoaravinth)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
ลukasz Gandecki](http://team.thebrain.pro)
[๐Ÿ’ป](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [โš ๏ธ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [๐Ÿ“–](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | + This project follows the [all-contributors][all-contributors] specification. From 91b241a81db288811df934a4e4e613eaba91cae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 18:00:08 +0400 Subject: [PATCH 5/9] minor stylistic change --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8d17143e..b9ed8b0f 100644 --- a/README.md +++ b/README.md @@ -297,7 +297,7 @@ expect(getByTestId('count-value')).not.toHaveTextContent('21') #### `waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>;` When in need to wait for non-deterministic periods of time you can use waitForExpect, -to wait for your expectations to pass. Take a look at [`Is there a different way for waiting for things to happen?`](#waitForExcept) part of the FAQ, +to wait for your expectations to pass. Take a look at [`Is there a different way to wait for things to happen?`](#waitForExcept) part of the FAQ, or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) ## `TextMatch` @@ -606,11 +606,11 @@ for promises that are not already resolved by the time you attempt to flush them
-Is there a different way for waiting for things to happen? For example for end to end or contract tests? +Is there a different way to wait for things to happen? For example for end to end or contract tests? Definitely! There is an abstraction called `waitForExpect` that will keep calling your expectations until a timeout or the expectation passes - whatever happens first. -Please take a look at this example (taken from [`here`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/end-to-end.js): +Please take a look at this example (taken from [`here`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/end-to-end.js)): ```javascript import {render, waitForExpect} from 'react-testing-library' From 0c046abd33fefd57625fce58d5ecf3bfab39675d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 19:23:14 +0400 Subject: [PATCH 6/9] updated tests to remove the nesting --- src/__tests__/end-to-end.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js index 0785a416..435f4a6e 100644 --- a/src/__tests__/end-to-end.js +++ b/src/__tests__/end-to-end.js @@ -35,8 +35,6 @@ test('it waits for the data to be loaded', async () => { expect(queryByText('Loading...')).toBeTruthy() - await waitForExpect(() => { - expect(queryByText('Loading...')).toBeNull() - expect(queryByTestId('message').textContent).toMatch(/Hello World/) - }) + await waitForExpect(() => expect(queryByText('Loading...')).toBeNull()) + expect(queryByTestId('message').textContent).toMatch(/Hello World/) }) From 94faf4b74a8b71b6a3005e9462e0a62bd3b5bdf5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 19:23:53 +0400 Subject: [PATCH 7/9] updated readme --- README.md | 47 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index b9ed8b0f..4c4f2c2c 100644 --- a/README.md +++ b/README.md @@ -78,11 +78,11 @@ facilitate testing implementation details). Read more about this in * [Usage](#usage) * [`Simulate`](#simulate) * [`flushPromises`](#flushpromises) + * [`waitForExpect`](#waitforexpect) * [`render`](#render) * [Custom Jest Matchers](#custom-jest-matchers) * [`toBeInTheDOM`](#tobeinthedom) * [`toHaveTextContent`](#tohavetextcontent) -* [Other](#other) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) * [Examples](#examples) @@ -154,6 +154,32 @@ you make your test function an `async` function and use See an example in the section about `render` below. +### `waitForExpect` + +Defined as: ```javascript +waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>; + +```` +When in need to wait for non-deterministic periods of time you can use waitForExpect, +to wait for your expectations to pass. Take a look at [`Is there a different way to wait for things to happen?`](#waitForExpect) part of the FAQ, +or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) + +```javascript +... +await waitForExpect(() => expect(queryByLabelText('username')).not.toBeNull()) +getByLabelText('username').value = 'chucknorris' +... +```` + +Another advantage of waitForExpect in comparison to flushPromises, is that +flushPromises will not flush promises that have not been queued up already, +for example, if they will queue up as a consequence of the initial promises. +In consequence of that, you might have to call flushPromises multiple times to get your components +to your desired state. + +This can happen for example, when you integration test your apollo-connected react components +that go a couple level deep, with queries fired up in consequent components. + ### `render` In the example above, the `render` method returns an object that has a few @@ -292,14 +318,6 @@ expect(getByTestId('count-value')).not.toHaveTextContent('21') // ... ``` -## Other - -#### `waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>;` - -When in need to wait for non-deterministic periods of time you can use waitForExpect, -to wait for your expectations to pass. Take a look at [`Is there a different way to wait for things to happen?`](#waitForExcept) part of the FAQ, -or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) - ## `TextMatch` Several APIs accept a `TextMatch` which can be a `string`, `regex` or a @@ -602,11 +620,14 @@ that this is only effective if you've mocked out your async requests to resolve immediately (like the `axios` mock we have in the examples). It will not `await` for promises that are not already resolved by the time you attempt to flush them. +In case this doesn't work for you the way you would expect, take a look at the +waitForExpect function that should be much more intuitive to use. +
-Is there a different way to wait for things to happen? For example for end to end or contract tests? +Is there a different way to wait for things to happen? For example for end to end or contract tests? Definitely! There is an abstraction called `waitForExpect` that will keep calling your expectations until a timeout or the expectation passes - whatever happens first. @@ -622,10 +643,8 @@ test('it waits for the data to be loaded', async () => { // This will pass when the state of the component changes once the data is available // the loader will disappear, and the data will be shown - await waitForExpect(() => { - expect(queryByText('Loading...')).toBeNull() - expect(queryByTestId('message').textContent).toMatch(/Hello World/) - }) + await waitForExpect(() => expect(queryByText('Loading...')).toBeNull()) + expect(queryByTestId('message').textContent).toMatch(/Hello World/) }) ``` From 32bbae33fe2226d1f23a4dc76e1053ef4a5cdab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 19:27:37 +0400 Subject: [PATCH 8/9] fixed d .md syntax --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4c4f2c2c..b3dbc008 100644 --- a/README.md +++ b/README.md @@ -156,10 +156,12 @@ See an example in the section about `render` below. ### `waitForExpect` -Defined as: ```javascript +Defined as: + +```javascript waitForExpect(expectation: () => void, timeout?: number, interval?: number) => Promise<{}>; +``` -```` When in need to wait for non-deterministic periods of time you can use waitForExpect, to wait for your expectations to pass. Take a look at [`Is there a different way to wait for things to happen?`](#waitForExpect) part of the FAQ, or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) @@ -169,7 +171,7 @@ or the function documentation here: [`wait-for-expect`](https://github.com/TheBr await waitForExpect(() => expect(queryByLabelText('username')).not.toBeNull()) getByLabelText('username').value = 'chucknorris' ... -```` +``` Another advantage of waitForExpect in comparison to flushPromises, is that flushPromises will not flush promises that have not been queued up already, From f4888bf9d3d1b30b0c333a570861a41a9a416641 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Gandecki?= Date: Thu, 29 Mar 2018 19:28:52 +0400 Subject: [PATCH 9/9] improved style --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b3dbc008..3627c8ac 100644 --- a/README.md +++ b/README.md @@ -165,6 +165,7 @@ waitForExpect(expectation: () => void, timeout?: number, interval?: number) => P When in need to wait for non-deterministic periods of time you can use waitForExpect, to wait for your expectations to pass. Take a look at [`Is there a different way to wait for things to happen?`](#waitForExpect) part of the FAQ, or the function documentation here: [`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) +or just take a look at this simple example: ```javascript ... @@ -175,7 +176,7 @@ getByLabelText('username').value = 'chucknorris' Another advantage of waitForExpect in comparison to flushPromises, is that flushPromises will not flush promises that have not been queued up already, -for example, if they will queue up as a consequence of the initial promises. +for example, if they will queue up as a result of the initial promises. In consequence of that, you might have to call flushPromises multiple times to get your components to your desired state.