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 */