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

[gabriellatavares]

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? Or ignore that piece of code while testing? Is there a better way to test this action? Thanks in advance.

[freakzlike]

You are testing your vuex action without a component. On this case there is no need for @vue/test-utils as this is just plain javascript. Where does global.dashboards coming from outside of your test environment?

[gabriellatavares]

hello, thanks for the answer!

when I'm using global.dashboards on the store, it comes from my main.js. so I'm not sure how to implement this while testing without a component. I have it on my config.global.mocks but as I'm not mounting anything it doesn't do anything. I'm not sure if I should follow another way of testing it

[freakzlike]

You can set this, the same as in your main.js