react testing library dosent recognize redux

Viewed 14

Hello there I have started recently learning how to use jest and react testing library for testing my Next js application and I am using redux for user state managment the code works perfectly fine the website is functional no errors but when I test the project I get this

 TypeError: (0 , import_redux2.combineReducers) is not a function

      15 |   },
      16 | });
    > 17 | const store = configureStore({
         |                             ^
      18 |   reducer: {
      19 |     number: numberReducer.reducer,
      20 |   },

      at configureStore (node_modules/@reduxjs/toolkit/src/configureStore.ts:147:19)
      at Object.<anonymous> (redux/index.tsx:17:29)
      at Object.<anonymous> (pages/Home.test.tsx:9:53)

here is a small demo on a dummy project

my test file code Home.test.tsx

import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import store from "../redux";
import Home from "./index";
describe("Home", () => {
  render(
    <Provider store={store}>
      <Home />
    </Provider>
  );
  const result = screen.getByTestId("result");
  expect(result).toBeInTheDocument();
});

my index.tsx (which is the home compoenent)

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment, numberState } from "../redux";
const Home: NextPage = () => {
  const number = useSelector(numberState);
  const dispatch = useDispatch();
  return (
    <div className={styles.container}>
      <div data-testid="result">Hello there the number is {number.number} </div>
      <button onClick={() => dispatch(increment())}>increment</button>
      <button onClick={() => dispatch(decrement())}>decrement</button>
    </div>
  );
};

export default Home;

I have just started learning jest so If you have a solution can you give a simple explanation

0 Answers
Related