How can I test action in vuex with vue-test-utils and jest when this actions uses a globalProperties?

Question

I'm really new at testing with vue-test-utis/jest, but I've stumbled upon an issue that I'm not sure how to test it. Could someone help me? I have an action in my store that uses a globalProperties and when I try to use it in tests it's not working.

Basically this is my test:

    describe('test: actions', () => {
    
        it('buildReservationsTableData', () => {
            let data = actions.buildReservationsTableData(mockDataBefore);
            expect(data).toEqual(tableData);
        })
    
    })

And this is the action that I'm trying to write a test:

    buildReservationsTableData(channelsData) {
            let renderTable = ant_table.getRender('table');
    
            if (!channelsData) {
                return renderTable.handle([], []);
            }
    
            let data = [],
                sortable = [],
                headers = {
                    "code" : "Code",
                    "guestName" : "Guest name",
                    "checkin" : "Check-in",
                    "checkout" : "Check-out",
                    "nights": "Nights",
                    "ratePlan": "Rate plan",
                    "roomType": "Room Type",
                    "totalAmount": "Total amount",
                    "channel": "Channel",
                    "status": "Status",
                    "date": "Date"
    
                },
                slots = {};
    
            for (let idx in channelsData){
                if (Object.prototype.hasOwnProperty.call(channelsData[idx], "sentToPms")) {
                    headers.sentToPms = "Sent to PMS";
                    break;
                }
            }
    
            for (let idx in channelsData) {
                let record = {
                    id : channelsData[idx].code,
                    child : channelsData[idx].teste
                };
                for (let key in headers) {
                    record[key] = channelsData[idx][key];
                    if (key == "totalAmount"){
                        record[key] =  global.dashboards.$filters.currency(channelsData[idx][key]);
                    }
    
                    sortable.push(key);
                    if (key == 'status' || key == 'sentToPms'){
                        slots[key] = {customRender : 'format'};
                    }
                }
                data.push(record);
            }
            return renderTable.handle(headers, data, {"sortable": sortable, slots: slots});
        },

My problem is that the test suit doesn't know what is global.dashboards.$filters.currency, my globalProperties. I get this error:

    ● test: actions › buildReservationsTableData
    TypeError: Cannot read properties of undefined (reading '$filters')

      84 |                 record[key] = channelsData[idx][key];
      85 |                 if (key == "totalAmount"){
    > 86 |                     record[key] =  global.dashboards.$filters.currency(channelsData[idx][key]);
         |                                                      ^
      87 |                 }
      88 |
      89 |                 sortable.push(key);

On my jest.init.js file I have this config, but the action is not aware of that.

    import { config } from "@vue/test-utils";
    
    config.global.mocks = {
        $filters: {
            translate: (msg) => msg,
            currency: (currency) => currency
            },
            $t: (text) => text
    }

How do I fix it? Thanks in advance.

Answer 1

Judging by the error it your dashboards object which is not defined.

I don't know how you create it or what it is, but if you want to try to mock in Vue-test-utils config file please note that global doesn't seem to be a valid config option, you might want to try:

config.mocks = {
  global: {
    dashboards: {
      $filters: {
        translate: (msg) => msg,
        currency: (currency) => currency
      },
      $t: (text) => text
    }
  }

}

Alternatively Jest provide a way to define global variables that need to be available in all test in jest.config.js:

// globals: {},