diff --git a/.all-contributorsrc b/.all-contributorsrc
index 07aae31b..01f8dcda 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -256,6 +256,16 @@
"bug",
"code"
]
+ },
+ {
+ "login": "Gpx",
+ "name": "Giorgio Polvara",
+ "avatar_url": "https://avatars0.githubusercontent.com/u/767959?v=4",
+ "profile": "https://twitter.com/Gpx",
+ "contributions": [
+ "bug",
+ "ideas"
+ ]
}
]
}
diff --git a/README.md b/README.md
index a814fe0a..22a9d3ff 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
[![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]
@@ -88,6 +88,7 @@ facilitate testing implementation details). Read more about this in
* [`wait`](#wait)
* [`waitForElement`](#waitforelement)
* [`fireEvent(node: HTMLElement, event: Event)`](#fireeventnode-htmlelement-event-event)
+ * [`prettyDOM`](#prettydom)
* [`TextMatch`](#textmatch)
* [`query` APIs](#query-apis)
* [Examples](#examples)
@@ -130,7 +131,7 @@ import Fetch from '../fetch' // see the tests for a full implementation
test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => {
// Arrange
- axiosMock.get.mockResolvedValueOnce({ data: { greeting: 'hello there' } })
+ axiosMock.get.mockResolvedValueOnce({data: {greeting: 'hello there'}})
const url = '/greeting'
const {getByText, getByTestId, container} = render()
@@ -164,6 +165,21 @@ The containing DOM node of your rendered React Element (rendered using
> Tip: To get the root element of your rendered element, use `container.firstChild`.
+#### `debug`
+
+This method is a shortcut for `console.log(prettyDOM(container))`.
+
+```javascript
+const HelloWorld = () => Hello World
+const {debug} = render()
+debug()
+//
+//
Hello World
+//
+```
+
+Learn more about [`prettyDOM`](#prettydom) below.
+
#### `rerender`
It'd probably be better if you test the component that's doing the prop updating
@@ -468,6 +484,32 @@ fireEvent.click(getElementByText('Submit'), rightClick)
// default `button` property for click events is set to `0` which is a left click.
```
+### `prettyDOM`
+
+This helper function can be used to print out readable representation of the DOM
+tree of a node. This can be helpful for instance when debugging tests.
+
+It is defined as:
+
+```typescript
+function prettyDOM(node: HTMLElement, maxLength?: number): string
+```
+
+It receives the root node to print out, and an optional extra argument to limit
+the size of the resulting string, for cases when it becomes too large.
+
+This function is usually used alongside `console.log` to temporarily print out
+DOM trees during tests for debugging purposes:
+
+```javascript
+const HelloWorld = () => Hello World
+const {container} = render()
+console.log(prettyDOM(container))
+//
+//
Hello World
+//
+```
+
## `TextMatch`
Several APIs accept a `TextMatch` which can be a `string`, `regex` or a
@@ -808,7 +850,7 @@ Thanks goes to these people ([emoji key][emojis]):
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
Anto Aravinth](https://github.com/antoaravinth)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [β οΈ](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [π](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [
Jonah Moses](https://github.com/JonahMoses)
[π](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
Εukasz Gandecki](http://team.thebrain.pro)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [β οΈ](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [π](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [
Ivan Babak](https://sompylasar.github.io)
[π](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [π€](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓa](http://gnapse.github.io)
[π¬](#question-gnapse "Answering Questions") [π»](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Code") [π](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Documentation") | [
Josef Maxx Blake](http://jomaxx.com)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Code") [π](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Documentation") [β οΈ](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Tests") |
| [
Michal Baranowski](https://twitter.com/baranovskim)
[π](#blog-mbaranovski "Blogposts") [β
](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[π](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [π](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[π](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [
Christian](http://Chriswcs.github.io)
[β οΈ](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") | [
Alex Krolick](https://alexkrolick.com)
[π¬](#question-alexkrolick "Answering Questions") [π](https://github.com/kentcdodds/react-testing-library/commits?author=alexkrolick "Documentation") [π‘](#example-alexkrolick "Examples") [π€](#ideas-alexkrolick "Ideas, Planning, & Feedback") | [
Johann Hubert Sonntagbauer](https://github.com/johann-sonntagbauer)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Code") [π](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Documentation") [β οΈ](https://github.com/kentcdodds/react-testing-library/commits?author=johann-sonntagbauer "Tests") |
-| [
Maddi Joyce](http://www.maddijoyce.com)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=maddijoyce "Code") | [
Ryan Vice](http://www.vicesoftware.com)
[π](https://github.com/kentcdodds/react-testing-library/commits?author=RyanAtViceSoftware "Documentation") | [
Ian Wilson](https://ianwilson.io)
[π](#blog-iwilsonq "Blogposts") [β
](#tutorial-iwilsonq "Tutorials") | [
Daniel](https://github.com/InExtremaRes)
[π](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AInExtremaRes "Bug reports") [π»](https://github.com/kentcdodds/react-testing-library/commits?author=InExtremaRes "Code") |
+| [
Maddi Joyce](http://www.maddijoyce.com)
[π»](https://github.com/kentcdodds/react-testing-library/commits?author=maddijoyce "Code") | [
Ryan Vice](http://www.vicesoftware.com)
[π](https://github.com/kentcdodds/react-testing-library/commits?author=RyanAtViceSoftware "Documentation") | [
Ian Wilson](https://ianwilson.io)
[π](#blog-iwilsonq "Blogposts") [β
](#tutorial-iwilsonq "Tutorials") | [
Daniel](https://github.com/InExtremaRes)
[π](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AInExtremaRes "Bug reports") [π»](https://github.com/kentcdodds/react-testing-library/commits?author=InExtremaRes "Code") | [
Giorgio Polvara](https://twitter.com/Gpx)
[π](https://github.com/kentcdodds/react-testing-library/issues?q=author%3AGpx "Bug reports") [π€](#ideas-Gpx "Ideas, Planning, & Feedback") |
diff --git a/package.json b/package.json
index e94aeae6..5a38f46a 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,8 @@
"extends": "./node_modules/kcd-scripts/eslint.js",
"rules": {
"react/prop-types": "off",
- "import/no-unassigned-import": "off"
+ "import/no-unassigned-import": "off",
+ "import/named": "off"
}
},
"eslintIgnore": [
diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js
new file mode 100644
index 00000000..4cab1ea9
--- /dev/null
+++ b/src/__tests__/debug.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import {render} from '../'
+
+beforeEach(() => {
+ jest.spyOn(console, 'log').mockImplementation(() => {})
+})
+
+afterEach(() => {
+ console.log.mockRestore()
+})
+
+test('debug pretty prints the container', () => {
+ const HelloWorld = () => Hello World
+ const {debug} = render()
+ debug()
+ expect(console.log).toHaveBeenCalledTimes(1)
+ expect(console.log).toHaveBeenCalledWith(
+ expect.stringContaining('Hello World'),
+ )
+})
+
+/* eslint no-console:0 */
diff --git a/src/index.js b/src/index.js
index 4a637b90..8733b67e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,13 @@
import ReactDOM from 'react-dom'
import {Simulate} from 'react-dom/test-utils'
-import {bindElementToQueries, wait, fireEvent, waitForElement} from 'dom-testing-library'
+import {bindElementToQueries, prettyDOM} from 'dom-testing-library'
function render(ui, {container = document.createElement('div')} = {}) {
ReactDOM.render(ui, container)
return {
container,
+ // eslint-disable-next-line no-console
+ debug: () => console.log(prettyDOM(container)),
unmount: () => ReactDOM.unmountComponentAtNode(container),
rerender: rerenderUi => {
render(rerenderUi, {container})
@@ -40,12 +42,6 @@ syntheticEvents.forEach(eventName => {
})
})
-export {
- render,
- Simulate,
- wait,
- waitForElement,
- fireEvent,
- renderIntoDocument,
- cleanup,
-}
+// just re-export everything from dom-testing-library
+export * from 'dom-testing-library'
+export {render, Simulate, renderIntoDocument, cleanup}