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