In Docs, Usage/Advanced-hooks/Context example got error

[boaz-hwang]

• react-hooks-testing-library version: 7.0.1
• react version: 17.0.2
• react-dom version (if applicable): 17.0.2
• react-test-renderer version (if applicable): 17.0.2
• node version: 15.13.10
• npm (or yarn) version: 1.22.10(yarn)

Relevant code or config:

useCounter.ts

import React, { useState, useContext, useCallback } from 'react';
const CounterStepContext = React.createContext(1);
export const CounterStepProvider = ({ step, children }: any) => (
  <CounterStepContext.Provider value={step}>
    {children}
  </CounterStepContext.Provider>
);
export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const step = useContext(CounterStepContext);
  const increment = useCallback(() => setCount((x) => x + step), [step]);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);
  return { count, increment, reset };
}

useCounter.test.ts

import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter, CounterStepProvider } from './useCounter';

test('should use custom step when incrementing', () => {
  const { result } = renderHook(() => useCounter(), {
    wrapper: ({ children }) => (
      <CounterStepProvider step={2}>{children}</CounterStepProvider>
    ),
  });
  act(() => {
    result.current.increment();
  });
  expect(result.current.count).toBe(2);
});

What you did:

I just follow the code in react testing library hooks docs.

and yarn test

What happened:

when yarn test, I got this error

FAIL  src/test/useCounter.test.tsx
  ✕ should use custom step when incrementing (5 ms)

  ● should use custom step when incrementing

    Objects are not valid as a React child (found: object with keys {type, props, key, ref, __k, __, __b, __e, __d, __c, __h, constructor, __v, __source, __self}). If you meant to render a collection of children, use an array instead.

      3 |
      4 | test('should use custom step when incrementing', () => {
    > 5 |   const { result } = renderHook(() => useCounter(), {
        |                      ^
      6 |     wrapper: ({ children }) => (
      7 |       <CounterStepProvider step={2}>{children}</CounterStepProvider>
      8 |     ),

      at throwOnInvalidObjectType (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4537:15)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5439:7)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7984:28)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8810:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9966:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13404:18)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13459:7)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
      at render (node_modules/@testing-library/react-hooks/lib/native/pure.js:73:34)
      at renderHook (node_modules/@testing-library/react-hooks/lib/core/index.js:114:5)
      at Object.<anonymous> (src/test/useCounter.test.tsx:5:22)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.337 s, estimated 1 s
Ran all test suites.

Reproduction:

Problem description:

I could not move forward anymore.

Suggested solution:

[mpeyper]

Hmm, we'll check it out.

[rharrigan-sugarcrm]

@mpeyper Thanks for looking into it. Has there been any follow up? The above example is a copy of whats currently on the official testing-library example. I'm running into the same issue with the following versioning:

• react: 18.2.0
• @testing-library/react-hooks: 8.0.1
• react-dom: 18.2.0
• react-test-renderer: 18.2.0
• node: 16.19.0
• yarn: 1.22.21

[mpeyper]

Hi @rharrigan-sugarcrm, honestly probably not and if I did look then I don’t remember.

In your case though, if you are using React 18 you should be using renderHook from @testing-library/react instead of @testing-library/react/hooks now. Let them know if you are still having issues after you migrate to the new API.