reduxtoolkit mocking store with typescript

user_2316511 0
Viewed 285

I found this code from redux documentation

// test-utils.jsx
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import userReducer from '../userSlice'

function render(
  ui,
  {
    preloadedState,
    store = configureStore({ reducer: { user: userReducer }, preloadedState }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

However, I am working on with a TypeScript project and I am trying to add types to this code snippet however I cannot find the correct types to use. I also cannot find anything from their documentation.

Has anyone tried this?

react-redux redux-toolkit redux typescript reactjs
1 Answers

There is a TypeScript example on React testing library's official site.

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const userReducer = (state = { name: '' }) => {
  return state;
};

function render(
  ui,
  { preloadedState, store = configureStore({ reducer: { user: userReducer }, preloadedState }), ...renderOptions }
) {
  const Wrapper: React.FC = ({ children }) => {
    return <Provider store={store}>{children}</Provider>;
  };
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}
user_64635580
Related