diff --git a/.all-contributorsrc b/.all-contributorsrc index 5ea4dc36..b8a61f52 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -145,7 +145,8 @@ "avatar_url": "https://avatars3.githubusercontent.com/u/3806031?v=4", "profile": "https://jsjoe.io", "contributions": [ - "tutorial" + "tutorial", + "test" ] }, { @@ -593,6 +594,15 @@ "contributions": [ "doc" ] + }, + { + "login": "Laishuxin", + "name": "Laishuxin", + "avatar_url": "https://avatars.githubusercontent.com/u/56504759?v=4", + "profile": "https://github.com/Laishuxin", + "contributions": [ + "doc" + ] } ], "skipCi": true, diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml index 37aacd7e..41dde974 100644 --- a/.github/workflows/validate.yml +++ b/.github/workflows/validate.yml @@ -9,7 +9,12 @@ on: - 'beta' - 'alpha' - '!all-contributors/**' - pull_request: {} + pull_request: + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + jobs: main: # ignore all-contributors PRs @@ -20,9 +25,6 @@ jobs: react: [16.9.0, ^16, ^17] runs-on: ubuntu-latest steps: - - name: 🛑 Cancel Previous Runs - uses: styfle/cancel-workflow-action@0.9.1 - - name: ⬇️ Checkout repo uses: actions/checkout@v2 @@ -45,7 +47,7 @@ jobs: run: npm run validate - name: ⬆️ Upload coverage report - uses: codecov/codecov-action@v2.0.3 + uses: codecov/codecov-action@v2.1.0 release: needs: main @@ -55,9 +57,6 @@ jobs: contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha', github.ref) && github.event_name == 'push' }} steps: - - name: 🛑 Cancel Previous Runs - uses: styfle/cancel-workflow-action@0.9.1 - - name: ⬇️ Checkout repo uses: actions/checkout@v2 diff --git a/README.md b/README.md index 88f0944b..969e6bc7 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,34 @@ [![Tweet](https://img.shields.io/twitter/url/https/github.com/testing-library/react-hooks-testing-library.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20react-hooks-testing-library%20by%20%40testing-library%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Freact-hooks-testing-library%20%F0%9F%91%8D) +## A Note about React 18 Support + +If you are using the current version of `react-testing-library`, replace + +```js +import { renderHook } from '@testing-library/react-hooks' +``` + +with + +```js +import { renderHook } from '@testing-library/react' +``` + +Once replaced, `@testing-library/react-hooks` can be uninstalled. + +### Details + +As part of the changes for React 18, it has been decided that the `renderHook` API provided by this +library will instead be included as official additions to both `react-testing-library` +([PR](https://github.com/testing-library/react-testing-library/pull/991)) and +`react-native-testing-library` +([PR](https://github.com/callstack/react-native-testing-library/pull/923)) with the intention being +to provide a more cohesive and consistent implementation for our users. + +Please be patient as we finalise these changes in the respective testing libraries. +In the mean time you can install `@testing-library/react@^13.1` + ## Table of Contents @@ -146,9 +174,9 @@ to test against. It also does not come installed with a specific renderer, we cu [`react-test-renderer`](https://www.npmjs.com/package/react-test-renderer) and [`react-dom`](https://www.npmjs.com/package/react-dom). You only need to install one of them, however, if you do have both installed, we will use `react-test-renderer` as the default. For more -information see the [installation docs](https://react-hooks-testing-library.com/#installation). -Generally, the installed versions for `react` and the selected renderer should have matching -versions: +information see the +[installation docs](https://react-hooks-testing-library.com/installation#renderer). Generally, the +installed versions for `react` and the selected renderer should have matching versions: ```sh npm install react@^16.9.0 @@ -186,7 +214,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Vince Malone
💻
Sebastian Weber
📝
Christian Gill
📖 -
JavaScript Joe
✅ +
JavaScript Joe
✅ ⚠️
Sarah Dayan
📦 @@ -249,6 +277,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Robert Snow
⚠️
Chris Chen
⚠️
Masious
📖 +
Laishuxin
📖 diff --git a/docs/api-reference.md b/docs/api-reference.md index d8d36f89..6a95b87f 100644 --- a/docs/api-reference.md +++ b/docs/api-reference.md @@ -327,7 +327,7 @@ variable to `true` before importing `@testing-library/react-hooks` will also dis If you are using [a pure import](/installation#pure-imports), you are running your tests in an environment that does not support `beforeEach` and `afterEach`, or if the automatic suppression is not available to you for some other reason, then you can use the `suppressErrorOutput` export to -manually start and top suppress the output: +manually start and stop suppressing the output: ```ts import { renderHook, suppressErrorOutput } from '@testing-library/react-hooks/pure' diff --git a/docs/installation.md b/docs/installation.md index d83eed05..13104cfe 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -42,7 +42,7 @@ your hook. We currently support two different renderers: - `react-test-renderer` - `react-dom` -When using standard import for this library (show below), we will attempt to auto-detect which +When using standard import for this library (see below), we will attempt to auto-detect which renderer you have installed and use it without needing any specific wiring up to make it happen. If you have both installed in your project, and you use the standard import (see below) the library will default to using `react-test-renderer`. @@ -63,7 +63,7 @@ import { renderHook } from '@testing-library/react-hooks' ### Act Each render also provides a unique [`act` function](https://reactjs.org/docs/test-utils.html#act) -that cannot be used with other renderers. In order to simplify with `act `function you need to use, +that cannot be used with other renderers. In order to simplify which `act `function you need to use, we also export the correct one alongside the detected renderer for you: ```js @@ -73,8 +73,8 @@ import { renderHook, act } from '@testing-library/react-hooks' ## Being specific Auto-detection is great for simplifying setup and getting out of your way, but sometimes you do need -a little but more control. If a test needs requires a specific type of environment, the import can -be appended to force a specific renderer to be use. The supported environments are: +a little bit more control. If a test needs a specific type of environment, the import can +be appended to force a specific renderer to be used. The supported environments are: - `dom` - `native` diff --git a/docs/introduction.md b/docs/introduction.md index de33732a..34467e3e 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -23,6 +23,17 @@ route: '/'
+## A Note about React 18 Support + +As part of the changes for React 18, it has been decided that the `renderHook` API provided by this +library will instead be included as official additions to both `react-testing-library` +([PR](https://github.com/testing-library/react-testing-library/pull/991)) and +`react-native-testing-library` +([PR](https://github.com/callstack/react-native-testing-library/pull/923)) with the intention being +to provide a more cohesive and consistent implementation for our users. + +Please be patient as we finalise these changes in the respective testing libraries. + ## The problem You're writing an awesome custom hook and you want to test it, but as soon as you call it you see diff --git a/docs/usage/ssr.md b/docs/usage/ssr.md index e3ff6672..88f0c9cc 100644 --- a/docs/usage/ssr.md +++ b/docs/usage/ssr.md @@ -46,7 +46,7 @@ import { renderHook, act } from '@testing-library/react-hooks/server' import useCounter from './useCounter' test('should increment counter', () => { - const { result } = renderHook(() => useCounter(0)) + const { result } = renderHook(() => useCounter()) act(() => { result.current.increment() @@ -64,7 +64,7 @@ import { renderHook, act } from '@testing-library/react-hooks/server' import useCounter from './useCounter' test('should increment counter', () => { - const { result, hydrate } = renderHook(() => useCounter(0)) + const { result, hydrate } = renderHook(() => useCounter()) hydrate() diff --git a/package.json b/package.json index 3a854f40..0b89d6eb 100644 --- a/package.json +++ b/package.json @@ -50,36 +50,40 @@ }, "dependencies": { "@babel/runtime": "^7.12.5", - "@types/react": ">=16.9.0", - "@types/react-dom": ">=16.9.0", - "@types/react-test-renderer": ">=16.9.0", "react-error-boundary": "^3.1.0" }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "4.30.0", - "@typescript-eslint/parser": "4.30.0", + "@types/react": "17.0.44", + "@types/react-dom": "17.0.15", + "@types/react-test-renderer": "17.0.1", + "@typescript-eslint/eslint-plugin": "5.11.0", + "@typescript-eslint/parser": "5.11.0", "all-contributors-cli": "6.20.0", "codecov": "3.8.3", - "cross-env": "^7.0.3", + "cross-env": "7.0.3", "docz": "2.3.1", "docz-theme-default": "1.2.0", "docz-utils": "2.3.0", "eslint": "7.32.0", "get-pkg-repo": "4.1.1", - "kcd-scripts": "11.2.0", - "prettier": "2.3.2", + "kcd-scripts": "11.2.2", + "prettier": "2.5.1", "react": "17.0.2", "react-dom": "17.0.2", "react-test-renderer": "17.0.2", - "ts-node": "10.2.1", - "typescript": "4.4.2" + "ts-node": "10.5.0", + "typescript": "4.5.5" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0", - "react-test-renderer": ">=16.9.0" + "@types/react": "^16.9.0 || ^17.0.0", + "react": "^16.9.0 || ^17.0.0", + "react-dom": "^16.9.0 || ^17.0.0", + "react-test-renderer": "^16.9.0 || ^17.0.0" }, "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, "react-dom": { "optional": true }, diff --git a/src/__tests__/ssr.test.ts b/src/__tests__/ssr.test.ts new file mode 100644 index 00000000..1119d1a1 --- /dev/null +++ b/src/__tests__/ssr.test.ts @@ -0,0 +1,18 @@ +/** + * @jest-environment node + */ +import { useState } from 'react' + +// This verifies that renderHook can be called in +// a SSR-like environment. +describe('renderHook', () => { + function useLoading() { + const [loading, setLoading] = useState(false) + return { loading, setLoading } + } + runForRenderers(['server'], ({ renderHook }) => { + test('should not throw in SSR environment', () => { + expect(() => renderHook(() => useLoading())).not.toThrowError('document is not defined') + }) + }) +}) diff --git a/src/server/pure.ts b/src/server/pure.ts index 1978f2d0..aa62a283 100644 --- a/src/server/pure.ts +++ b/src/server/pure.ts @@ -13,19 +13,17 @@ function createServerRenderer( ) { let renderProps: TProps | undefined let container: HTMLDivElement | undefined - let serverOutput: string = '' + let serverOutput = '' const testHarness = createTestHarness(rendererProps, wrapper, false) return { render(props?: TProps) { renderProps = props - act(() => { - try { - serverOutput = ReactDOMServer.renderToString(testHarness(props)) - } catch (e: unknown) { - rendererProps.setError(e as Error) - } - }) + try { + serverOutput = ReactDOMServer.renderToString(testHarness(props)) + } catch (e: unknown) { + rendererProps.setError(e as Error) + } }, hydrate() { if (container) {