From c223e6ebd04cb76d2285489356c346d3034438e9 Mon Sep 17 00:00:00 2001 From: Sergey Grishchenko Date: Sun, 14 Apr 2019 21:55:23 +0300 Subject: [PATCH 1/4] use react-test-renderer instead react-testing-library --- cleanup-after-each.js | 1 - package-lock.json | 134 +++++++++++----------------------------- package.json | 8 +-- renovate.json | 4 +- src/index.js | 30 ++++++--- test/asyncHook.test.js | 4 +- test/customHook.test.js | 4 +- test/testHook.test.js | 4 +- test/useContext.test.js | 4 +- test/useEffect.test.js | 4 +- test/useMemo.test.js | 4 +- test/useReducer.test.js | 4 +- test/useRef.test.js | 4 +- test/useState.test.js | 4 +- typings/index.d.ts | 11 ++-- 15 files changed, 75 insertions(+), 149 deletions(-) delete mode 100644 cleanup-after-each.js diff --git a/cleanup-after-each.js b/cleanup-after-each.js deleted file mode 100644 index 2617fe93..00000000 --- a/cleanup-after-each.js +++ /dev/null @@ -1 +0,0 @@ -afterEach(require('./lib').cleanup) diff --git a/package-lock.json b/package-lock.json index 73f7bc0e..10c3fcc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1565,15 +1565,6 @@ } } }, - "@jest/types": { - "version": "24.5.0", - "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.5.0.tgz", - "integrity": "sha512-kN7RFzNMf2R8UDadPOl6ReyI+MT8xfqRuAnuVL+i4gwjv/zubdDK+EDeLHYwq1j0CSSR2W/MmgaRlMZJzXdmVA==", - "requires": { - "@types/istanbul-lib-coverage": "^1.1.0", - "@types/yargs": "^12.0.9" - } - }, "@samverschueren/stream-to-observable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", @@ -1583,11 +1574,6 @@ "any-observable": "^0.3.0" } }, - "@sheerun/mutationobserver-shim": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", - "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==" - }, "@types/babel__core": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.0.tgz", @@ -1629,11 +1615,6 @@ "@babel/types": "^7.3.0" } }, - "@types/istanbul-lib-coverage": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.0.tgz", - "integrity": "sha512-ohkhb9LehJy+PA40rDtGAji61NCgdtKLAlFoYp4cnuuQEswwdK3vz9SOIkkyc3wrk8dzjphQApNs56yyXLStaQ==" - }, "@types/prop-types": { "version": "15.7.0", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz", @@ -1659,7 +1640,8 @@ "@types/yargs": { "version": "12.0.9", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-12.0.9.tgz", - "integrity": "sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==" + "integrity": "sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==", + "dev": true }, "abab": { "version": "2.0.0", @@ -1753,12 +1735,14 @@ "ansi-regex": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -2579,6 +2563,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "requires": { "color-name": "1.1.3" } @@ -2586,7 +2571,8 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "combined-stream": { "version": "1.0.7", @@ -2943,17 +2929,6 @@ "esutils": "^2.0.2" } }, - "dom-testing-library": { - "version": "3.18.2", - "resolved": "https://registry.npmjs.org/dom-testing-library/-/dom-testing-library-3.18.2.tgz", - "integrity": "sha512-+nYUgGhHarrCY8kLVmyHlgM+IGwBXXrYsWIJB6vpAx2ne9WFgKfwMGcOkkTKQhuAro0sP6RIuRGfm5NF3+ccmQ==", - "requires": { - "@babel/runtime": "^7.3.4", - "@sheerun/mutationobserver-shim": "^0.3.2", - "pretty-format": "^24.5.0", - "wait-for-expect": "^1.1.0" - } - }, "domexception": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", @@ -3673,8 +3648,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3695,14 +3669,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3717,20 +3689,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3847,8 +3816,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3860,7 +3828,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3875,7 +3842,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3883,14 +3849,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3909,7 +3873,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3990,8 +3953,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4003,7 +3965,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4089,8 +4050,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4126,7 +4086,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4146,7 +4105,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4190,14 +4148,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -8244,17 +8200,6 @@ "fast-diff": "^1.1.2" } }, - "pretty-format": { - "version": "24.5.0", - "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.5.0.tgz", - "integrity": "sha512-/3RuSghukCf8Riu5Ncve0iI+BzVkbRU5EeUoArKARZobREycuH5O4waxvaNIloEXdb0qwgmEAed5vTpX1HNROQ==", - "requires": { - "@jest/types": "^24.5.0", - "ansi-regex": "^4.0.0", - "ansi-styles": "^3.2.0", - "react-is": "^16.8.4" - } - }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -8352,30 +8297,30 @@ "scheduler": "^0.13.6" } }, - "react-dom": { + "react-is": { + "version": "16.8.4", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", + "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==", + "dev": true + }, + "react-test-renderer": { "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", - "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz", + "integrity": "sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==", "dev": true, "requires": { - "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", + "react-is": "^16.8.6", "scheduler": "^0.13.6" - } - }, - "react-is": { - "version": "16.8.4", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", - "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==" - }, - "react-testing-library": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/react-testing-library/-/react-testing-library-6.0.3.tgz", - "integrity": "sha512-tN0A6nywSOoL8kriqru3rSdw31PxuquL7xnW6xBI0aTNw0VO3kZQtaEa0npUH9dX0MIsSunB0nbElRrc4VtAzw==", - "requires": { - "@babel/runtime": "^7.4.2", - "dom-testing-library": "^3.18.2" + }, + "dependencies": { + "react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==", + "dev": true + } } }, "read-pkg": { @@ -9866,11 +9811,6 @@ "browser-process-hrtime": "^0.1.2" } }, - "wait-for-expect": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.1.1.tgz", - "integrity": "sha512-vd9JOqqEcBbCDhARWhW85ecjaEcfBLuXgVBqatfS3iw6oU4kzAcs+sCNjF+TC9YHPImCW7ypsuQc+htscIAQCw==" - }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", diff --git a/package.json b/package.json index 004f47f7..0c1d6788 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "lib", "src", "typings", - "cleanup-after-each.js", "README.md", "LICENSE.md" ], @@ -28,8 +27,7 @@ "contributors:add": "all-contributors add" }, "dependencies": { - "@babel/runtime": "^7.4.2", - "react-testing-library": "^6.0.3" + "@babel/runtime": "^7.4.2" }, "devDependencies": { "@babel/cli": "7.4.3", @@ -54,13 +52,13 @@ "prettier-eslint": "8.8.2", "prettier-eslint-cli": "4.7.1", "react": "16.8.6", - "react-dom": "16.8.6", + "react-test-renderer": "16.8.6", "typescript": "3.4.3", "typings-tester": "0.3.2" }, "peerDependencies": { "react": "^16.8.0", - "react-dom": "^16.8.0" + "react-test-renderer": "^16.8.0" }, "jest": { "collectCoverage": true, diff --git a/renovate.json b/renovate.json index f45d8f11..4f39080e 100644 --- a/renovate.json +++ b/renovate.json @@ -1,5 +1,3 @@ { - "extends": [ - "config:base" - ] + "extends": ["config:base"] } diff --git a/src/index.js b/src/index.js index f1c396de..439cf021 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { render, cleanup, act } from 'react-testing-library' +import { create, act } from 'react-test-renderer' function TestHook({ callback, hookProps, children }) { try { @@ -40,24 +40,34 @@ function resultContainer() { } } -function renderHook(callback, { initialProps, ...options } = {}) { +function renderHook(callback, { initialProps, wrapper } = {}) { const { result, updateResult, addResolver } = resultContainer() const hookProps = { current: initialProps } - const toRender = () => ( - - {updateResult} - - ) + const wrapUiIfNeeded = (innerElement) => + wrapper ? React.createElement(wrapper, null, innerElement) : innerElement + + const toRender = () => + wrapUiIfNeeded( + + {updateResult} + + ) - const { unmount, rerender: rerenderComponent } = render(toRender(), options) + let testRenderer + act(() => { + testRenderer = create(toRender()) + }) + const { unmount, update } = testRenderer return { result, waitForNextUpdate: () => new Promise((resolve) => addResolver(resolve)), rerender: (newProps = hookProps.current) => { hookProps.current = newProps - rerenderComponent(toRender()) + act(() => { + update(toRender()) + }) }, unmount } @@ -70,4 +80,4 @@ function testHook(...args) { return renderHook(...args) } -export { renderHook, cleanup, act, testHook } +export { renderHook, act, testHook } diff --git a/test/asyncHook.test.js b/test/asyncHook.test.js index ad4b947a..0049e343 100644 --- a/test/asyncHook.test.js +++ b/test/asyncHook.test.js @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react' -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('async hook tests', () => { const getSomeName = () => Promise.resolve('Betty') @@ -16,8 +16,6 @@ describe('async hook tests', () => { return name } - afterEach(cleanup) - test('should wait for next update', async () => { const { result, waitForNextUpdate } = renderHook(() => useName()) diff --git a/test/customHook.test.js b/test/customHook.test.js index 3df4b63b..72dd1bac 100644 --- a/test/customHook.test.js +++ b/test/customHook.test.js @@ -1,5 +1,5 @@ import { useState, useCallback } from 'react' -import { renderHook, cleanup, act } from 'src' +import { renderHook, act } from 'src' describe('custom hook tests', () => { function useCounter() { @@ -11,8 +11,6 @@ describe('custom hook tests', () => { return { count, increment, decrement } } - afterEach(cleanup) - test('should increment counter', () => { const { result } = renderHook(() => useCounter()) diff --git a/test/testHook.test.js b/test/testHook.test.js index ea6dc7f7..54674909 100644 --- a/test/testHook.test.js +++ b/test/testHook.test.js @@ -1,9 +1,7 @@ import React, { useState, useEffect } from 'react' -import { testHook, cleanup, act } from 'src' +import { testHook, act } from 'src' describe('testHook tests', () => { - afterEach(cleanup) - test('testHook calls the callback', () => { const spy = jest.fn() testHook(spy) diff --git a/test/useContext.test.js b/test/useContext.test.js index 6e8d9208..e8e16a82 100644 --- a/test/useContext.test.js +++ b/test/useContext.test.js @@ -1,9 +1,7 @@ import React, { createContext, useContext } from 'react' -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('useContext tests', () => { - afterEach(cleanup) - test('should get default value from context', () => { const TestContext = createContext('foo') diff --git a/test/useEffect.test.js b/test/useEffect.test.js index 6d2998e5..d5c96d2f 100644 --- a/test/useEffect.test.js +++ b/test/useEffect.test.js @@ -1,9 +1,7 @@ import { useEffect, useLayoutEffect } from 'react' -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('useEffect tests', () => { - afterEach(cleanup) - test('should handle useEffect hook', () => { const sideEffect = { [1]: false, [2]: false } diff --git a/test/useMemo.test.js b/test/useMemo.test.js index 0783abf8..3abeb855 100644 --- a/test/useMemo.test.js +++ b/test/useMemo.test.js @@ -1,9 +1,7 @@ import { useMemo, useCallback } from 'react' -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('useCallback tests', () => { - afterEach(cleanup) - test('should handle useMemo hook', () => { const { result, rerender } = renderHook(({ value }) => useMemo(() => ({ value }), [value]), { initialProps: { value: 1 } diff --git a/test/useReducer.test.js b/test/useReducer.test.js index 9e515297..092d585d 100644 --- a/test/useReducer.test.js +++ b/test/useReducer.test.js @@ -1,9 +1,7 @@ import { useReducer } from 'react' -import { renderHook, cleanup, act } from 'src' +import { renderHook, act } from 'src' describe('useReducer tests', () => { - afterEach(cleanup) - test('should handle useReducer hook', () => { const reducer = (state, action) => (action.type === 'inc' ? state + 1 : state) const { result } = renderHook(() => useReducer(reducer, 0)) diff --git a/test/useRef.test.js b/test/useRef.test.js index c88ddc47..63dd241d 100644 --- a/test/useRef.test.js +++ b/test/useRef.test.js @@ -1,9 +1,7 @@ import { useRef, useImperativeHandle } from 'react' -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('useHook tests', () => { - afterEach(cleanup) - test('should handle useRef hook', () => { const { result } = renderHook(() => useRef()) diff --git a/test/useState.test.js b/test/useState.test.js index 71d5ab94..ebb943f8 100644 --- a/test/useState.test.js +++ b/test/useState.test.js @@ -1,9 +1,7 @@ import { useState } from 'react' -import { renderHook, cleanup, act } from 'src' +import { renderHook, act } from 'src' describe('useState tests', () => { - afterEach(cleanup) - test('should use setState value', () => { const { result } = renderHook(() => useState('foo')) diff --git a/typings/index.d.ts b/typings/index.d.ts index 204d2579..f5228d22 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -1,20 +1,19 @@ -import { cleanup, act, RenderOptions, RenderResult } from 'react-testing-library' - export function renderHook( callback: (props: P) => R, options?: { - initialProps?: P - } & RenderOptions + initialProps?: P, + wrapper?: React.ComponentType + } ): { readonly result: { readonly current: R, readonly error: Error } readonly waitForNextUpdate: () => Promise - readonly unmount: RenderResult['unmount'] + readonly unmount: () => boolean readonly rerender: (hookProps?: P) => void } export const testHook: typeof renderHook -export { cleanup, act } +export function act(callback: () => void): void From bfa2bed8cd8ee7c933e42d67ad8ac38be45820f1 Mon Sep 17 00:00:00 2001 From: Sergey Grishchenko Date: Sun, 14 Apr 2019 22:27:39 +0300 Subject: [PATCH 2/4] unmount wrapped to act, docs updated --- README.md | 31 ++++--------------------------- src/index.js | 6 +++++- 2 files changed, 9 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index caa55790..f5562af9 100644 --- a/README.md +++ b/README.md @@ -76,11 +76,9 @@ export default useCounter ```js // useCounter.test.js -import { renderHook, cleanup, act } from 'react-hooks-testing-library' +import { renderHook, act } from 'react-hooks-testing-library' import useCounter from './useCounter' -afterEach(cleanup) - test('should increment counter', () => { const { result } = renderHook(() => useCounter()) @@ -117,8 +115,9 @@ Renders a test component that will call the provided `callback`, including any h #### Arguments - `callback` (`function()`) - function to call each render. This function should call one or more hooks for testing. -- `options` (`object`) - accepts the [same options as `react-testing-library`'s `render` function](https://testing-library.com/docs/react-testing-library/api#render-options), as well as: +- `options` (`object`) - accept the following settings: - `initialProps` (`object`) - the initial values to pass to the `callback` function + - `wrapper` (`component`) - 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 #### Returns @@ -129,31 +128,9 @@ Renders a test component that will call the provided `callback`, including any h - `rerender` (`function([newProps])`) - function to rerender the test component including any hooks called in the `callback` function. If `newProps` are passed, the will replace the `initialProps` passed the the `callback` function for future renders. - `unmount` (`function()`) - function to unmount the test component, commonly used to trigger cleanup effects for `useEffect` hooks. -### `cleanup()` - -Unmounts any React trees that were mounted with [renderHook](#renderhookcallback-options). - -This is the same [`cleanup` function](https://testing-library.com/docs/react-testing-library/api#cleanup) that is exported by `react-testing-library`. - -Optionally, it is possible to import `cleanup` in a global test file. Using that way, it isn't necessary to run `afterEach(cleanup)` on every test script. - -```js -// in package.json -"jest": { - // ... - // use this if Jest version < 24 - "setupTestFrameworkScriptFile": "/src/setupTests.js", - // or if Jest version >= 24 - "setupFilesAfterEnv": ["/src/setupTests.js"], -} - -// src/setupTests.js -import 'react-hooks-testing-library/cleanup-after-each'; -``` - ### `act(callback)` -This is the same [`act` function](https://testing-library.com/docs/react-testing-library/api#act) that is exported by `react-testing-library`. +This is the same [`act` function](https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks) that is exported by `react-test-renderer`. ## Contributors diff --git a/src/index.js b/src/index.js index 439cf021..376a233a 100644 --- a/src/index.js +++ b/src/index.js @@ -69,7 +69,11 @@ function renderHook(callback, { initialProps, wrapper } = {}) { update(toRender()) }) }, - unmount + unmount: () => { + act(() => { + unmount() + }) + } } } From aeadb01d008b71b8eefa70ec4abaa5b4c52dfc86 Mon Sep 17 00:00:00 2001 From: Sergey Grishchenko Date: Tue, 16 Apr 2019 23:02:49 +0300 Subject: [PATCH 3/4] fix tests after merge --- test/suspenseHook.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/suspenseHook.test.js b/test/suspenseHook.test.js index f613664f..f7ece119 100644 --- a/test/suspenseHook.test.js +++ b/test/suspenseHook.test.js @@ -1,4 +1,4 @@ -import { renderHook, cleanup } from 'src' +import { renderHook } from 'src' describe('suspense hook tests', () => { const cache = {} @@ -31,8 +31,6 @@ describe('suspense hook tests', () => { delete cache.value }) - afterEach(cleanup) - test('should allow rendering to be suspended', async () => { const { result, waitForNextUpdate } = renderHook(() => useFetchName(true)) From 19617af9664d947f127541dc802a31825bcfd732 Mon Sep 17 00:00:00 2001 From: Sergey Grishchenko Date: Sat, 20 Apr 2019 18:33:22 +0300 Subject: [PATCH 4/4] fix docs and run all-contributors --- .all-contributorsrc | 11 +++++++++++ README.md | 8 +++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index fefe290d..5d094e77 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -62,6 +62,17 @@ "bug", "review" ] + }, + { + "login": "sgrishchenko", + "name": "Sergei Grishchenko", + "avatar_url": "https://avatars3.githubusercontent.com/u/15995890?v=4", + "profile": "https://github.com/sgrishchenko", + "contributions": [ + "code", + "doc", + "ideas" + ] } ] } diff --git a/README.md b/README.md index f5562af9..bc34aa22 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ [![downloads](https://img.shields.io/npm/dm/react-hooks-testing-library.svg?style=flat-square)](http://www.npmtrends.com/react-hooks-testing-library) [![MIT License](https://img.shields.io/npm/l/react-hooks-testing-library.svg?style=flat-square)](https://github.com/mpeyper/react-hooks-testing-library/blob/master/LICENSE.md) -[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors) +[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/mpeyper/react-hooks-testing-library/blob/master/CODE_OF_CONDUCT.md) @@ -42,7 +42,9 @@ You don't really want to write a component solely for testing this hook and have ## The solution -The `react-hooks-testing-library` is built on top of the wonderful [`react-testing-library`](http://npm.im/react-testing-library) to create a simple test harness for React hooks that handles running them within the body of a function component, as well as providing various useful utility functions for updating the inputs and retrieving the outputs of your amazing custom hook. +The `react-hooks-testing-library` allows you to create a simple test harness for React hooks that handles running them within the body of a function component, as well as providing various useful utility functions for updating the inputs and retrieving the outputs of your amazing custom hook. + +Similarly to [`react-testing-library`](http://npm.im/react-testing-library), which this library draws much of it's inspiration from, it aims to provide a testing experience as close as possible to natively using your hook from within a real component. Using this library, you do not have to concern yourself with how to construct, render or interact with the react component in order to test your hook. You can just use the hook directly and assert the results. @@ -138,7 +140,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds -
Michael Peyper
Michael Peyper
💻 🎨 📖 🤔 🚇 📦 ⚠️ 🔧		otofu-square
otofu-square
💻		Patrick P. Henley
Patrick P. Henley
🤔 👀		Matheus Marques
Matheus Marques
💻		Dhruv Patel
Dhruv Patel
🐛 👀
+
Michael Peyper
Michael Peyper
💻 🎨 📖 🤔 🚇 📦 ⚠️ 🔧		otofu-square
otofu-square
💻		Patrick P. Henley
Patrick P. Henley
🤔 👀		Matheus Marques
Matheus Marques
💻		Dhruv Patel
Dhruv Patel
🐛 👀		Sergei Grishchenko
Sergei Grishchenko
💻 📖 🤔