javascriptreactjsjestjsreact-testing-libraryredux-mock-store

Data not passing in component


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 []


Solution

  • 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