From d4f4b057eb6412a35e199cdd764bcad0971d323f Mon Sep 17 00:00:00 2001
From: Victor Martins
Date: Tue, 13 Nov 2018 00:40:53 -0300
Subject: [PATCH 001/360] docs: custom render with create-react-app (#220)
* docs: custom render with create-react-app
Added an explanation on how to configure the custom render section on top of Create React App.
* Added vctormb as contributor
* Update README.md
---
.all-contributorsrc | 9 +++++++++
README.md | 26 +++++++++++++++++++++++---
2 files changed, 32 insertions(+), 3 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 0e26afed..e11f50c3 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -586,6 +586,15 @@
"contributions": [
"doc"
]
+ },
+ {
+ "login": "vctormb",
+ "name": "Victor Martins",
+ "avatar_url": "https://avatars2.githubusercontent.com/u/13953703?v=4",
+ "profile": "https://github.com/vctormb",
+ "contributions": [
+ "doc"
+ ]
}
]
}
diff --git a/README.md b/README.md
index 0333068f..28d25fa6 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -283,6 +283,27 @@ module.exports = {
],
// ... other options ...
}
+```
+
+If your project is based on top of Create React App, to make the file accessible without using relative imports, you just need to create a `.env` file in the root of your project with the following configuration:
+
+```
+// Create React App project structure
+
+$ app
+.
+├── .env
+├── src
+│ ├── utils
+│ │ └── test-utils.js
+│
+```
+
+```
+// .env
+
+// example if your utils folder is inside the /src directory.
+NODE_PATH=src/utils
```
There is the case when you want to wrap your components in a `Provider`, this
@@ -1337,8 +1358,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ Mark Pollmann](https://markpollmann.com/) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=MarkPollmann "Documentation") | [ Ehtesham Kafeel](https://github.com/ehteshamkafeel) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=ehteshamkafeel "Documentation") | [ Julio Pavón](http://jpavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=jpavon "Code") | [ Duncan L](http://www.duncanleung.com/) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=duncanleung "Documentation") [💡](#example-duncanleung "Examples") | [ Tiago Almeida](https://www.linkedin.com/in/tyagow/?locale=en_US) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=tyagow "Documentation") | [ Robert Smith](http://rbrtsmith.com/) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Arbrtsmith "Bug reports") | [ Zach Green](https://offbyone.tech) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=zgreen "Documentation") |
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
-| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") |
-
+| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") |
This project follows the [all-contributors][all-contributors] specification.
From 8605224582018f3d64725f6e2fc3ff568a4f3dc1 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds"
Date: Tue, 13 Nov 2018 15:02:36 -0700
Subject: [PATCH 002/360] docs: ensure options spreads correctly
---
README.md | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 28d25fa6..1f8adae2 100644
--- a/README.md
+++ b/README.md
@@ -244,14 +244,14 @@ import {ThemeProvider} from 'my-ui-lib'
import {TranslationProvider} from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'
-const customRender = (node, ...options) => {
+const customRender = (node, options) => {
return render(
{node}
,
- ...options,
+ options,
)
}
@@ -314,7 +314,7 @@ return value of the customRender.
```js
// test-utils.js
-const customRender = (node, ...options) => {
+const customRender = (node, options) => {
const rendered = render(
{node}
, options)
return {
...rendered,
@@ -339,7 +339,7 @@ You can use CommonJS modules instead of ES modules, which should work in Node:
// test-utils.js
const rtl = require('react-testing-library')
-const customRender = (node, ...options) => {
+const customRender = (node, options) => {
return rtl.render({node})
}
@@ -640,8 +640,8 @@ export function getByTestId(...args) {
return queryHelpers.firstResultOrNull(getAllByTestId, ...args)
}
-const customRender = (container, ...options) => {
- const utils = render(container, ...options)
+const customRender = (container, options) => {
+ const utils = render(container, options)
return {
...utils,
From 169434f7b289e7ca90c4c4f5696a39923dc63d87 Mon Sep 17 00:00:00 2001
From: Stefano Magni
Date: Wed, 14 Nov 2018 18:53:24 +0100
Subject: [PATCH 003/360] docs: update README.md (#221)
I've aligned the documented signature of some functions in the README
I made that because I got confused at the beginning and I took some time to understand that they were just some examples (and not a real documentation).
- [x] Documentation
- [x] Ready to be merged
---
README.md | 20 +++++++++++++++-----
1 file changed, 15 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 1f8adae2..9648b706 100644
--- a/README.md
+++ b/README.md
@@ -491,7 +491,9 @@ unmount()
// your component has been unmounted and now: container.innerHTML === ''
```
-#### `getByLabelText(text: TextMatch, options: {selector: string = '*'}): HTMLElement`
+#### `getByLabelText(text: TextMatch, options): HTMLElement`
+
+> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true}`
This will search for the label that matches the given [`TextMatch`](#textmatch),
then find the element associated with that label.
@@ -529,7 +531,9 @@ const inputNode = getByLabelText('username', {selector: 'input'})
> want this behavior (for example you wish to assert that it doesn't exist),
> then use `queryByLabelText` instead.
-#### `getByPlaceholderText(text: TextMatch): HTMLElement`
+#### `getByPlaceholderText(text: TextMatch, options): HTMLElement`
+
+> Options: `{exact = true, collapseWhitespace = true, trim = true}`
This will search for all elements with a placeholder attribute and find one that
matches the given [`TextMatch`](#textmatch).
@@ -544,7 +548,9 @@ const inputNode = getByPlaceholderText('Username')
> NOTE: a placeholder is not a good substitute for a label so you should
> generally use `getByLabelText` instead.
-#### `getByText(text: TextMatch): HTMLElement`
+#### `getByText(text: TextMatch, options): HTMLElement`
+
+> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true, ignore = 'script, style'}`
This will search for all elements that have a text node with `textContent`
matching the given [`TextMatch`](#textmatch).
@@ -556,7 +562,9 @@ const {getByText} = render(About ℹ️)
const aboutAnchorNode = getByText('about')
```
-#### `getByAltText(text: TextMatch): HTMLElement`
+#### `getByAltText(text: TextMatch, options): HTMLElement`
+
+> Options: `{exact = true, collapseWhitespace = true, trim = true}`
This will return the element (normally an ``) that has the given `alt`
text. Note that it only supports elements which accept an `alt` attribute:
@@ -576,7 +584,9 @@ const {getByAltText} = render(
const incrediblesPosterImg = getByAltText(/incredibles.*poster$/i)
```
-#### `getByTestId(text: TextMatch): HTMLElement`
+#### `getByTestId(text: TextMatch, options): HTMLElement`
+
+> Options: `{exact = true, collapseWhitespace = true, trim = true}`
A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) `` (and it
also accepts a [`TextMatch`](#textmatch)).
From 11a41ce3ad9e9695f4b1662a5c67b890fc304894 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds"
Date: Tue, 20 Nov 2018 21:44:06 -0700
Subject: [PATCH 004/360] feat: add flushEffects to prepare for hooks (#223)
---
README.md | 19 +++++++++++++++----
src/__tests__/render.js | 9 ++++++++-
src/index.js | 6 +++++-
3 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 9648b706..96964cd3 100644
--- a/README.md
+++ b/README.md
@@ -144,6 +144,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
- [Usage](#usage)
- [`render`](#render)
- [`cleanup`](#cleanup)
+ - [`flushEffects` (experimental)](#flusheffects-experimental)
- [`dom-testing-library` APIs](#dom-testing-library-apis)
- [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)
- [`waitForElement`](#waitforelement)
@@ -283,9 +284,11 @@ module.exports = {
],
// ... other options ...
}
-```
+```
-If your project is based on top of Create React App, to make the file accessible without using relative imports, you just need to create a `.env` file in the root of your project with the following configuration:
+If your project is based on top of Create React App, to make the file accessible
+without using relative imports, you just need to create a `.env` file in the
+root of your project with the following configuration:
```
// Create React App project structure
@@ -493,7 +496,8 @@ unmount()
#### `getByLabelText(text: TextMatch, options): HTMLElement`
-> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true}`
+> Options:
+> `{selector = '*', exact = true, collapseWhitespace = true, trim = true}`
This will search for the label that matches the given [`TextMatch`](#textmatch),
then find the element associated with that label.
@@ -550,7 +554,8 @@ const inputNode = getByPlaceholderText('Username')
#### `getByText(text: TextMatch, options): HTMLElement`
-> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true, ignore = 'script, style'}`
+> Options:
+> `{selector = '*', exact = true, collapseWhitespace = true, trim = true, ignore = 'script, style'}`
This will search for all elements that have a text node with `textContent`
matching the given [`TextMatch`](#textmatch).
@@ -733,6 +738,11 @@ that you configure your test framework to run a file before your tests which
does this automatically. See the [setup](#setup) section for guidance on how to
set up your framework.
+### `flushEffects` (experimental)
+
+This experimental API is intended to be used to force React's `useEffect` hook
+to run synchronously.
+
## `dom-testing-library` APIs
`react-testing-library` is built on top of
@@ -1369,6 +1379,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") |
+
This project follows the [all-contributors][all-contributors] specification.
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index 5ee0dc6f..f2ec2351 100644
--- a/src/__tests__/render.js
+++ b/src/__tests__/render.js
@@ -1,7 +1,7 @@
import 'jest-dom/extend-expect'
import React from 'react'
import ReactDOM from 'react-dom'
-import {render, cleanup} from '../'
+import {render, cleanup, flushEffects} from '../'
afterEach(cleanup)
@@ -90,3 +90,10 @@ it('supports fragments', () => {
cleanup()
expect(document.body.innerHTML).toBe('')
})
+
+test('flushEffects can be called without causing issues', () => {
+ render()
+ const preHtml = document.documentElement.innerHTML
+ flushEffects()
+ expect(document.documentElement.innerHTML).toBe(preHtml)
+})
diff --git a/src/index.js b/src/index.js
index a9db403f..6dea3d08 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,6 +48,10 @@ function cleanup() {
mountedContainers.forEach(cleanupAtContainer)
}
+function flushEffects() {
+ ReactDOM.render(null, document.createElement('div'))
+}
+
// maybe one day we'll expose this (perhaps even as a utility returned by render).
// but let's wait until someone asks for it.
function cleanupAtContainer(container) {
@@ -81,6 +85,6 @@ fireEvent.select = (node, init) => {
// just re-export everything from dom-testing-library
export * from 'dom-testing-library'
-export {render, cleanup}
+export {render, cleanup, flushEffects}
/* eslint func-name-matching:0 */
From 415616fcfbf5afff3d95b3da92d380ac46fc6f4c Mon Sep 17 00:00:00 2001
From: Royston Shufflebotham
Date: Tue, 27 Nov 2018 17:50:57 +0000
Subject: [PATCH 005/360] docs: fix up custom render + rerender samples (#226)
The get/query methods in the "how to override data-testid" sample
were not `.bind`ing correctly; I've replaced them with arrow functions
as suggested. They were also passing in `container`, which wasn't
correct. Also, a `rerender` implementation is needed in such a
custom renderer, so I've added one to the sample.
I've also fixed up the separate custom rerender sample as it a)
incorrectly advertised an options parameter, and b) didn't pass
along the original baseElement.
For: kentcdodds/react-testing-library#225
---
.all-contributorsrc | 11 +++++++++
README.md | 59 ++++++++++++++++++++++++++-------------------
2 files changed, 45 insertions(+), 25 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index e11f50c3..9f79d4ea 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -595,6 +595,17 @@
"contributions": [
"doc"
]
+ },
+ {
+ "login": "RoystonS",
+ "name": "Royston Shufflebotham",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/19773?v=4",
+ "profile": "https://github.com/RoystonS",
+ "contributions": [
+ "bug",
+ "doc",
+ "example"
+ ]
}
]
}
diff --git a/README.md b/README.md
index 96964cd3..88cbd2d4 100644
--- a/README.md
+++ b/README.md
@@ -10,18 +10,20 @@
+
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
+
+[**Read The Docs**](https://react-testing-library-docs.netlify.com/react) | [Edit the docs](https://github.com/alexkrolick/react-testing-library-docs)
+
@@ -31,6 +33,27 @@
+## Table of Contents
+
+
+
+
+- [The Problem](#the-problem)
+- [This Solution](#this-solution)
+- [Example](#example)
+- [Installation](#installation)
+- [Examples](#examples)
+- [Other Solutions](#other-solutions)
+- [Guiding Principles](#guiding-principles)
+- [Contributors](#contributors)
+- [Issues](#issues)
+ - [🐛 Bugs](#-bugs)
+ - [💡 Feature Requests](#-feature-requests)
+ - [❓ Questions](#-questions)
+- [LICENSE](#license)
+
+
+
## The problem
You want to write maintainable tests for your React components. As a part of
@@ -51,40 +74,6 @@ primary guiding principle is:
> [The more your tests resemble the way your software is used, the more
> confidence they can give you.][guiding-principle]
-So rather than dealing with instances of rendered react components, your tests
-will work with actual DOM nodes. The utilities this library provides facilitate
-querying the DOM in the same way the user would. Finding for elements by their
-label text (just like a user would), finding links and buttons from their text
-(like a user would). It also exposes a recommended way to find elements by a
-`data-testid` as an "escape hatch" for elements where the text content and label
-do not make sense or is not practical.
-
-This library encourages your applications to be more accessible and allows you
-to get your tests closer to using your components the way a user will, which
-allows your tests to give you more confidence that your application will work
-when a real user uses it.
-
-This library is a replacement for [enzyme](http://airbnb.io/enzyme/). While you
-_can_ follow these guidelines using enzyme itself, enforcing this is harder
-because of all the extra utilities that enzyme provides (utilities which
-facilitate testing implementation details). Read more about this in
-[the FAQ](#faq) below.
-
-**What this library is not**:
-
-1. A test runner or framework
-2. Specific to a testing framework (though we recommend Jest as our preference,
- the library works with any framework. See
- [Using Without Jest](https://github.com/kentcdodds/dom-testing-library#using-without-jest))
-
-> NOTE: This library is built on top of
-> [`dom-testing-library`](https://github.com/kentcdodds/dom-testing-library)
-> which is where most of the logic behind the queries is.
-
-## What is react-testing-library?
-
-Have a look at the video below for an explanation.
-[](https://youtu.be/JKOwJUM4_RM 'what is react testing library')
## Example
@@ -134,41 +123,6 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
})
```
-## Table of Contents
-
-
-
-
-- [Installation](#installation)
-- [Setup](#setup)
- - [Global Config](#global-config)
- - [Custom Render](#custom-render)
-- [Usage](#usage)
- - [`render`](#render)
- - [`cleanup`](#cleanup)
- - [`flushEffects` (experimental)](#flusheffects-experimental)
-- [`dom-testing-library` APIs](#dom-testing-library-apis)
- - [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)
- - [`waitForElement`](#waitforelement)
- - [`wait`](#wait)
- - [`within`](#within)
-- [`TextMatch`](#textmatch)
-- [`query` APIs](#query-apis)
-- [`queryAll` and `getAll` APIs](#queryall-and-getall-apis)
-- [Examples](#examples)
-- [Learning Material](#learning-material)
-- [FAQ](#faq)
-- [Other Solutions](#other-solutions)
-- [Guiding Principles](#guiding-principles)
-- [Contributors](#contributors)
-- [Issues](#issues)
- - [🐛 Bugs](#-bugs)
- - [💡 Feature Requests](#-feature-requests)
- - [❓ Questions](#-questions)
-- [LICENSE](#license)
-
-
-
## Installation
This module is distributed via [npm][npm] which is bundled with [node][node] and
@@ -183,761 +137,15 @@ This library has a `peerDependencies` listing for `react-dom`.
You may also be interested in installing `jest-dom` so you can use
[the custom jest matchers](https://github.com/gnapse/jest-dom#readme).
-## Setup
-
-`react-testing-library` does not require any configuration to be used (as
-demonstrated in the example above). However, there are some things you can do
-when configuring your testing framework to reduce some boilerplate. In these
-docs we'll demonstrate configuring Jest, but you should be able to do similar
-things with any testing framework (react-testing-library does not require that
-you use Jest).
-
-### Global Config
-
-There are several options you can add to your global test config that simplify
-the setup and teardown of tests in individual files. For example, you can ensure
-[`cleanup`](#cleanup) is called after each test and import additional
-assertions.
-
-To do this with Jest, you can add the
-[`setupTestFrameworkScriptFile`](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string)
-option to your Jest config. The setup file can be anywhere, for example
-`jest.setup.js` or `./utils/setupTests.js`.
-
-If you are using the default setup from create-react-app, this option is set to
-`src/setupTests.js`. You should create this file if it doesn't exist and put the
-setup code there.
-
-```javascript
-// jest.config.js
-module.exports = {
- setupTestFrameworkScriptFile: require.resolve('./jest.setup.js'),
- // ... other options ...
-}
-```
-
-```javascript
-// jest.setup.js
-
-// add some helpful assertions
-import 'jest-dom/extend-expect'
-
-// this is basically: afterEach(cleanup)
-import 'react-testing-library/cleanup-after-each'
-```
-
-### Custom Render
-
-It's often useful to define a custom render method that includes things like
-global context providers, data stores, etc. To make this available globally, one
-approach is to define a utility file that re-exports everything from
-`react-testing-library`. You can replace react-testing-library with this file in
-all your imports.
-
-```diff
-// my-component.test.js
-- import { render, fireEvent } from 'react-testing-library';
-+ import { render, fireEvent } from '../test-utils';
-```
-
-```js
-// test-utils.js
-import {render} from 'react-testing-library'
-import {ThemeProvider} from 'my-ui-lib'
-import {TranslationProvider} from 'my-i18n-lib'
-import defaultStrings from 'i18n/en-x-default'
-
-const customRender = (node, options) => {
- return render(
-
-
- {node}
-
- ,
- options,
- )
-}
-
-// re-export everything
-export * from 'react-testing-library'
-
-// override render method
-export {customRender as render}
-```
-
-To make this file accessible without using relative imports, add the folder
-containing the file to the Jest `moduleDirectories` option. Note: this will make
-_all_ the .js files in that directory importable without `../`.
-
-```diff
-// my-component.test.js
-- import { render, fireEvent } from '../test-utils';
-+ import { render, fireEvent } from 'test-utils';
-```
-
-```diff
-// jest.config.js
-module.exports = {
- moduleDirectories: [
- 'node_modules',
-+ // add the directory with the test-utils.js file, for example:
-+ 'utils', // a utility folder
-+ __dirname, // the root directory
- ],
- // ... other options ...
-}
-```
-
-If your project is based on top of Create React App, to make the file accessible
-without using relative imports, you just need to create a `.env` file in the
-root of your project with the following configuration:
-
-```
-// Create React App project structure
-
-$ app
-.
-├── .env
-├── src
-│ ├── utils
-│ │ └── test-utils.js
-│
-```
-
-```
-// .env
-
-// example if your utils folder is inside the /src directory.
-NODE_PATH=src/utils
-```
-
-There is the case when you want to wrap your components in a `Provider`, this
-might cause conflicts when `rerender`ed. To achieve this, we suggest the
-`rerender` should be implemented the same way custom queries, by changing the
-return value of the customRender.
-
-```js
-// test-utils.js
-
-const customRender = (ui, options) => {
- const rendered = render(
{ui}
, options)
- return {
- ...rendered,
- rerender: newUi =>
- customRender(newUi, {
- container: rendered.container,
- baseElement: rendered.baseElement,
- }),
- }
-}
-```
-
-#### Export Issue with Babel Versions Lower Than 7
-
-Babel versions lower than 7 throw an error when trying to override the named
-export in the example above. (See
-[#169](https://github.com/kentcdodds/react-testing-library/issues/169).)
-
-
-Workaround
-
-You can use CommonJS modules instead of ES modules, which should work in Node:
-
-```js
-// test-utils.js
-const rtl = require('react-testing-library')
-
-const customRender = (node, options) => {
- return rtl.render({node})
-}
-
-module.exports = {
- ...rtl,
- render: customRender,
-}
-```
-
-
-
-## Usage
-
-### `render`
-
-Defined as:
-
-```typescript
-function render(
- ui: React.ReactElement,
- options?: {
- /* You won't often use this, expand below for docs on options */
- },
-): RenderResult
-```
-
-Render into a container which is appended to `document.body`. It should be used
-with [cleanup](#cleanup):
-
-```javascript
-import {render} from 'react-testing-library'
-
-render()
-```
-
-
-
-Expand to see documentation on the options
-
-You wont often need to specify options, but if you ever do, here are the
-available options which you could provide as a second argument to `render`.
-
-**container**: By default, `react-testing-library` will create a `div` and
-append that div to the `document.body` and this is where your react component
-will be rendered. If you provide your own HTMLElement `container` via this
-option, it will not be appended to the `document.body` automatically.
-
-For Example: If you are unit testing a `tablebody` element, it cannot be a child
-of a `div`. In this case, you can specify a `table` as the render `container`.
-
-```javascript
-const table = document.createElement('table')
-
-const {container} = render(, {
- container: document.body.appendChild(table),
-})
-```
-
-**baseElement**: If the `container` is specified, then this defaults to that,
-otherwise this defaults to `document.documentElement`. This is used as the base
-element for the queries as well as what is printed when you use `debug()`.
-
-**hydrate**: If hydrate is set to true, then it will render with
-[ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate). This may be
-useful if you are using server-side rendering and use ReactDOM.hydrate to mount
-your components.
-
-
-
-In the example above, the `render` method returns an object that has a few
-properties:
-
-#### `container`
-
-The containing DOM node of your rendered React Element (rendered using
-`ReactDOM.render`). It's a `div`. This is a regular DOM node, so you can call
-`container.querySelector` etc. to inspect the children.
-
-> Tip: To get the root element of your rendered element, use
-> `container.firstChild`.
->
-> NOTE: When that root element is a
-> [React Fragment](https://reactjs.org/docs/fragments.html),
-> `container.firstChild` will only get the first child of that Fragment, not the
-> Fragment itself.
-
-> 🚨 If you find yourself using `container` to query for rendered elements then
-> you should reconsider! The other queries are designed to be more resiliant to
-> changes that will be made to the component you're testing. Avoid using
-> `container` to query for elements!
-
-#### `baseElement`
-
-The containing DOM node where your React Element is rendered in the container.
-If you don't specify the `baseElement` in the options of `render`, it will
-default to `document.body`.
-
-This is useful when the component you want to test renders something outside the
-container div, e.g. when you want to snapshot test your portal component which
-renders it's HTML directly in the body.
-
-> Note: the queries returned by the `render` looks into baseElement, so you can
-> use queries to test your portal component without the baseElement.
-
-#### `debug`
-
-This method is a shortcut for `console.log(prettyDOM(baseElement))`.
-
-```javascript
-import React from 'react'
-import {render} from 'react-testing-library'
-
-const HelloWorld = () =>
Hello World
-const {debug} = render()
-debug()
-//
-//
Hello World
-//
-// you can also pass an element: debug(getByTestId('messages'))
-```
-
-This is a simple wrapper around `prettyDOM` which is also exposed and comes from
-[`dom-testing-library`](https://github.com/kentcdodds/dom-testing-library/blob/master/README.md#prettydom).
-
-#### `rerender`
-
-It'd probably be better if you test the component that's doing the prop updating
-to ensure that the props are being updated correctly (see
-[the Guiding Principles section](#guiding-principles)). That said, if you'd
-prefer to update the props of a rendered component in your test, this function
-can be used to update props of the rendered component.
-
-```javascript
-import {render} from 'react-testing-library'
-
-const {rerender} = render()
-
-// re-render the same component with different props
-rerender()
-```
-
-[Open the tests](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/update-props.js)
-for a full example of this.
-
-#### `unmount`
-
-This will cause the rendered component to be unmounted. This is useful for
-testing what happens when your component is removed from the page (like testing
-that you don't leave event handlers hanging around causing memory leaks).
-
-> This method is a pretty small abstraction over
-> `ReactDOM.unmountComponentAtNode`
-
-```javascript
-import {render} from 'react-testing-library'
-
-const {container, unmount} = render()
-unmount()
-// your component has been unmounted and now: container.innerHTML === ''
-```
-
-#### `getByLabelText(text: TextMatch, options): HTMLElement`
-
-> Options:
-> `{selector = '*', exact = true, collapseWhitespace = true, trim = true}`
-
-This will search for the label that matches the given [`TextMatch`](#textmatch),
-then find the element associated with that label.
-
-```javascript
-import {render} from 'react-testing-library'
-
-const {getByLabelText} = render()
-const inputNode = getByLabelText('Username')
-
-// this would find the input node for the following DOM structures:
-// The "for" attribute (NOTE: in JSX with React you'll write "htmlFor" rather than "for")
-//
-//
-//
-// The aria-labelledby attribute
-//
-//
-//
-// Wrapper labels
-//
-//
-// It will NOT find the input node for this:
-//
-//
-// For this case, you can provide a `selector` in the options:
-const inputNode = getByLabelText('username', {selector: 'input'})
-// and that would work
-// Note that will also work, but take
-// care because this is not a label that users can see on the page. So
-// the purpose of your input should be obvious for those users.
-```
-
-> Note: This method will throw an error if it cannot find the node. If you don't
-> want this behavior (for example you wish to assert that it doesn't exist),
-> then use `queryByLabelText` instead.
-
-#### `getByPlaceholderText(text: TextMatch, options): HTMLElement`
-
-> Options: `{exact = true, collapseWhitespace = true, trim = true}`
-
-This will search for all elements with a placeholder attribute and find one that
-matches the given [`TextMatch`](#textmatch).
-
-```javascript
-import {render} from 'react-testing-library'
-
-const {getByPlaceholderText} = render()
-const inputNode = getByPlaceholderText('Username')
-```
-
-> NOTE: a placeholder is not a good substitute for a label so you should
-> generally use `getByLabelText` instead.
-
-#### `getByText(text: TextMatch, options): HTMLElement`
-
-> Options:
-> `{selector = '*', exact = true, collapseWhitespace = true, trim = true, ignore = 'script, style'}`
-
-This will search for all elements that have a text node with `textContent`
-matching the given [`TextMatch`](#textmatch).
-
-```javascript
-import {render} from 'react-testing-library'
-
-const {getByText} = render(About ℹ️)
-const aboutAnchorNode = getByText('about')
-```
-
-#### `getByAltText(text: TextMatch, options): HTMLElement`
-
-> Options: `{exact = true, collapseWhitespace = true, trim = true}`
-
-This will return the element (normally an ``) that has the given `alt`
-text. Note that it only supports elements which accept an `alt` attribute:
-[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img),
-[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input),
-and [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area)
-(intentionally excluding
-[`
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -216,7 +216,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [ Royston Shufflebotham](https://github.com/RoystonS) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [ chrbala](https://github.com/chrbala) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
-| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") |
+| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") |
diff --git a/package.json b/package.json
index 78091217..21236814 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.0.0-semantically-released",
"description": "Simple and complete React DOM testing utilities that encourage good testing practices.",
"main": "dist/index.js",
+ "module": "dist/react-testing-library.esm.js",
"typings": "typings/index.d.ts",
"engines": {
"node": ">=8"
From a4b5307364442698731e14b9c82a4294ca047b3a Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds"
Date: Wed, 6 Feb 2019 10:52:18 -0700
Subject: [PATCH 024/360] fix(build): upgrade all deps
Closes #279
---
.gitignore | 3 +++
package.json | 15 ++++++++++-----
2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/.gitignore b/.gitignore
index 09048d22..5bb9facf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,10 @@ dist
.DS_Store
.eslintcache
+yarn-error.log
+
# these cause more harm than good
# when working with contributors
package-lock.json
yarn.lock
+
diff --git a/package.json b/package.json
index 21236814..67bde194 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,12 @@
"test": "kcd-scripts test --config=other/jest.config.js",
"test:update": "npm test -- --updateSnapshot --coverage",
"validate": "kcd-scripts validate",
- "setup": "npm install && npm run validate -s",
- "precommit": "kcd-scripts precommit"
+ "setup": "npm install && npm run validate -s"
+ },
+ "husky": {
+ "hooks": {
+ "pre-commit": "kcd-scripts pre-commit"
+ }
},
"files": [
"dist",
@@ -38,6 +42,7 @@
"author": "Kent C. Dodds (http://kentcdodds.com/)",
"license": "MIT",
"dependencies": {
+ "@babel/runtime": "^7.3.1",
"dom-testing-library": "^3.13.1"
},
"devDependencies": {
@@ -46,12 +51,12 @@
"axios": "^0.18.0",
"eslint-import-resolver-jest": "^2.1.1",
"history": "^4.7.2",
- "jest-dom": "^2.0.4",
+ "jest-dom": "3.0.1",
"jest-in-case": "^1.0.2",
- "kcd-scripts": "^0.44.0",
+ "kcd-scripts": "0.49.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
- "react-redux": "^5.0.7",
+ "react-redux": "6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-transition-group": "^2.5.0",
From 8d70265adc17c2ef99001be8212ee61c11ee66d0 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds"
Date: Wed, 6 Feb 2019 11:03:36 -0700
Subject: [PATCH 025/360] fix(act): add a polyfill
Thanks @threepointone!
---
src/__tests__/no-act.js | 1 -
src/act-compat.js | 13 ++++++++++---
2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/__tests__/no-act.js b/src/__tests__/no-act.js
index 07ee091d..7bf6cd6a 100644
--- a/src/__tests__/no-act.js
+++ b/src/__tests__/no-act.js
@@ -6,5 +6,4 @@ test('act works even when there is no act from test utils', () => {
const callback = jest.fn()
act(callback)
expect(callback).toHaveBeenCalledTimes(1)
- expect(callback).toHaveBeenCalledWith(/* nothing */)
})
diff --git a/src/act-compat.js b/src/act-compat.js
index 65f85971..b39d992f 100644
--- a/src/act-compat.js
+++ b/src/act-compat.js
@@ -1,9 +1,16 @@
+import ReactDOM from 'react-dom'
import {act as reactAct} from 'react-dom/test-utils'
// act is supported react-dom@16.8.0
-// and is only needed for versions higher than that
-// so we do nothing for versions that don't support act.
-const act = reactAct || (cb => cb())
+// so for versions that don't have act from test utils
+// we do this little polyfill. No warnings, but it's
+// better than nothing.
+function actPolyfill(cb) {
+ ReactDOM.unstable_batchedUpdates(cb)
+ ReactDOM.render(null, document.createElement('div'))
+}
+
+const act = reactAct || actPolyfill
function rtlAct(...args) {
return act(...args)
From 1d45c5c2ca1281187dc7735ac0e2f12137b157d3 Mon Sep 17 00:00:00 2001
From: Marco Biedermann
Date: Fri, 8 Feb 2019 19:08:21 +0100
Subject: [PATCH 026/360] test: refactor test (#286)
**What**:
Small refactoring of `end-to-end` testing.
**Why**:
Clean code is better code :)
**How**:
Since both conditions have a following return value, this could be shortened by using short circuit return statements.
**Checklist**:
- [ ] Documentation
- [x] Tests
- [x] Ready to be merged
- [x] Added myself to contributors table
---
.all-contributorsrc | 11 +++++++++++
README.md | 4 ++--
src/__tests__/end-to-end.js | 11 +++++------
3 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index c900c0db..527c6635 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -636,6 +636,17 @@
"contributions": [
"code"
]
+ },
+ {
+ "login": "marcobiedermann",
+ "name": "Marco Biedermann",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/5244986?v=4",
+ "profile": "https://www.marcobiedermann.com",
+ "contributions": [
+ "code",
+ "maintenance",
+ "test"
+ ]
}
]
}
diff --git a/README.md b/README.md
index a4b19680..f593f07e 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ practices.
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -216,7 +216,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [ Royston Shufflebotham](https://github.com/RoystonS) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [ chrbala](https://github.com/chrbala) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
-| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") |
+| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") |
diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js
index e8ad2f8b..78087e58 100644
--- a/src/__tests__/end-to-end.js
+++ b/src/__tests__/end-to-end.js
@@ -22,13 +22,12 @@ class ComponentWithLoader extends React.Component {
render() {
if (this.state.loading) {
return
Loading...
- } else {
- return (
-
- Loaded this message: {this.state.data.returnedMessage}!
-
- )
}
+ return (
+
+ Loaded this message: {this.state.data.returnedMessage}!
+
+ )
}
}
From ac58967b314931db3ee745f9d039c0b6d1da9f02 Mon Sep 17 00:00:00 2001
From: Alex Zherdev
Date: Fri, 8 Feb 2019 15:56:14 -0800
Subject: [PATCH 027/360] fix: act polyfill for React 15.x (#288)
Fixes #287
---
.all-contributorsrc | 10 ++++++++++
README.md | 4 ++--
src/act-compat.js | 3 ++-
3 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 527c6635..9edfc26a 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -647,6 +647,16 @@
"maintenance",
"test"
]
+ },
+ {
+ "login": "alexzherdev",
+ "name": "Alex Zherdev",
+ "avatar_url": "https://avatars3.githubusercontent.com/u/93752?v=4",
+ "profile": "https://github.com/alexzherdev",
+ "contributions": [
+ "bug",
+ "code"
+ ]
}
]
}
diff --git a/README.md b/README.md
index f593f07e..08cb5c43 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ practices.
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -216,7 +216,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [ Royston Shufflebotham](https://github.com/RoystonS) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [ chrbala](https://github.com/chrbala) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
-| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") |
+| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [ Alex Zherdev](https://github.com/alexzherdev) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") |
diff --git a/src/act-compat.js b/src/act-compat.js
index b39d992f..8b76d157 100644
--- a/src/act-compat.js
+++ b/src/act-compat.js
@@ -1,3 +1,4 @@
+import React from 'react'
import ReactDOM from 'react-dom'
import {act as reactAct} from 'react-dom/test-utils'
@@ -7,7 +8,7 @@ import {act as reactAct} from 'react-dom/test-utils'
// better than nothing.
function actPolyfill(cb) {
ReactDOM.unstable_batchedUpdates(cb)
- ReactDOM.render(null, document.createElement('div'))
+ ReactDOM.render(, document.createElement('div'))
}
const act = reactAct || actPolyfill
From 9c606da7aab61aa23fc3fbf715eb5f319d9b329f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Matulionis=20dos=20Santos?=
Date: Sun, 10 Feb 2019 23:57:48 -0200
Subject: [PATCH 028/360] feat(testHook): modify testHook to return unmount
function (#290)
* Returns unmount function on testHook
* Adds test for unmount function; Adds example of useEffect
* Add Andrewmat as contributor
* Adds rerender on testHook return
---
.all-contributorsrc | 11 ++
.github/ISSUE_TEMPLATE.md | 3 +-
README.md | 4 +-
.../__tests__/mock.react-transition-group.js | 5 +-
examples/__tests__/react-hooks.js | 125 +++++++++++++-----
examples/react-hooks.js | 21 ++-
src/__tests__/test-hook.js | 28 +++-
src/index.js | 10 +-
8 files changed, 164 insertions(+), 43 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 9edfc26a..dea90e11 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -657,6 +657,17 @@
"bug",
"code"
]
+ },
+ {
+ "login": "Andrewmat",
+ "name": "André Matulionis dos Santos",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/5133846?v=4",
+ "profile": "https://twitter.com/Andrewmat",
+ "contributions": [
+ "code",
+ "example",
+ "test"
+ ]
}
]
}
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 5114fdbd..724a7df6 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -59,7 +59,8 @@ What happened:
-Reproduction repository: https://github.com/alexkrolick/dom-testing-library-template
+Reproduction repository:
+https://github.com/alexkrolick/dom-testing-library-template
diff --git a/examples/__tests__/mock.react-transition-group.js b/examples/__tests__/mock.react-transition-group.js
index ef22636f..83894534 100644
--- a/examples/__tests__/mock.react-transition-group.js
+++ b/examples/__tests__/mock.react-transition-group.js
@@ -31,9 +31,8 @@ afterEach(cleanup)
jest.mock('react-transition-group', () => {
const FakeTransition = jest.fn(({children}) => children)
- const FakeCSSTransition = jest.fn(
- props =>
- props.in ? {props.children} : null,
+ const FakeCSSTransition = jest.fn(props =>
+ props.in ? {props.children} : null,
)
return {CSSTransition: FakeCSSTransition, Transition: FakeTransition}
})
diff --git a/examples/__tests__/react-hooks.js b/examples/__tests__/react-hooks.js
index 5e001a37..fe616eb7 100644
--- a/examples/__tests__/react-hooks.js
+++ b/examples/__tests__/react-hooks.js
@@ -6,53 +6,114 @@
*/
import {testHook, act, cleanup} from 'react-testing-library'
-import useCounter from '../react-hooks'
+import {useCounter, useDocumentTitle, useCall} from '../react-hooks'
afterEach(cleanup)
-test('accepts default initial values', () => {
- let count
- testHook(() => ({count} = useCounter()))
+describe('useCounter', () => {
+ test('accepts default initial values', () => {
+ let count
+ testHook(() => ({count} = useCounter()))
- expect(count).toBe(0)
-})
+ expect(count).toBe(0)
+ })
-test('accepts a default initial value for `count`', () => {
- let count
- testHook(() => ({count} = useCounter({})))
+ test('accepts a default initial value for `count`', () => {
+ let count
+ testHook(() => ({count} = useCounter({})))
- expect(count).toBe(0)
-})
+ expect(count).toBe(0)
+ })
+
+ test('provides an `increment` function', () => {
+ let count, increment
+ testHook(() => ({count, increment} = useCounter({step: 2})))
+
+ expect(count).toBe(0)
+ act(() => {
+ increment()
+ })
+ expect(count).toBe(2)
+ })
+
+ test('provides an `decrement` function', () => {
+ let count, decrement
+ testHook(() => ({count, decrement} = useCounter({step: 2})))
+
+ expect(count).toBe(0)
+ act(() => {
+ decrement()
+ })
+ expect(count).toBe(-2)
+ })
-test('provides an `increment` function', () => {
- let count, increment
- testHook(() => ({count, increment} = useCounter({step: 2})))
+ test('accepts a default initial value for `step`', () => {
+ let count, increment
+ testHook(() => ({count, increment} = useCounter({})))
- expect(count).toBe(0)
- act(() => {
- increment()
+ expect(count).toBe(0)
+ act(() => {
+ increment()
+ })
+ expect(count).toBe(1)
})
- expect(count).toBe(2)
})
-test('provides an `decrement` function', () => {
- let count, decrement
- testHook(() => ({count, decrement} = useCounter({step: 2})))
+// using unmount function to check useEffect behavior when unmounting
+describe('useDocumentTitle', () => {
+ test('sets a title', () => {
+ document.title = 'original title'
+ testHook(() => {
+ useDocumentTitle('modified title')
+ })
- expect(count).toBe(0)
- act(() => {
- decrement()
+ expect(document.title).toBe('modified title')
+ })
+
+ test('returns to original title when component is unmounted', () => {
+ document.title = 'original title'
+ const {unmount} = testHook(() => {
+ useDocumentTitle('modified title')
+ })
+
+ unmount()
+ expect(document.title).toBe('original title')
})
- expect(count).toBe(-2)
})
-test('accepts a default initial value for `step`', () => {
- let count, increment
- testHook(() => ({count, increment} = useCounter({})))
+// using rerender function to test calling useEffect multiple times
+describe('useCall', () => {
+ test('calls once on render', () => {
+ const spy = jest.fn()
+ testHook(() => {
+ useCall(spy, [])
+ })
+ expect(spy).toHaveBeenCalledTimes(1)
+ })
+
+ test('calls again if deps change', () => {
+ let deps = [false]
+ const spy = jest.fn()
+ const {rerender} = testHook(() => {
+ useCall(spy, deps)
+ })
+ expect(spy).toHaveBeenCalledTimes(1)
+
+ deps = [true]
+ rerender()
+ expect(spy).toHaveBeenCalledTimes(2)
+ })
+
+ test('does not call again if deps are the same', () => {
+ let deps = [false]
+ const spy = jest.fn()
+ const {rerender} = testHook(() => {
+ useCall(spy, deps)
+ })
+ expect(spy).toHaveBeenCalledTimes(1)
- expect(count).toBe(0)
- act(() => {
- increment()
+ deps = [false]
+ rerender()
+ expect(spy).toHaveBeenCalledTimes(1)
})
- expect(count).toBe(1)
})
diff --git a/examples/react-hooks.js b/examples/react-hooks.js
index fad0de4c..251644cd 100644
--- a/examples/react-hooks.js
+++ b/examples/react-hooks.js
@@ -1,10 +1,25 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
-function useCounter({initialCount = 0, step = 1} = {}) {
+export function useCounter({initialCount = 0, step = 1} = {}) {
const [count, setCount] = useState(initialCount)
const increment = () => setCount(c => c + step)
const decrement = () => setCount(c => c - step)
return {count, increment, decrement}
}
-export default useCounter
+export function useDocumentTitle(title) {
+ const [originalTitle, setOriginalTitle] = useState(document.title)
+ useEffect(() => {
+ setOriginalTitle(document.title)
+ document.title = title
+ return () => {
+ document.title = originalTitle
+ }
+ }, [title])
+}
+
+export function useCall(callback, deps) {
+ useEffect(() => {
+ callback()
+ }, deps)
+}
diff --git a/src/__tests__/test-hook.js b/src/__tests__/test-hook.js
index f6bce9bd..673e9497 100644
--- a/src/__tests__/test-hook.js
+++ b/src/__tests__/test-hook.js
@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
import 'jest-dom/extend-expect'
import {testHook, cleanup} from '../'
@@ -12,3 +12,29 @@ test('testHook calls the callback', () => {
test('confirm we can safely call a React Hook from within the callback', () => {
testHook(() => useState())
})
+test('returns a function to unmount component', () => {
+ let isMounted
+ const {unmount} = testHook(() => {
+ useEffect(() => {
+ isMounted = true
+ return () => {
+ isMounted = false
+ }
+ })
+ })
+ expect(isMounted).toBe(true)
+ unmount()
+ expect(isMounted).toBe(false)
+})
+test('returns a function to rerender component', () => {
+ let renderCount = 0
+ const {rerender} = testHook(() => {
+ useEffect(() => {
+ renderCount++
+ })
+ })
+
+ expect(renderCount).toBe(1)
+ rerender()
+ expect(renderCount).toBe(2)
+})
diff --git a/src/index.js b/src/index.js
index 0f4c7d47..78b5ffae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -67,7 +67,15 @@ function TestHook({callback}) {
}
function testHook(callback) {
- render()
+ const {unmount, rerender: rerenderComponent} = render(
+ ,
+ )
+ return {
+ unmount,
+ rerender: () => {
+ rerenderComponent()
+ },
+ }
}
function cleanup() {
From 8436c7ee12d50358bd814aef2eeaa3d4fa07a901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Matulionis=20dos=20Santos?=
Date: Mon, 11 Feb 2019 20:19:05 -0200
Subject: [PATCH 029/360] fix(TS): typing of testHook (#292)
* Adds typing for testHook return
* Adds typings section to contributing.md
---
CONTRIBUTING.md | 8 ++++++++
typings/index.d.ts | 7 ++++++-
2 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8642e953..89f9e343 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -58,6 +58,14 @@ inside:
pre-commit
```
+### Add typings
+
+If your PR introduced some changes in the API, you are more than welcome to
+modify the Typescript type definition to reflect those changes. Just modify the
+`/typings/index.d.ts` file accordingly. If you have never seen Typescript
+definitions before, you can read more about it in its
+[documentation pages](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
+
## Help needed
Please checkout the [the open issues][issues]
diff --git a/typings/index.d.ts b/typings/index.d.ts
index c87c817c..fa844fd2 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -19,6 +19,11 @@ export type RenderResult = {
asFragment: () => DocumentFragment
} & {[P in keyof Q]: BoundFunction}
+export type HookResult = {
+ rerender: () => void
+ unmount: () => boolean
+}
+
export interface RenderOptions {
container?: HTMLElement
baseElement?: HTMLElement
@@ -43,7 +48,7 @@ export function render(
/**
* Renders a test component that calls back to the test.
*/
-export function testHook(callback: () => void): void
+export function testHook(callback: () => void): HookResult
/**
* Unmounts React trees that were mounted with render.
From 41f032da1f4c1303ebb849bc39cef80a4f85339d Mon Sep 17 00:00:00 2001
From: Alex Krolick
Date: Mon, 11 Feb 2019 15:42:38 -0800
Subject: [PATCH 030/360] Add TS to PR checklist (#294)
---
.github/PULL_REQUEST_TEMPLATE.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index ee765ccf..4db2aeff 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -36,6 +36,7 @@ merge of your pull request!
- [ ] Documentation
- [ ] Tests
+- [ ] Typescript definitions updated
- [ ] Ready to be merged
- [ ] Added myself to contributors table
From cf12d91da8f1e9323ba06344901cb2dd2f1026ac Mon Sep 17 00:00:00 2001
From: Daniel K
Date: Tue, 12 Feb 2019 16:52:36 +0100
Subject: [PATCH 031/360] feat: wrapper for testHook (#296)
* feat: wrapper for testHook
* Ignore eslint rule
---
.all-contributorsrc | 12 ++++++++++++
README.md | 5 ++---
src/__tests__/test-hook.js | 24 +++++++++++++++++++++++-
src/index.js | 15 ++++++++++-----
typings/index.d.ts | 6 +++++-
5 files changed, 52 insertions(+), 10 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index dea90e11..2a0be067 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -668,6 +668,18 @@
"example",
"test"
]
+ },
+ {
+ "login": "FredyC",
+ "name": "Daniel K.",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/1096340?v=4",
+ "profile": "https://github.com/FredyC",
+ "contributions": [
+ "bug",
+ "code",
+ "ideas",
+ "test"
+ ]
}
]
}
diff --git a/README.md b/README.md
index 49de2ab5..7ae254f6 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ practices.
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -216,8 +216,7 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [ Royston Shufflebotham](https://github.com/RoystonS) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [ chrbala](https://github.com/chrbala) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
-| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [ Alex Zherdev](https://github.com/alexzherdev) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") | [ André Matulionis dos Santos](https://twitter.com/Andrewmat) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Code") [💡](#example-Andrewmat "Examples") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Tests") |
-
+| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [ Alex Zherdev](https://github.com/alexzherdev) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") | [ André Matulionis dos Santos](https://twitter.com/Andrewmat) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Code") [💡](#example-Andrewmat "Examples") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Tests") | [ Daniel K.](https://github.com/FredyC) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AFredyC "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Code") [🤔](#ideas-FredyC "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Tests") |
This project follows the [all-contributors][all-contributors] specification.
diff --git a/src/__tests__/test-hook.js b/src/__tests__/test-hook.js
index 673e9497..00b5cc80 100644
--- a/src/__tests__/test-hook.js
+++ b/src/__tests__/test-hook.js
@@ -1,4 +1,4 @@
-import {useState, useEffect} from 'react'
+import React, {useState, useEffect} from 'react'
import 'jest-dom/extend-expect'
import {testHook, cleanup} from '../'
@@ -38,3 +38,25 @@ test('returns a function to rerender component', () => {
rerender()
expect(renderCount).toBe(2)
})
+test('accepts wrapper option to wrap rendered hook with', () => {
+ const ctxA = React.createContext()
+ const ctxB = React.createContext()
+ const useHook = () => {
+ return React.useContext(ctxA) * React.useContext(ctxB)
+ }
+ let actual
+ testHook(
+ () => {
+ actual = useHook()
+ },
+ {
+ // eslint-disable-next-line react/display-name
+ wrapper: props => (
+
+
+
+ ),
+ },
+ )
+ expect(actual).toBe(12)
+})
diff --git a/src/index.js b/src/index.js
index 78b5ffae..5410d0dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -66,14 +66,19 @@ function TestHook({callback}) {
return null
}
-function testHook(callback) {
- const {unmount, rerender: rerenderComponent} = render(
- ,
- )
+function testHook(callback, options = {}) {
+ const toRender = () => {
+ const hookRender =
+ if (options.wrapper) {
+ return React.createElement(options.wrapper, null, hookRender)
+ }
+ return hookRender
+ }
+ const {unmount, rerender: rerenderComponent} = render(toRender())
return {
unmount,
rerender: () => {
- rerenderComponent()
+ rerenderComponent(toRender())
},
}
}
diff --git a/typings/index.d.ts b/typings/index.d.ts
index fa844fd2..941e4bfc 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -24,6 +24,10 @@ export type HookResult = {
unmount: () => boolean
}
+export type HookOptions = {
+ wrapper: React.FunctionComponent
+}
+
export interface RenderOptions {
container?: HTMLElement
baseElement?: HTMLElement
@@ -48,7 +52,7 @@ export function render(
/**
* Renders a test component that calls back to the test.
*/
-export function testHook(callback: () => void): HookResult
+export function testHook(callback: () => void, options?: Partial): HookResult
/**
* Unmounts React trees that were mounted with render.
From 2bbf924a2de09e00a620993938f888127ca1acd5 Mon Sep 17 00:00:00 2001
From: Daniel K
Date: Tue, 12 Feb 2019 18:42:21 +0100
Subject: [PATCH 032/360] feat: testHook returns result ref object (#297)
---
src/__tests__/test-hook.js | 17 ++++++++++++++++-
src/index.js | 16 +++++++++++++---
typings/index.d.ts | 8 ++++++--
3 files changed, 35 insertions(+), 6 deletions(-)
diff --git a/src/__tests__/test-hook.js b/src/__tests__/test-hook.js
index 00b5cc80..4b54bfb8 100644
--- a/src/__tests__/test-hook.js
+++ b/src/__tests__/test-hook.js
@@ -1,6 +1,6 @@
import React, {useState, useEffect} from 'react'
import 'jest-dom/extend-expect'
-import {testHook, cleanup} from '../'
+import {testHook, cleanup, act} from '../'
afterEach(cleanup)
@@ -60,3 +60,18 @@ test('accepts wrapper option to wrap rendered hook with', () => {
)
expect(actual).toBe(12)
})
+test('returns result ref with latest result from hook execution', () => {
+ function useCounter({initialCount = 0, step = 1} = {}) {
+ const [count, setCount] = React.useState(initialCount)
+ const increment = () => setCount(c => c + step)
+ const decrement = () => setCount(c => c - step)
+ return {count, increment, decrement}
+ }
+
+ const {result} = testHook(useCounter)
+ expect(result.current.count).toBe(0)
+ act(() => {
+ result.current.increment()
+ })
+ expect(result.current.count).toBe(1)
+})
diff --git a/src/index.js b/src/index.js
index 5410d0dd..31f99339 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,14 +61,23 @@ function render(
}
}
-function TestHook({callback}) {
- callback()
+function TestHook({callback, children}) {
+ children(callback())
return null
}
function testHook(callback, options = {}) {
+ const result = {
+ current: null,
+ }
const toRender = () => {
- const hookRender =
+ const hookRender = (
+
+ {res => {
+ result.current = res
+ }}
+
+ )
if (options.wrapper) {
return React.createElement(options.wrapper, null, hookRender)
}
@@ -76,6 +85,7 @@ function testHook(callback, options = {}) {
}
const {unmount, rerender: rerenderComponent} = render(toRender())
return {
+ result,
unmount,
rerender: () => {
rerenderComponent(toRender())
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 941e4bfc..16594936 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -19,7 +19,8 @@ export type RenderResult = {
asFragment: () => DocumentFragment
} & {[P in keyof Q]: BoundFunction}
-export type HookResult = {
+export type HookResult = {
+ result: React.MutableRefObject
rerender: () => void
unmount: () => boolean
}
@@ -52,7 +53,10 @@ export function render(
/**
* Renders a test component that calls back to the test.
*/
-export function testHook(callback: () => void, options?: Partial): HookResult
+export function testHook(
+ callback: () => T,
+ options?: Partial,
+): HookResult
/**
* Unmounts React trees that were mounted with render.
From 0abee6f4f28d4bc1d5846da9a886f2a0ca32bd43 Mon Sep 17 00:00:00 2001
From: Alex Krolick
Date: Tue, 12 Feb 2019 19:56:07 -0800
Subject: [PATCH 033/360] docs: add link to docs repo in PR template (#298)
---
.github/PULL_REQUEST_TEMPLATE.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 4db2aeff..df54e83c 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -34,7 +34,7 @@ merge of your pull request!
-- [ ] Documentation
+- [ ] Documentation added to the [docs site](https://github.com/alexkrolick/testing-library-docs)
- [ ] Tests
- [ ] Typescript definitions updated
- [ ] Ready to be merged
From d41366594f55b49cb5ced38d42195af2ac5eddaa Mon Sep 17 00:00:00 2001
From: mohamedmagdy17593 <40938625+mohamedmagdy17593@users.noreply.github.com>
Date: Sun, 17 Feb 2019 16:46:18 +0200
Subject: [PATCH 034/360] refactor: remove duplication of act (#304)
---
.all-contributorsrc | 9 +++++++++
README.md | 5 +++--
src/index.js | 12 +++++-------
3 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 2a0be067..48b07d8e 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -680,6 +680,15 @@
"ideas",
"test"
]
+ },
+ {
+ "login": "mohamedmagdy17593",
+ "name": "mohamedmagdy17593",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/40938625?v=4",
+ "profile": "https://github.com/mohamedmagdy17593",
+ "contributions": [
+ "code"
+ ]
}
]
}
diff --git a/README.md b/README.md
index 7ae254f6..fe43640c 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ practices.
[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
-[](#contributors)
+[](#contributors)
[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
[![Join the community on Spectrum][spectrum-badge]][spectrum]
@@ -216,7 +216,8 @@ Thanks goes to these people ([emoji key][emojis]):
| [ dadamssg](https://github.com/dadamssg) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=dadamssg "Documentation") | [ Yazan Aabed](https://www.yaabed.com/) [📝](#blog-YazanAabeed "Blogposts") | [ Tim](https://github.com/timbonicus) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Atimbonicus "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=timbonicus "Tests") | [ Divyanshu Maithani](http://divyanshu.xyz) [✅](#tutorial-divyanshu013 "Tutorials") [📹](#video-divyanshu013 "Videos") | [ Deepak Grover](https://www.linkedin.com/in/metagrover) [✅](#tutorial-metagrover "Tutorials") [📹](#video-metagrover "Videos") | [ Eyal Cohen](https://github.com/eyalcohen4) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=eyalcohen4 "Documentation") | [ Peter Makowski](https://github.com/petermakowski) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=petermakowski "Documentation") |
| [ Michiel Nuyts](https://github.com/Michielnuyts) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Michielnuyts "Documentation") | [ Joe Ng'ethe](https://github.com/joeynimu) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=joeynimu "Documentation") | [ Kate](https://github.com/Enikol) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=Enikol "Documentation") | [ Sean](http://www.seanrparker.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=SeanRParker "Documentation") | [ James Long](http://jlongster.com) [🤔](#ideas-jlongster "Ideas, Planning, & Feedback") [📦](#platform-jlongster "Packaging/porting to new platform") | [ Herb Hagely](https://github.com/hhagely) [💡](#example-hhagely "Examples") | [ Alex Wendte](http://www.wendtedesigns.com/) [💡](#example-themostcolm "Examples") |
| [ Monica Powell](http://www.aboutmonica.com) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=M0nica "Documentation") | [ Vitaly Sivkov](http://sivkoff.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=sivkoff "Code") | [ Weyert de Boer](https://github.com/weyert) [🤔](#ideas-weyert "Ideas, Planning, & Feedback") [👀](#review-weyert "Reviewed Pull Requests") | [ EstebanMarin](https://github.com/EstebanMarin) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=EstebanMarin "Documentation") | [ Victor Martins](https://github.com/vctormb) [📖](https://github.com/kentcdodds/react-testing-library/commits?author=vctormb "Documentation") | [ Royston Shufflebotham](https://github.com/RoystonS) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3ARoystonS "Bug reports") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=RoystonS "Documentation") [💡](#example-RoystonS "Examples") | [ chrbala](https://github.com/chrbala) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=chrbala "Code") |
-| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [ Alex Zherdev](https://github.com/alexzherdev) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") | [ André Matulionis dos Santos](https://twitter.com/Andrewmat) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Code") [💡](#example-Andrewmat "Examples") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Tests") | [ Daniel K.](https://github.com/FredyC) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AFredyC "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Code") [🤔](#ideas-FredyC "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Tests") |
+| [ Donavon West](http://donavon.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Documentation") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=donavon "Tests") | [ Richard Maisano](https://github.com/maisano) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=maisano "Code") | [ Marco Biedermann](https://www.marcobiedermann.com) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Code") [🚧](#maintenance-marcobiedermann "Maintenance") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=marcobiedermann "Tests") | [ Alex Zherdev](https://github.com/alexzherdev) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Aalexzherdev "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=alexzherdev "Code") | [ André Matulionis dos Santos](https://twitter.com/Andrewmat) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Code") [💡](#example-Andrewmat "Examples") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=Andrewmat "Tests") | [ Daniel K.](https://github.com/FredyC) [🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AFredyC "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Code") [🤔](#ideas-FredyC "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=FredyC "Tests") | [ mohamedmagdy17593](https://github.com/mohamedmagdy17593) [💻](https://github.com/kentcdodds/react-testing-library/commits?author=mohamedmagdy17593 "Code") |
+
This project follows the [all-contributors][all-contributors] specification.
diff --git a/src/index.js b/src/index.js
index 31f99339..89a31e2c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,15 +25,13 @@ function render(
// they're passing us a custom container or not.
mountedContainers.add(container)
- if (hydrate) {
- act(() => {
+ act(() => {
+ if (hydrate) {
ReactDOM.hydrate(ui, container)
- })
- } else {
- act(() => {
+ } else {
ReactDOM.render(ui, container)
- })
- }
+ }
+ })
return {
container,
baseElement,
From e49a23fe9739becd6fb5f24f9c58cbcab004345a Mon Sep 17 00:00:00 2001
From: Alex Krolick
Date: Mon, 18 Feb 2019 17:10:47 -0800
Subject: [PATCH 035/360] feat(render): add wrapper component option (#303)
* feat(render): add wrapper component option
* feat(render): update types
* fix(types): remove unreferenced type
* fix(render): optional type for wrapper option
---
package.json | 3 ++-
src/__tests__/render.js | 21 +++++++++++++++++++
src/index.js | 46 ++++++++++++++++++++++++-----------------
typings/index.d.ts | 7 +++----
4 files changed, 53 insertions(+), 24 deletions(-)
diff --git a/package.json b/package.json
index 67bde194..54f531f1 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
},
"devDependencies": {
"@reach/router": "^1.2.1",
- "@types/react-dom": "^16.0.9",
+ "@types/react": "^16.8.3",
+ "@types/react-dom": "^16.8.2",
"axios": "^0.18.0",
"eslint-import-resolver-jest": "^2.1.1",
"history": "^4.7.2",
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index 5ee0dc6f..0ffe1322 100644
--- a/src/__tests__/render.js
+++ b/src/__tests__/render.js
@@ -90,3 +90,24 @@ it('supports fragments', () => {
cleanup()
expect(document.body.innerHTML).toBe('')
})
+
+test('renders options.wrapper around node', () => {
+ const WrapperComponent = ({children}) => (
+