Skip to content

Commit 0b3e981

Browse files
bcarroll22alexkrolick
authored andcommitted
Update NTL docs (#91)
* docs: add link to cheat sheet * move cheat sheet link to the react cheat sheet page * don't use headings for non-headings * docs: add more about NTL to docs * Delete package-lock.json * change wording on the solution * docs: add react-native image and remove library landing pages * chore: add netlify redirects * fix: update toml redirects and library links * fix: fix toml redirects
1 parent 00ff990 commit 0b3e981

31 files changed

+565
-960
lines changed

docs/contributing.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,27 +54,27 @@ Links:
5454
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
5555
[spectrum]: https://spectrum.chat/testing-library
5656
[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square
57-
[license]: https://github.com/kentcdodds/react-testing-library/blob/master/LICENSE
57+
[license]: https://github.com/testing-library/react-testing-library/blob/master/LICENSE
5858
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
5959
[prs]: http://makeapullrequest.com
6060
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
6161
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
62-
[coc]: https://github.com/kentcdodds/react-testing-library/blob/master/CODE_OF_CONDUCT.md
62+
[coc]: https://github.com/testing-library/react-testing-library/blob/master/CODE_OF_CONDUCT.md
6363
[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-testing-library.svg?style=social
64-
[github-watch]: https://github.com/kentcdodds/react-testing-library/watchers
64+
[github-watch]: https://github.com/testing-library/react-testing-library/watchers
6565
[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-testing-library.svg?style=social
66-
[github-star]: https://github.com/kentcdodds/react-testing-library/stargazers
66+
[github-star]: https://github.com/testing-library/react-testing-library/stargazers
6767
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40kentcdodds%20https%3A%2F%2Fi.8713187.xyz%2Fkentcdodds%2Freact-testing-library%20%F0%9F%91%8D
68-
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/react-testing-library.svg?style=social
68+
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/react-testing-library.svg?style=social
6969
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
7070
[all-contributors]: https://github.com/kentcdodds/all-contributors
7171
[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
7272
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
7373
[data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
74-
[dom-testing-lib-textmatch]: https://github.com/kentcdodds/dom-testing-library#textmatch
75-
[bugs]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
76-
[requests]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
77-
[good-first-issue]: https://github.com/kentcdodds/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
74+
[dom-testing-lib-textmatch]: https://github.com/testing-library/dom-testing-library#textmatch
75+
[bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
76+
[requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
77+
[good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
7878
[reactiflux]: https://www.reactiflux.com/
7979
[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library
8080

docs/cypress-testing-library/intro.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ and `queryAllBy` commands.
2929
## Examples
3030

3131
To show some simple examples (from
32-
[https://github.com/kentcdodds/cypress-testing-library/blob/master/cypress/integration/commands.spec.js](https://github.com/kentcdodds/cypress-testing-library/blob/master/cypress/integration/commands.spec.js)):
32+
[https://github.com/testing-library/cypress-testing-library/blob/master/cypress/integration/commands.spec.js](https://github.com/testing-library/cypress-testing-library/blob/master/cypress/integration/commands.spec.js)):
3333

3434
```javascript
3535
cy.getAllByText('Jackie Chan').click()
@@ -50,4 +50,4 @@ expects DOM nodes. When you pass a jQuery element as `container`, it will get
5050
the first DOM node from the collection and use that as the `container` parameter
5151
for the `dom-testing-library` functions.
5252

53-
[gh]: https://github.com/kentcdodds/cypress-testing-library
53+
[gh]: https://github.com/testing-library/cypress-testing-library

docs/dom-testing-library/api-events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ fireEvent[eventName](node: HTMLElement, eventProperties: Object)
2929
```
3030

3131
Convenience methods for firing DOM events. Check out
32-
[src/events.js](https://github.com/kentcdodds/dom-testing-library/blob/master/src/events.js)
32+
[src/events.js](https://github.com/testing-library/dom-testing-library/blob/master/src/events.js)
3333
for a full list as well as default `eventProperties`.
3434

3535
```javascript

docs/dom-testing-library/api-queries.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@ throws an error if no elements match.
2323

2424
`queryBy*` queries returns the first matching node for a query, and return
2525
`null` if no elements match. This is useful for asserting an element is not
26-
present. This throws if more than one match is found (use `queryAllBy`
27-
instead).
26+
present. This throws if more than one match is found (use `queryAllBy` instead).
2827

2928
### queryAllBy
3029

@@ -635,7 +634,7 @@ cy.getByTestId('username-input').should('exist')
635634

636635
The `...ByTestId` functions in `dom-testing-library` use the attribute
637636
`data-testid` by default, following the precedent set by
638-
[React Native Web](https://github.com/kentcdodds/react-testing-library/issues/1)
637+
[React Native Web](https://github.com/testing-library/react-testing-library/issues/1)
639638
which uses a `testID` prop to emit a `data-testid` attribute on the element, and
640639
we recommend you adopt that attribute where possible. But if you already have an
641640
existing codebase that uses a different attribute for this purpose, you can

docs/dom-testing-library/cheatsheet.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ A short guide to all the exported functions in `dom-testing-library`
99

1010
See [Which query should I use?](guide-which-query.md)
1111

12-
| | No Match | 1 Match | 1+ Match | Await? |
13-
| -------------- | -------- | ------- | ---------- | ------ |
14-
| **getBy** | throw | return | throw | No |
15-
| **findBy** | throw | return | throw | Yes |
16-
| **queryBy** | null | return | throw | No |
17-
| **getAllBy** | throw | array | array | No |
18-
| **findAllBy** | throw | array | array | Yes |
19-
| **queryAllBy** | [] | array | array | No |
12+
| | No Match | 1 Match | 1+ Match | Await? |
13+
| -------------- | -------- | ------- | -------- | ------ |
14+
| **getBy** | throw | return | throw | No |
15+
| **findBy** | throw | return | throw | Yes |
16+
| **queryBy** | null | return | throw | No |
17+
| **getAllBy** | throw | array | array | No |
18+
| **findAllBy** | throw | array | array | Yes |
19+
| **queryAllBy** | [] | array | array | No |
2020

2121
- **ByLabelText** find by label or aria-label text content
2222
- getByLabelText
@@ -91,7 +91,7 @@ See [Events API](api-events.md)
9191
- **fireEvent** trigger DOM event: `fireEvent(node, event)`
9292
- **fireEvent.\*** helpers for default event types
9393
- **click** `fireEvent.click(node)`
94-
- [See all supported events](https://github.com/kentcdodds/dom-testing-library/blob/master/src/events.js)
94+
- [See all supported events](https://github.com/testing-library/dom-testing-library/blob/master/src/events.js)
9595

9696
## Other
9797

docs/ecosystem-bs-jest-dom.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ npm install --save-dev bs-jest-dom
1414

1515
- [bs-jest-dom on GitHub][gh]
1616

17-
Check out [jest-dom's documentation](https://github.com/gnapse/jest-dom) for a
17+
Check out
18+
[jest-dom's documentation](https://github.com/testing-library/jest-dom) for a
1819
full list of available matchers.
1920

2021
[gh]: https://github.com/wyze/bs-jest-dom

docs/ecosystem-jest-dom.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,4 @@ Check out [jest-dom's documentation][gh] for a full list of available matchers.
2727

2828
- [jest-dom on GitHub][gh]
2929

30-
[gh]: https://github.com/gnapse/jest-dom
30+
[gh]: https://github.com/testing-library/jest-dom

docs/ecosystem-jest-native.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
id: ecosystem-jest-native
3+
title: jest-native
4+
sidebar_label: jest-native
5+
---
6+
7+
[`jest-native`](https://github.com/testing-library/jest-native) is a companion
8+
library for `native-testing-library` that provides custom element matchers for
9+
Jest.
10+
11+
```
12+
npm install --save-dev jest-native
13+
```
14+
15+
```javascript
16+
;<View>
17+
<View testID="not-empty">
18+
<Text testID="empty" />
19+
</View>
20+
<Text testID="visible">Visible Example</Text>
21+
</View>
22+
23+
expect(queryByTestId(baseElement, 'not-empty')).not.toBeEmpty()
24+
expect(getByText(baseElement, 'Visible Example')).toBeVisible()
25+
```
26+
27+
> Note: when using some of these matchers, you may need to make sure you use a
28+
> query function (like `queryByTestId`) rather than a get function (like
29+
> `getByTestId`). Otherwise the `get*` function could throw an error before your
30+
> assertion.
31+
32+
Check out
33+
[jest-native's documentation](https://github.com/testing-library/jest-native)
34+
for a full list of available matchers.
35+
36+
- [jest-native on GitHub](https://github.com/testing-library/jest-native)

docs/learning.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ title: Learning Material
44
sidebar_label: Learning Material
55
---
66

7-
- [TestingJavaScript.com](https://testingjavascript.com) 🏆 A HUGE course all about
8-
testing JavaScript applications (See also the
9-
[course material with many examples using react-testing-library](https://github.com/kentcdodds/react-testing-library-course))
7+
- [TestingJavaScript.com](https://testingjavascript.com) 🏆 A HUGE course all
8+
about testing JavaScript applications (See also the
9+
[course material with many examples using react-testing-library](https://github.com/testing-library/react-testing-library-course))
1010
by [Kent C. Dodds](https://github.com/kentcdodds)
1111
- [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
1212
- [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)

docs/native-testing-library/api.md

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
id: api
3+
title: API
4+
sidebar_label: API
5+
---
6+
7+
Here you'll find a high level summary of the most frequently used parts of
8+
native-testing-library. For a more comprehensive look at what's possible, check
9+
out the [main docs site](https://native-testing-library.com).
10+
11+
- [`render`](#render)
12+
- [`act`](#act)
13+
14+
## `render`
15+
16+
```typescript
17+
function render(
18+
ui: React.ReactElement<any>,
19+
options?: {
20+
/* You won't often use this, expand below for docs on options */
21+
}
22+
): RenderResult
23+
```
24+
25+
Create a `ReactTestRenderer` Instance.
26+
27+
```jsx
28+
import { render } from 'native-testing-library'
29+
30+
render(<View />)
31+
```
32+
33+
```javascript
34+
import { render } from 'native-testing-library'
35+
36+
test('renders a message', () => {
37+
const { container, getByText } = render(<Text>Hello, World!</Text>)
38+
expect(getByText('Hello, world!')).toBeTruthy()
39+
expect(container.toJSON()).toMatchInlineSnapshot(`
40+
<Text>Hello, World!</Text>
41+
`)
42+
})
43+
```
44+
45+
## `render` Options
46+
47+
Most of the time you won't need to pass any options to `render`, but when you
48+
do, you will pass them as the second parameter. There are some important key
49+
differences between this and `react-testing-library` that you will want to be
50+
aware of.
51+
52+
### `wrapper`
53+
54+
Pass a React Component as the `wrapper` option to have it rendered around the
55+
inner element. This is most useful for creating reusable custom render functions
56+
for common data providers. See [setup](setup.md#custom-render) for examples.
57+
58+
### `queries`
59+
60+
Queries to bind. Overrides the default set from `native-testing-library` unless
61+
merged.
62+
63+
```js
64+
// Example, a function to traverse table contents
65+
import * as tableQueries from 'my-table-query-libary'
66+
import queries from 'native-testing-library'
67+
68+
const { getByRowColumn, getByText } = render(<MyTable />, {
69+
queries: { ...queries, ...tableQueries },
70+
})
71+
```
72+
73+
See [helpers](https://www.native-testing-library.com/docs/api-helpers) for
74+
guidance on using utility functions to create custom queries.
75+
76+
Custom queries can also be added globally by following the
77+
[custom render guide](setup.md#custom-render).
78+
79+
## `render` Result
80+
81+
The `render` method returns an object that has a few properties:
82+
83+
### `...queries`
84+
85+
The most important feature of `render` is that the
86+
[default queries](https://www.native-testing-library.com/docs/api-queries) are
87+
automatically returned with their first argument bound to the `baseElement`.
88+
89+
**Example**
90+
91+
```javascript
92+
const { getByText, getByTestId /* etc */ } = render(<Component />)
93+
```
94+
95+
### `container`
96+
97+
The `ReactTestRendererInstance` result from your render. This has helpful
98+
methods like `toTree()` and `toJSON()`.
99+
100+
> You should rarely use the container. There are very few instances where you
101+
> need to access the container itself to do something you'd need to in a test.
102+
103+
### `baseElement`
104+
105+
This is the root element of your render result. By default, this is what all of
106+
your queries will be run on, and you could also use it to do any custom
107+
searching logic you wanted to..
108+
109+
### `debug`
110+
111+
This method is a shortcut for `console.log(prettyPrint(container.toJSON()))`.
112+
113+
```javascript
114+
import { render } from 'native-testing-library'
115+
116+
const { debug } = render(
117+
<View>
118+
<Text>Hello World</Text>
119+
</View>
120+
)
121+
debug()
122+
// <View>
123+
// <Text>
124+
// Hello World
125+
// </Text>
126+
// </View>
127+
```
128+
129+
This is a simple wrapper around `prettyPrint` which is also exported.
130+
131+
### `rerender`
132+
133+
Although its likely better to test updating your props the way a user would
134+
(through events and interaction), this method will allow you to re-render your
135+
entire tree at the base with new props.
136+
137+
```jsx
138+
import { render } from 'native-testing-library'
139+
140+
const { rerender } = render(<NumberDisplay number={1} />)
141+
142+
// re-render the same component with different props
143+
rerender(<NumberDisplay number={2} />)
144+
```
145+
146+
[See the examples page](example-update-props.md)
147+
148+
### `unmount`
149+
150+
This will cause the rendered component to be unmounted. This is useful for
151+
testing what happens when your component is removed from the page (like testing
152+
that you don't leave event handlers hanging around causing memory leaks). Note
153+
that you don't need to call this `afterEach` like you do in react testing
154+
library because these elements aren't being added to a DOM. Use it only as
155+
necessary.
156+
157+
> This method is a wrapper around ReactTestRenderer.unmount()
158+
159+
```javascript
160+
import { render } from 'native-testing-library'
161+
162+
const { unmount } = render(<Login />)
163+
unmount()
164+
```
165+
166+
## `act`
167+
168+
This is a light wrapper around the
169+
[`react-test-renderer` `act` function](https://reactjs.org/docs/test-renderer.html).
170+
All it does is forward all arguments to the act function if your version of
171+
react supports `act`.
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
id: cheat-sheet
3+
title: Printable Cheat Sheet
4+
sidebar_label: Cheat Sheet
5+
---
6+
7+
There is a printable one-page cheat sheet available for you to download. It is
8+
intended to be a quick reference for `native-testing-library`, but is not a
9+
complete API glossary or guide. Keep a copy of it on your desk to quickly take a
10+
peek at the most commonly used functionality!
11+
12+
[Download the cheat sheet][cheatsheet]
13+
14+
[cheatsheet]:
15+
https://github.com/testing-library/native-testing-library/raw/master/other/cheat-sheet.pdf

0 commit comments

Comments
 (0)