Skip to content

Commit d905a03

Browse files
alexkrolickalexkrolick
committed
split up readme content
1 parent 4777343 commit d905a03

28 files changed

+3769
-2787
lines changed

‎docs/contributing.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
id: contributing
3+
title: Contributing
4+
sidebar_label: Contributing
5+
---
6+
7+
## License
8+
9+
`react-testing-library` is distributed under the open-source MIT license
10+
11+
## Issues
12+
13+
_Looking to contribute? Look for the [Good First Issue][good-first-issue]
14+
label._
15+
16+
### 🐛 Bugs
17+
18+
Please file an issue for bugs, missing documentation, or unexpected behavior.
19+
20+
[**See Bugs**][bugs]
21+
22+
### 💡 Feature Requests
23+
24+
Please file an issue to suggest new features. Vote on feature requests by adding
25+
a 👍. This helps maintainers prioritize what to work on.
26+
27+
[**See Feature Requests**][requests]
28+
29+
### ❓ Questions
30+
31+
For questions related to using the library, please visit a support community
32+
instead of filing an issue on GitHub.
33+
34+
- [Spectrum][spectrum]
35+
- [Reactiflux on Discord][reactiflux]
36+
- [Stack Overflow][stackoverflow]
37+
38+
<!--
39+
Links:
40+
-->
41+
42+
<!-- prettier-ignore-start -->
43+
44+
[npm]: https://www.npmjs.com/
45+
[node]: https://nodejs.org
46+
[build-badge]: https://img.shields.io/travis/kentcdodds/react-testing-library.svg?style=flat-square
47+
[build]: https://travis-ci.org/kentcdodds/react-testing-library
48+
[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/react-testing-library.svg?style=flat-square
49+
[coverage]: https://codecov.io/github/kentcdodds/react-testing-library
50+
[version-badge]: https://img.shields.io/npm/v/react-testing-library.svg?style=flat-square
51+
[package]: https://www.npmjs.com/package/react-testing-library
52+
[downloads-badge]: https://img.shields.io/npm/dm/react-testing-library.svg?style=flat-square
53+
[npmtrends]: http://www.npmtrends.com/react-testing-library
54+
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
55+
[spectrum]: https://spectrum.chat/react-testing-library
56+
[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
58+
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
59+
[prs]: http://makeapullrequest.com
60+
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
61+
[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
63+
[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
65+
[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
67+
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%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
69+
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
70+
[all-contributors]: https://github.com/kentcdodds/all-contributors
71+
[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
72+
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
73+
[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"+
78+
[reactiflux]: https://www.reactiflux.com/
79+
[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library
80+
81+
<!-- prettier-ignore-end -->

‎docs/example-external.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
id: example-external
3+
title: External Examples
4+
sidebar_label: External Examples
5+
---
6+
7+
> We're in the process of moving examples to
8+
> [`react-testing-library-examples`](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples).
9+
10+
You'll find examples of testing with different libraries in
11+
[the `examples` directory](https://github.com/kentcdodds/react-testing-library/blob/master/examples).
12+
Some included are:
13+
14+
- [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-redux.js)
15+
- [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-router.js)
16+
- [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-context.js)
17+
18+
You can also find react-testing-library examples at
19+
[react-testing-examples.com](https://react-testing-examples.com/jest-rtl/).
20+
21+
<!--
22+
Links:
23+
-->
24+
25+
<!-- prettier-ignore-start -->
26+
27+
[npm]: https://www.npmjs.com/
28+
[node]: https://nodejs.org
29+
[build-badge]: https://img.shields.io/travis/kentcdodds/react-testing-library.svg?style=flat-square
30+
[build]: https://travis-ci.org/kentcdodds/react-testing-library
31+
[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/react-testing-library.svg?style=flat-square
32+
[coverage]: https://codecov.io/github/kentcdodds/react-testing-library
33+
[version-badge]: https://img.shields.io/npm/v/react-testing-library.svg?style=flat-square
34+
[package]: https://www.npmjs.com/package/react-testing-library
35+
[downloads-badge]: https://img.shields.io/npm/dm/react-testing-library.svg?style=flat-square
36+
[npmtrends]: http://www.npmtrends.com/react-testing-library
37+
[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
38+
[spectrum]: https://spectrum.chat/react-testing-library
39+
[license-badge]: https://img.shields.io/npm/l/react-testing-library.svg?style=flat-square
40+
[license]: https://github.com/kentcdodds/react-testing-library/blob/master/LICENSE
41+
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
42+
[prs]: http://makeapullrequest.com
43+
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
44+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
45+
[coc]: https://github.com/kentcdodds/react-testing-library/blob/master/CODE_OF_CONDUCT.md
46+
[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/react-testing-library.svg?style=social
47+
[github-watch]: https://github.com/kentcdodds/react-testing-library/watchers
48+
[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/react-testing-library.svg?style=social
49+
[github-star]: https://github.com/kentcdodds/react-testing-library/stargazers
50+
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-testing-library%20by%20%40kentcdodds%20https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-testing-library%20%F0%9F%91%8D
51+
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/react-testing-library.svg?style=social
52+
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
53+
[all-contributors]: https://github.com/kentcdodds/all-contributors
54+
[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
55+
[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
56+
[data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
57+
[dom-testing-lib-textmatch]: https://github.com/kentcdodds/dom-testing-library#textmatch
58+
[bugs]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
59+
[requests]: https://github.com/kentcdodds/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
60+
[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"+
61+
[reactiflux]: https://www.reactiflux.com/
62+
[stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library
63+
64+
<!-- prettier-ignore-end -->

‎docs/example-intro.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
id: example-intro
3+
title: Example
4+
sidebar_label: Example
5+
---
6+
7+
Example file: `__tests__/fetch.test.js`
8+
9+
## Imports
10+
11+
```jsx
12+
// import dependencies
13+
import React from "react";
14+
15+
// import react-testing methods
16+
import {
17+
render,
18+
fireEvent,
19+
cleanup,
20+
waitForElement
21+
} from "react-testing-library";
22+
23+
// add custom jest matchers from jest-dom
24+
import "jest-dom/extend-expect";
25+
26+
// the axios mock is in __mocks__/
27+
// see https://jestjs.io/docs/en/manual-mocks
28+
import axiosMock from "axios";
29+
30+
// the component to test
31+
// see the tests for a full implementation
32+
import Fetch from "../fetch";
33+
```
34+
35+
## Tests
36+
37+
```jsx
38+
// automatically unmount and cleanup DOM after the test is finished.
39+
afterEach(cleanup);
40+
41+
test("loads and displays greeting", async () => {
42+
// Arrange
43+
// Act
44+
// Assert
45+
});
46+
```
47+
48+
### Arrange
49+
50+
```jsx
51+
const url = "/greeting";
52+
const { getByText, getByTestId, container, asFragment } = render(
53+
<Fetch url={url} />
54+
);
55+
```
56+
57+
### Act
58+
59+
```jsx
60+
axiosMock.get.mockResolvedValueOnce({
61+
data: { greeting: "hello there" }
62+
});
63+
64+
fireEvent.click(getByText("Load Greeting"));
65+
66+
// Wait until the mocked `get` request promise resolves and
67+
// the component calls setState and re-renders.
68+
// `waitForElement` waits until the callback doesn't throw an error
69+
70+
const greetingTextNode = await waitForElement(() =>
71+
// getByTestId throws an error if it cannot find an element
72+
getByTestId("greeting-text")
73+
);
74+
```
75+
76+
### Assert
77+
78+
```jsx
79+
expect(axiosMock.get).toHaveBeenCalledTimes(1);
80+
expect(axiosMock.get).toHaveBeenCalledWith(url);
81+
expect(getByTestId("greeting-text")).toHaveTextContent("hello there");
82+
expect(getByTestId("ok-button")).toHaveAttribute("disabled");
83+
84+
// snapshots work great with regular DOM nodes!
85+
expect(container.firstChild).toMatchSnapshot();
86+
87+
// you can also use get a `DocumentFragment`,
88+
// which is useful if you want to compare nodes across render
89+
expect(asFragment()).toMatchSnapshot();
90+
```
91+
92+
## Full Example
93+
94+
Tying it all together:
95+
96+
<details>
97+
98+
<summary>Full Example File</summary>
99+
100+
```jsx
101+
// __tests__/fetch.test.js
102+
import React from "react";
103+
import {
104+
render,
105+
fireEvent,
106+
cleanup,
107+
waitForElement
108+
} from "react-testing-library";
109+
import "jest-dom/extend-expect";
110+
import axiosMock from "axios";
111+
import Fetch from "../fetch";
112+
113+
afterEach(cleanup);
114+
115+
test("loads and displays greeting", async () => {
116+
const url = "/greeting";
117+
const { getByText, getByTestId } = render(<Fetch url={url} />);
118+
119+
axiosMock.get.mockResolvedValueOnce({
120+
data: { greeting: "hello there" }
121+
});
122+
123+
fireEvent.click(getByText("Load Greeting"));
124+
125+
const greetingTextNode = await waitForElement(() =>
126+
getByTestId("greeting-text")
127+
);
128+
129+
expect(axiosMock.get).toHaveBeenCalledTimes(1);
130+
expect(axiosMock.get).toHaveBeenCalledWith(url);
131+
expect(getByTestId("greeting-text")).toHaveTextContent("hello there");
132+
expect(getByTestId("ok-button")).toHaveAttribute("disabled");
133+
});
134+
```
135+
136+
</details>

0 commit comments

Comments
 (0)