Add new tests for typescript implementation

Author: Joschua Schneider

src/__tests__/ErrorBoundary.spec.tsx

@@ -0,0 +1,115 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+import { ErrorBoundary } from "../ErrorBoundary"
+
+/**
+ * Mock console and suppress errors.
+ */
+let consoleSpy: jest.SpyInstance | null = null
+
+beforeEach(() => {
+  consoleSpy = jest.spyOn(console, "error").mockImplementation()
+})
+
+afterEach(() => {
+  consoleSpy?.mockRestore()
+})
+
+/**
+ * Helper Components
+ */
+
+const ExplosionErrorMessage = "💥"
+const Explosion = () => {
+  throw new Error(ExplosionErrorMessage)
+}
+
+/**
+ * Test ErrorBoundary component
+ */
+
+test("[No Error] Renders children from props.children", async () => {
+  const onDidCatch = jest.fn()
+
+  render(
+    <ErrorBoundary onDidCatch={onDidCatch}>
+      <p>Children</p>
+    </ErrorBoundary>
+  )
+
+  expect(screen.getByText("Children")).toBeInTheDocument()
+  // No errors should be catched here!
+  expect(onDidCatch).toHaveBeenCalledTimes(0)
+  expect(console.error).toHaveBeenCalledTimes(0)
+})
+
+test("[No Error] Renders children from props.render()", async () => {
+  const onDidCatch = jest.fn()
+
+  render(
+    <ErrorBoundary onDidCatch={onDidCatch} render={() => <p>Children</p>} />
+  )
+
+  expect(screen.getByText("Children")).toBeInTheDocument()
+  // No errors should be catched here!
+  expect(onDidCatch).toHaveBeenCalledTimes(0)
+  expect(console.error).toHaveBeenCalledTimes(0)
+})
+
+test("[Error] Renders nothing on error (props.children) and calls onDidCatch", async () => {
+  const onDidCatch = jest.fn()
+
+  const { container } = render(
+    <ErrorBoundary onDidCatch={onDidCatch}>
+      <p>Children</p>
+      <Explosion />
+    </ErrorBoundary>
+  )
+
+  expect(container).toBeEmptyDOMElement()
+  // React and testing-library calls console.error when a boundary catches, onDidCatch should be called
+  expect(onDidCatch).toHaveBeenCalledTimes(1)
+  expect(console.error).toHaveBeenCalledTimes(2)
+})
+
+test("[Error] Renders nothing on error (props.render())", async () => {
+  const onDidCatch = jest.fn()
+
+  const { container } = render(
+    <ErrorBoundary
+      onDidCatch={onDidCatch}
+      render={() => (
+        <>
+          <p>Children</p>
+          <Explosion />
+        </>
+      )}
+    />
+  )
+
+  expect(container).toBeEmptyDOMElement()
+  // React and testing-library calls console.error when a boundary catches
+  expect(console.error).toHaveBeenCalledTimes(2)
+})
+
+test("[Error] Renders props.renderError()", async () => {
+  const onDidCatch = jest.fn()
+
+  render(
+    <ErrorBoundary
+      onDidCatch={onDidCatch}
+      render={() => (
+        <>
+          <p>Children</p>
+          <Explosion />
+        </>
+      )}
+      renderError={({ error }) => <p>{error.message}</p>}
+    />
+  )
+
+  expect(screen.getByText(ExplosionErrorMessage)).toBeInTheDocument()
+  // React and testing-library calls console.error when a boundary catches
+  expect(console.error).toHaveBeenCalledTimes(2)
+})

src/__tests__/use-error-boundary.spec.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from "react"
+import { act, render, screen, fireEvent } from "@testing-library/react"
+import useErrorBoundary from "../index"
+import { UseErrorBoundaryOptions } from "../../lib"
+import { renderHook } from "@testing-library/react-hooks"
+
+/**
+ * Mock console and suppress errors.
+ */
+let consoleSpy: jest.SpyInstance | null = null
+
+beforeEach(() => {
+  consoleSpy = jest.spyOn(console, "error").mockImplementation()
+})
+
+afterEach(() => {
+  consoleSpy?.mockRestore()
+})
+
+/**
+ * Helper Components
+ */
+
+const ExplosionErrorMessage = "💥"
+const Explosion = () => {
+  throw new Error(ExplosionErrorMessage)
+}
+
+// Use to test hook behaviour
+function ClickToExplode(options?: UseErrorBoundaryOptions) {
+  const [explode, setExplode] = useState(false)
+  const { ErrorBoundary, didCatch, error } = useErrorBoundary(options)
+
+  return (
+    <>
+      <div data-testid="boundary-inside">
+        <ErrorBoundary>
+          {explode ? (
+            <Explosion />
+          ) : (
+            <button onClick={() => setExplode(true)}>Explode!</button>
+          )}
+        </ErrorBoundary>
+      </div>
+      <p data-testid="didcatch">{didCatch ? "true" : "false"}</p>
+      <p data-testid="error-message">{error?.message}</p>
+    </>
+  )
+}
+
+// Use to test render props of wrapped ErrorBoundary
+function InstantExplosion(options?: UseErrorBoundaryOptions) {
+  const { ErrorBoundary } = useErrorBoundary(options)
+
+  return (
+    <>
+      <div data-testid="boundary-inside">
+        <ErrorBoundary
+          render={() => <Explosion />}
+          renderError={({ error }) => (
+            <p data-testid="error-message">{error.message}</p>
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
+/**
+ * Test useErrorBoundary hook
+ */
+
+test("Hook initializes state", async () => {
+  const { result } = renderHook(() => useErrorBoundary())
+
+  expect(result.current.didCatch).toBe(false)
+  expect(result.current.ErrorBoundary).toBeDefined()
+  expect(result.current.error).toBe(null)
+})
+
+test("Wrapped ErrorBoundary catches error", async () => {
+  const onDidCatch = jest.fn()
+
+  render(<ClickToExplode onDidCatch={onDidCatch} />)
+
+  act(() => {
+    fireEvent.click(screen.getByText("Explode!"))
+  })
+
+  // Boundary should render nothing
+  expect(screen.getByTestId("boundary-inside")).toBeEmptyDOMElement()
+  // Hook should provide didCatch and error
+  expect(screen.getByTestId("didcatch")).toHaveTextContent("true")
+  expect(screen.getByTestId("error-message")).toHaveTextContent(
+    ExplosionErrorMessage
+  )
+  // Provided callback should be called once
+  expect(onDidCatch).toBeCalledTimes(1)
+  // React and testing-library calls console.error when a boundary catches
+  expect(console.error).toHaveBeenCalledTimes(2)
+})
+
+test("Wrapped ErrorBoundary catches error with render props", async () => {
+  const onDidCatch = jest.fn()
+
+  render(<InstantExplosion onDidCatch={onDidCatch} />)
+
+  // Hook should provide didCatch and error
+  expect(screen.getByTestId("error-message")).toBeInTheDocument()
+  expect(screen.getByTestId("error-message")).toHaveTextContent(
+    ExplosionErrorMessage
+  )
+  // Provided callback should be called once
+  expect(onDidCatch).toBeCalledTimes(1)
+  // React and testing-library calls console.error when a boundary catches
+  expect(console.error).toHaveBeenCalledTimes(2)
+})