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 }