@testing-library/react-hooks - npm Package Compare versions

Comparing version 5.0.0-beta.11 to 5.0.0-beta.12

lib/helpers/createTestHarness.d.ts

 /// <reference types="react" />
 import { RendererProps, WrapperComponent } from '../types/react';
-declare function createTestHarness<TProps, TResult>(rendererProps: RendererProps<TProps, TResult>, Wrapper?: WrapperComponent<TProps>, suspense?: boolean): (props?: TProps | undefined) => JSX.Element;
+declare function createTestHarness<TProps, TResult>({ callback, setValue, setError }: RendererProps<TProps, TResult>, Wrapper?: WrapperComponent<TProps>, suspense?: boolean): (props?: TProps | undefined) => JSX.Element;
 export { createTestHarness };

lib/helpers/createTestHarness.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -12,33 +12,63 @@ value: true
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _promises = require("./promises");
+var _reactErrorBoundary = require("react-error-boundary");
 
-function TestComponent({
-  hookProps,
+var _filterConsole = _interopRequireDefault(require("filter-console"));
+
+var _core = require("../core");
+
+function suppressErrorOutput() {
+  // The error output from error boundaries is notoriously difficult to suppress.  To save
+  // out users from having to work it out, we crudely suppress the output matching the patterns
+  // below.  For more information, see these issues:
+  //   - https://github.com/testing-library/react-hooks-testing-library/issues/50
+  //   - https://github.com/facebook/react/issues/11098#issuecomment-412682721
+  //   - https://github.com/facebook/react/issues/15520
+  //   - https://github.com/facebook/react/issues/18841
+  const removeConsoleFilter = (0, _filterConsole.default)([/^The above error occurred in the <TestComponent> component:/, // error boundary output
+  /^Error: Uncaught .+/ // jsdom output
+  ], {
+    methods: ['error']
+  });
+  (0, _core.addCleanup)(removeConsoleFilter);
+}
+
+function createTestHarness({
   callback,
-  setError,
-  setValue
-}) {
-  try {
+  setValue,
+  setError
+}, Wrapper, suspense = true) {
+  const TestComponent = ({
+    hookProps
+  }) => {
     // coerce undefined into TProps, so it maintains the previous behaviour
     setValue(callback(hookProps));
-  } catch (err) {
-    if ((0, _promises.isPromise)(err)) {
-      throw err;
-    } else {
-      setError(err);
-    }
-  }
+    return null;
+  };
 
-  return null;
-}
+  let resetErrorBoundary = () => {};
 
-function createTestHarness(rendererProps, Wrapper, suspense = true) {
+  const ErrorFallback = ({
+    error,
+    resetErrorBoundary: reset
+  }) => {
+    resetErrorBoundary = () => {
+      resetErrorBoundary = () => {};
+
+      reset();
+    };
+
+    setError(error);
+    return null;
+  };
+
+  suppressErrorOutput();
+
   const testHarness = props => {
-    let component = /*#__PURE__*/_react.default.createElement(TestComponent, (0, _extends2.default)({
+    resetErrorBoundary();
+
+    let component = /*#__PURE__*/_react.default.createElement(TestComponent, {
       hookProps: props
-    }, rendererProps));
+    });
 
@@ -55,3 +85,5 @@ if (Wrapper) {
 
-    return component;
+    return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+      FallbackComponent: ErrorFallback
+    }, component);
   };
@@ -58,0 +90,0 @@

lib/helpers/promises.d.ts

 declare function resolveAfter(ms: number): Promise<void>;
-export declare function callAfter(callback: () => void, ms: number): Promise<void>;
-declare function isPromise<T>(value: unknown): boolean;
-export { isPromise, resolveAfter };
+declare function callAfter(callback: () => void, ms: number): Promise<void>;
+export { resolveAfter, callAfter };

lib/helpers/promises.js

@@ -6,5 +6,4 @@ "use strict";
 });
+exports.resolveAfter = resolveAfter;
 exports.callAfter = callAfter;
-exports.isPromise = isPromise;
-exports.resolveAfter = resolveAfter;
 
@@ -18,6 +17,2 @@ function resolveAfter(ms) {
   callback();
-}
-
-function isPromise(value) {
-  return typeof value.then === 'function';
 }

lib/server/pure.js

@@ -76,5 +76,9 @@ "use strict";
       (0, _testUtils.act)(() => {
-        const serverOutput = _server.default.renderToString(testHarness(props));
+        try {
+          const serverOutput = _server.default.renderToString(testHarness(props));
 
-        container.innerHTML = serverOutput;
+          container.innerHTML = serverOutput;
+        } catch (e) {
+          rendererProps.setError(e);
+        }
       });
@@ -81,0 +85,0 @@ },

package.json

 {
   "name": "@testing-library/react-hooks",
-  "version": "5.0.0-beta.11",
+  "version": "5.0.0-beta.12",
   "description": "Simple and complete React hooks testing utilities that encourage good testing practices.",
@@ -48,3 +48,5 @@ "main": "lib/index.js",
     "@types/react-dom": ">=16.9.0",
-    "@types/react-test-renderer": ">=16.9.0"
+    "@types/react-test-renderer": ">=16.9.0",
+    "filter-console": "^0.1.1",
+    "react-error-boundary": "^3.1.0"
   },
@@ -51,0 +53,0 @@ "devDependencies": {

src/dom/__tests__/errorHook.test.ts

@@ -111,9 +111,3 @@ import { useState, useEffect } from 'react'
 
-  /*
-    These tests capture error cases that are not currently being caught successfully.
-    Refer to https://github.com/testing-library/react-hooks-testing-library/issues/308
-    for more details.
-  */
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('effect', () => {
+  describe('effect', () => {
     test('should raise effect error', () => {
@@ -120,0 +114,0 @@ const { result } = renderHook(() => useEffectError(true))

src/dom/__tests__/resultHistory.test.ts

 import { renderHook } from '..'
 
 describe('result history tests', () => {
-  let count = 0
-  function useCounter() {
-    const result = count++
-    if (result === 2) {
+  function useValue(value: number) {
+    if (value === 2) {
       throw Error('expected')
     }
-    return result
+    return value
   }
 
   test('should capture all renders states of hook', () => {
-    const { result, rerender } = renderHook(() => useCounter())
+    const { result, rerender } = renderHook((value) => useValue(value), {
+      initialProps: 0
+    })
 
@@ -19,3 +19,3 @@ expect(result.current).toEqual(0)
 
-    rerender()
+    rerender(1)
 
@@ -25,3 +25,3 @@ expect(result.current).toBe(1)
 
-    rerender()
+    rerender(2)
 
@@ -31,7 +31,12 @@ expect(result.error).toEqual(Error('expected'))
 
+    rerender(3)
+
+    expect(result.current).toBe(3)
+    expect(result.all).toEqual([0, 1, Error('expected'), 3])
+
     rerender()
 
     expect(result.current).toBe(3)
-    expect(result.all).toEqual([0, 1, Error('expected'), 3])
+    expect(result.all).toEqual([0, 1, Error('expected'), 3, 3])
   })
 })

src/helpers/promises.ts

@@ -5,3 +5,3 @@ function resolveAfter(ms: number) {
 
-export async function callAfter(callback: () => void, ms: number) {
+async function callAfter(callback: () => void, ms: number) {
   await resolveAfter(ms)
@@ -11,6 +11,2 @@ callback()
 
-function isPromise<T>(value: unknown): boolean {
-  return typeof (value as PromiseLike<T>).then === 'function'
-}
-
-export { isPromise, resolveAfter }
+export { resolveAfter, callAfter }

src/native/__tests__/errorHook.test.ts

@@ -111,9 +111,3 @@ import { useState, useEffect } from 'react'
 
-  /*
-    These tests capture error cases that are not currently being caught successfully.
-    Refer to https://github.com/testing-library/react-hooks-testing-library/issues/308
-    for more details.
-  */
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('effect', () => {
+  describe('effect', () => {
     test('should raise effect error', () => {
@@ -120,0 +114,0 @@ const { result } = renderHook(() => useEffectError(true))

src/native/__tests__/resultHistory.test.ts

 import { renderHook } from '..'
 
 describe('result history tests', () => {
-  let count = 0
-  function useCounter() {
-    const result = count++
-    if (result === 2) {
+  function useValue(value: number) {
+    if (value === 2) {
       throw Error('expected')
     }
-    return result
+    return value
   }
 
   test('should capture all renders states of hook', () => {
-    const { result, rerender } = renderHook(() => useCounter())
+    const { result, rerender } = renderHook((value) => useValue(value), {
+      initialProps: 0
+    })
 
@@ -19,3 +19,3 @@ expect(result.current).toEqual(0)
 
-    rerender()
+    rerender(1)
 
@@ -25,3 +25,3 @@ expect(result.current).toBe(1)
 
-    rerender()
+    rerender(2)
 
@@ -31,7 +31,12 @@ expect(result.error).toEqual(Error('expected'))
 
+    rerender(3)
+
+    expect(result.current).toBe(3)
+    expect(result.all).toEqual([0, 1, Error('expected'), 3])
+
     rerender()
 
     expect(result.current).toBe(3)
-    expect(result.all).toEqual([0, 1, Error('expected'), 3])
+    expect(result.all).toEqual([0, 1, Error('expected'), 3, 3])
   })
 })

src/server/__tests__/errorHook.test.ts

@@ -122,9 +122,3 @@ import { useState, useEffect } from 'react'
 
-  /*
-    These tests capture error cases that are not currently being caught successfully.
-    Refer to https://github.com/testing-library/react-hooks-testing-library/issues/308
-    for more details.
-  */
-  // eslint-disable-next-line jest/no-disabled-tests
-  describe.skip('effect', () => {
+  describe('effect', () => {
     test('should raise effect error', () => {
@@ -131,0 +125,0 @@ const { result, hydrate } = renderHook(() => useEffectError(true))

src/server/pure.ts

@@ -23,4 +23,8 @@ import ReactDOMServer from 'react-dom/server'
       act(() => {
-        const serverOutput = ReactDOMServer.renderToString(testHarness(props))
-        container.innerHTML = serverOutput
+        try {
+          const serverOutput = ReactDOMServer.renderToString(testHarness(props))
+          container.innerHTML = serverOutput
+        } catch (e: unknown) {
+          rendererProps.setError(e as Error)
+        }
       })
@@ -27,0 +31,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153558

increased by1.77%

Number of package files

113

increased by0.89%

Lines of code

3662

increased by1.75%

Worsened metrics

Dependency count

9

increased by28.57%

Dependency changes

• + Addedfilter-console@^0.1.1

• + Addedreact-error-boundary@^3.1.0

• + Addedfilter-console@0.1.1(transitive)

• + Addedreact-error-boundary@3.1.4(transitive)