Skip to content

Update NTL docs #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
May 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,27 +54,27 @@ Links:
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
[spectrum]: https://spectrum.chat/testing-library
[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square
[license]: https://github.com/kentcdodds/react-testing-library/blob/master/LICENSE
[license]: https://github.com/testing-library/react-testing-library/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/kentcdodds/react-testing-library/blob/master/CODE_OF_CONDUCT.md
[coc]: https://github.com/testing-library/react-testing-library/blob/master/CODE_OF_CONDUCT.md
[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-testing-library.svg?style=social
[github-watch]: https://github.com/kentcdodds/react-testing-library/watchers
[github-watch]: https://github.com/testing-library/react-testing-library/watchers
[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-testing-library.svg?style=social
[github-star]: https://github.com/kentcdodds/react-testing-library/stargazers
[github-star]: https://github.com/testing-library/react-testing-library/stargazers
[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
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/react-testing-library.svg?style=social
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/react-testing-library.svg?style=social
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
[all-contributors]: https://github.com/kentcdodds/all-contributors
[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
[data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
[dom-testing-lib-textmatch]: https://github.com/kentcdodds/dom-testing-library#textmatch
[bugs]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
[requests]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
[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"+
[dom-testing-lib-textmatch]: https://github.com/testing-library/dom-testing-library#textmatch
[bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
[requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
[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"+
[reactiflux]: https://www.reactiflux.com/
[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library

Expand Down
4 changes: 2 additions & 2 deletions docs/cypress-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ and `queryAllBy` commands.
## Examples

To show some simple examples (from
[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)):
[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)):

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

[gh]: https://github.com/kentcdodds/cypress-testing-library
[gh]: https://github.com/testing-library/cypress-testing-library
2 changes: 1 addition & 1 deletion docs/dom-testing-library/api-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ fireEvent[eventName](node: HTMLElement, eventProperties: Object)
```

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

```javascript
Expand Down
5 changes: 2 additions & 3 deletions docs/dom-testing-library/api-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ throws an error if no elements match.

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

### queryAllBy

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

The `...ByTestId` functions in `dom-testing-library` use the attribute
`data-testid` by default, following the precedent set by
[React Native Web](https://github.com/kentcdodds/react-testing-library/issues/1)
[React Native Web](https://github.com/testing-library/react-testing-library/issues/1)
which uses a `testID` prop to emit a `data-testid` attribute on the element, and
we recommend you adopt that attribute where possible. But if you already have an
existing codebase that uses a different attribute for this purpose, you can
Expand Down
18 changes: 9 additions & 9 deletions docs/dom-testing-library/cheatsheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ A short guide to all the exported functions in `dom-testing-library`

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

| | No Match | 1 Match | 1+ Match | Await? |
| -------------- | -------- | ------- | ---------- | ------ |
| **getBy** | throw | return | throw | No |
| **findBy** | throw | return | throw | Yes |
| **queryBy** | null | return | throw | No |
| **getAllBy** | throw | array | array | No |
| **findAllBy** | throw | array | array | Yes |
| **queryAllBy** | [] | array | array | No |
| | No Match | 1 Match | 1+ Match | Await? |
| -------------- | -------- | ------- | -------- | ------ |
| **getBy** | throw | return | throw | No |
| **findBy** | throw | return | throw | Yes |
| **queryBy** | null | return | throw | No |
| **getAllBy** | throw | array | array | No |
| **findAllBy** | throw | array | array | Yes |
| **queryAllBy** | [] | array | array | No |

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

## Other

Expand Down
3 changes: 2 additions & 1 deletion docs/ecosystem-bs-jest-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ npm install --save-dev bs-jest-dom

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

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

[gh]: https://github.com/wyze/bs-jest-dom
Expand Down
2 changes: 1 addition & 1 deletion docs/ecosystem-jest-dom.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@ Check out [jest-dom's documentation][gh] for a full list of available matchers.

- [jest-dom on GitHub][gh]

[gh]: https://github.com/gnapse/jest-dom
[gh]: https://github.com/testing-library/jest-dom
36 changes: 36 additions & 0 deletions docs/ecosystem-jest-native.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
id: ecosystem-jest-native
title: jest-native
sidebar_label: jest-native
---

[`jest-native`](https://github.com/testing-library/jest-native) is a companion
library for `native-testing-library` that provides custom element matchers for
Jest.

```
npm install --save-dev jest-native
```

```javascript
;<View>
<View testID="not-empty">
<Text testID="empty" />
</View>
<Text testID="visible">Visible Example</Text>
</View>

expect(queryByTestId(baseElement, 'not-empty')).not.toBeEmpty()
expect(getByText(baseElement, 'Visible Example')).toBeVisible()
```

> Note: when using some of these matchers, you may need to make sure you use a
> query function (like `queryByTestId`) rather than a get function (like
> `getByTestId`). Otherwise the `get*` function could throw an error before your
> assertion.

Check out
[jest-native's documentation](https://github.com/testing-library/jest-native)
for a full list of available matchers.

- [jest-native on GitHub](https://github.com/testing-library/jest-native)
6 changes: 3 additions & 3 deletions docs/learning.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ title: Learning Material
sidebar_label: Learning Material
---

- [TestingJavaScript.com](https://testingjavascript.com) 🏆 A HUGE course all about
testing JavaScript applications (See also the
[course material with many examples using react-testing-library](https://github.com/kentcdodds/react-testing-library-course))
- [TestingJavaScript.com](https://testingjavascript.com) 🏆 A HUGE course all
about testing JavaScript applications (See also the
[course material with many examples using react-testing-library](https://github.com/testing-library/react-testing-library-course))
by [Kent C. Dodds](https://github.com/kentcdodds)
- [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
- [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
Expand Down
171 changes: 171 additions & 0 deletions docs/native-testing-library/api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
---
id: api
title: API
sidebar_label: API
---

Here you'll find a high level summary of the most frequently used parts of
native-testing-library. For a more comprehensive look at what's possible, check
out the [main docs site](https://native-testing-library.com).

- [`render`](#render)
- [`act`](#act)

## `render`

```typescript
function render(
ui: React.ReactElement<any>,
options?: {
/* You won't often use this, expand below for docs on options */
}
): RenderResult
```

Create a `ReactTestRenderer` Instance.

```jsx
import { render } from 'native-testing-library'

render(<View />)
```

```javascript
import { render } from 'native-testing-library'

test('renders a message', () => {
const { container, getByText } = render(<Text>Hello, World!</Text>)
expect(getByText('Hello, world!')).toBeTruthy()
expect(container.toJSON()).toMatchInlineSnapshot(`
<Text>Hello, World!</Text>
`)
})
```

## `render` Options

Most of the time you won't need to pass any options to `render`, but when you
do, you will pass them as the second parameter. There are some important key
differences between this and `react-testing-library` that you will want to be
aware of.

### `wrapper`

Pass a React Component as the `wrapper` option to have it rendered around the
inner element. This is most useful for creating reusable custom render functions
for common data providers. See [setup](setup.md#custom-render) for examples.

### `queries`

Queries to bind. Overrides the default set from `native-testing-library` unless
merged.

```js
// Example, a function to traverse table contents
import * as tableQueries from 'my-table-query-libary'
import queries from 'native-testing-library'

const { getByRowColumn, getByText } = render(<MyTable />, {
queries: { ...queries, ...tableQueries },
})
```

See [helpers](https://www.native-testing-library.com/docs/api-helpers) for
guidance on using utility functions to create custom queries.

Custom queries can also be added globally by following the
[custom render guide](setup.md#custom-render).

## `render` Result

The `render` method returns an object that has a few properties:

### `...queries`

The most important feature of `render` is that the
[default queries](https://www.native-testing-library.com/docs/api-queries) are
automatically returned with their first argument bound to the `baseElement`.

**Example**

```javascript
const { getByText, getByTestId /* etc */ } = render(<Component />)
```

### `container`

The `ReactTestRendererInstance` result from your render. This has helpful
methods like `toTree()` and `toJSON()`.

> You should rarely use the container. There are very few instances where you
> need to access the container itself to do something you'd need to in a test.

### `baseElement`

This is the root element of your render result. By default, this is what all of
your queries will be run on, and you could also use it to do any custom
searching logic you wanted to..

### `debug`

This method is a shortcut for `console.log(prettyPrint(container.toJSON()))`.

```javascript
import { render } from 'native-testing-library'

const { debug } = render(
<View>
<Text>Hello World</Text>
</View>
)
debug()
// <View>
// <Text>
// Hello World
// </Text>
// </View>
```

This is a simple wrapper around `prettyPrint` which is also exported.

### `rerender`

Although its likely better to test updating your props the way a user would
(through events and interaction), this method will allow you to re-render your
entire tree at the base with new props.

```jsx
import { render } from 'native-testing-library'

const { rerender } = render(<NumberDisplay number={1} />)

// re-render the same component with different props
rerender(<NumberDisplay number={2} />)
```

[See the examples page](example-update-props.md)

### `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). Note
that you don't need to call this `afterEach` like you do in react testing
library because these elements aren't being added to a DOM. Use it only as
necessary.

> This method is a wrapper around ReactTestRenderer.unmount()

```javascript
import { render } from 'native-testing-library'

const { unmount } = render(<Login />)
unmount()
```

## `act`

This is a light wrapper around the
[`react-test-renderer` `act` function](https://reactjs.org/docs/test-renderer.html).
All it does is forward all arguments to the act function if your version of
react supports `act`.
15 changes: 15 additions & 0 deletions docs/native-testing-library/cheatsheet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
id: cheat-sheet
title: Printable Cheat Sheet
sidebar_label: Cheat Sheet
---

There is a printable one-page cheat sheet available for you to download. It is
intended to be a quick reference for `native-testing-library`, but is not a
complete API glossary or guide. Keep a copy of it on your desk to quickly take a
peek at the most commonly used functionality!

[Download the cheat sheet][cheatsheet]

[cheatsheet]:
https://github.com/testing-library/native-testing-library/raw/master/other/cheat-sheet.pdf
Loading