React Testing Library merged with @testing-library/react-hooks, wrapper inconsistent in renderHook

Question

With @testing-library/react-hooks I used to pass mocked store through initialProps just as mentioned in Advanced Hooks docs. Let's assume I have a code:

import configureMockStore from 'redux-mock-store'
import { Provider } from 'react-redux'

const initialState = {}
const customStore = configureMockStore(initialState)

// this wrapper is nicely reusable across all tests
const wrapper = ({ children, store = customStore }) =>
  <Provider store={ store }>
    {children}
  </Provider>

const useCustomHook = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch({ type: 'ACTION' })
  }, [])
}

test('should get dispatched action', () => {
  renderHook(useCustomHook, {
    wrapper: wrapper,
    initialProps: {
      store: customStore
    }
  })

  expect(customStore.getActions()).toEqual([{ type: 'ACTION }])
})

If I run this code with RTL before update (version 10.4.5) and @testing-library/react-hooks everything works as expected. But after these packages have merged, wrapper property in renderHooks function doesn't accept any other properties except children.

First iteration lead me to this solution:

renderHook(useCustomHook, {
  wrapper: ({ children }) => (
   <Provider store={ customStore }>{children}</Provider>
  )
})

...that's not as good in reusability as my previous wrapper. Is there any good solution of this problem?

Did you find a solution? I have the same issue, want to renderHook, but hook uses state that it has not been provided without being wrapped, will want to pass multiple providers so want a helper, which i can overwrite state in the store with. — Jeremy
– Jeremy, Commented Oct 25, 2022 at 14:51

Sasha Omelchenko · Accepted Answer · 2022-10-27 10:35:40Z

4

The solution:

const customWrapper = (store) => ({ children }) =>
  // this function is mentioned in question
  wrapper({
    children,
    store
  })
  
test('Some test #1', () => {
  const mockedState = {}
  const mockedStore = configureMockStore(mockedState)

  const { result } = renderHook(() => useCustomHook(), {
    wrapper: customWrapper(mockedStore)
  })
})

answered Oct 27, 2022 at 10:35

Sasha Omelchenko

3164 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Testing Library merged with @testing-library/react-hooks, wrapper inconsistent in renderHook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related