diff --git a/.all-contributorsrc b/.all-contributorsrc
index 27ba8e24..b5bb36d0 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1279,6 +1279,15 @@
"contributions": [
"doc"
]
+ },
+ {
+ "login": "ImADrafter",
+ "name": "Marcos Gómez",
+ "avatar_url": "https://avatars.githubusercontent.com/u/44379989?v=4",
+ "profile": "https://github.com/ImADrafter",
+ "contributions": [
+ "doc"
+ ]
}
],
"contributorsPerLine": 7,
diff --git a/README.md b/README.md
index f0fa3b2a..60970526 100644
--- a/README.md
+++ b/README.md
@@ -611,6 +611,9 @@ Thanks goes to these people ([emoji key][emojis]):
Angus J. Pope 📖 |
Dominik Lesch 📖 |
+
+ Marcos Gómez 📖 |
+
diff --git a/jest.config.js b/jest.config.js
index 680a9038..cf247954 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,9 +7,9 @@ module.exports = Object.assign(jestConfig, {
'./src/pure': {
// minimum coverage of jobs using React 17 and 18
branches: 80,
- functions: 84,
- lines: 89,
- statements: 89,
+ functions: 82,
+ lines: 84,
+ statements: 84,
},
},
})
diff --git a/src/__tests__/end-to-end.js b/src/__tests__/end-to-end.js
index 67affabf..cf222aec 100644
--- a/src/__tests__/end-to-end.js
+++ b/src/__tests__/end-to-end.js
@@ -11,22 +11,30 @@ const fetchAMessage = () =>
}, randomTimeout)
})
-class ComponentWithLoader extends React.Component {
- state = {loading: true}
- async componentDidMount() {
- const data = await fetchAMessage()
- this.setState({data, loading: false}) // eslint-disable-line
- }
- render() {
- if (this.state.loading) {
- return Loading...
+function ComponentWithLoader() {
+ const [state, setState] = React.useState({data: undefined, loading: true})
+ React.useEffect(() => {
+ let cancelled = false
+ fetchAMessage().then(data => {
+ if (!cancelled) {
+ setState({data, loading: false})
+ }
+ })
+
+ return () => {
+ cancelled = true
}
- return (
-
- Loaded this message: {this.state.data.returnedMessage}!
-
- )
+ }, [])
+
+ if (state.loading) {
+ return Loading...
}
+
+ return (
+
+ Loaded this message: {state.data.returnedMessage}!
+
+ )
}
describe.each([
diff --git a/src/pure.js b/src/pure.js
index dc74e9a4..0ac63feb 100644
--- a/src/pure.js
+++ b/src/pure.js
@@ -5,10 +5,17 @@ import {
prettyDOM,
configure as configureDTL,
} from '@testing-library/dom'
-import act from './act-compat'
+import act, {asyncAct} from './act-compat'
import {fireEvent} from './fire-event'
configureDTL({
+ asyncWrapper: async cb => {
+ let result
+ await asyncAct(async () => {
+ result = await cb()
+ })
+ return result
+ },
eventWrapper: cb => {
let result
act(() => {
@@ -18,7 +25,7 @@ configureDTL({
},
})
-if (typeof React.startTransition !== undefined) {
+if (React.startTransition !== undefined) {
configureDTL({
unstable_advanceTimersWrapper: cb => {
return act(cb)
diff --git a/types/index.d.ts b/types/index.d.ts
index 693f86aa..b4386996 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -34,15 +34,47 @@ export interface RenderOptions<
Q extends Queries = typeof queries,
Container extends Element | DocumentFragment = HTMLElement,
> {
+ /**
+ * By default, React Testing Library will create a div and append that div to the document.body. Your React component will be rendered in the created div. If you provide your own HTMLElement container via this option,
+ * it will not be appended to the document.body automatically.
+ *
+ * For example: If you are unit testing a `` element, it cannot be a child of a div. In this case, you can
+ * specify a table as the render container.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/api/#container
+ */
container?: Container
+ /**
+ * Defaults to the container if the container is specified. Otherwise `document.body` is used for the default. This is used as
+ * the base element for the queries as well as what is printed when you use `debug()`.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/api/#baseelement
+ */
baseElement?: Element
+ /**
+ * If `hydrate` is set to `true`, then it will render with `ReactDOM.hydrate`. This may be useful if you are using server-side
+ * rendering and use ReactDOM.hydrate to mount your components.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
+ */
hydrate?: boolean
/**
* Set to `true` if you want to force synchronous `ReactDOM.render`.
* Otherwise `render` will default to concurrent React if available.
*/
legacyRoot?: boolean
+ /**
+ * Queries to bind. Overrides the default set from DOM Testing Library unless merged.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/api/#queries
+ */
queries?: Q
+ /**
+ * 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 for examples.
+ *
+ * @see https://testing-library.com/docs/react-testing-library/api/#wrapper
+ */
wrapper?: React.ComponentType
}