I am trying to do the unit testing for the calculation in my component. My issue is that I have created a mockStore but that value inside the mockStore is not passing the data to my component. Hence my test case is getting failed
// below is my mockStore code
import { configureStore } from '@reduxjs/toolkit';
import { creditStatementData } from './__mock__Data/mockCreditStatement.json'; // Adjust the path as needed
const initialState = {
creditStatementList: creditStatementData,
};
// Reducer function
const creditStatementListReducer = (state = initialState, action) => {
switch (action.type) {
// You can add cases for any actions you may want to test
default:
return state.creditStatementList || []; // Return the state as is for any other action
}
};
// Configure the mock store
const mockStore = configureStore({
reducer: {
creditStatementList: creditStatementListReducer,
},
preloadedState: initialState,
});
export default mockStore;
============================================
// below is my test file
import { render, screen } from "@testing-library/react";
import { MemoryRouter } from "react-router-dom";
import { Provider } from "react-redux";
// functions import
import { getFormattedCurrency } from "../../../utils/unitFunction";
// components import
import CreditSaleTableRow from "../../../components/creditSale/creditSaleTableRow";
import CreditSaleStatementDataTable from "../../../components/creditSale/creditSaleStatement/creditSaleStatementDataTable";
// mock store
import mockStore from "../../__mockStore__";
// mock data imports
import testCases from '../../__mock__Data/creditSaleTestingData.json'
import creditStatementData from '../../__mock__Data/mockCreditStatement.json'
describe("CREDIT SALE calculation testing", () => {
test('should calculate total credit and balance to pay', () => {
const totalDebit = creditStatementData.filter(data => data.type === "debit")
.reduce((total, item) => total + Number(item.amount), 0);
const totalCredit = creditStatementData.filter(data => data.type === "credit")
.reduce((total, item) => total + Number(item.amount), 0);
render(
<Provider store={mockStore}>
<CreditSaleStatementDataTable
customerId="testCustomerId"
isLoading={false}
setIsLoading={jest.fn()}
testingData={creditStatementData}
/>
</Provider>
);
const balanceToPay = totalCredit - totalDebit;
const balanceToPayInScreen = screen.getByText(getFormattedCurrency(balanceToPay).toString());
expect(getFormattedCurrency(balanceToPayInScreen)).toBeInTheDocument();
});
});
I have consol.log my redux state in the component i can see it a empty array
Redux_creditStatementList for testing []
Here it is a simple issue. I have imported the JSON file and directly used it with the initialState.
Root cause -> mockStore doesn't accept the JSON file as data
Solution -> I have defined the data in the JS file and exported it then it is working fine