Theo's Typesafe Cult•4mo ago

Using hardcoded data for comparison in unit tests with toEqual?

Hi there, I have a React app and I want to create a unit test for a function that removes scattered zeros inside of an array. Basically my idea is to have a src\mocks\data\IndexadorDataMock.ts file with hardcoded dirty data, and then the (also hardcoded) clean data - aka the expected output. For example:

// src\__mocks__\data\IndexadorDataMock.ts

export const itemsMockData = [
    0,
    { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
    0,
    { down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
    0,
];

export const cleanItemsMockData = [
    { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
    { down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
];

// src\__mocks__\data\IndexadorDataMock.ts

export const itemsMockData = [
    0,
    { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
    0,
    { down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
    0,
];

export const cleanItemsMockData = [
    { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 },
    { down: 4723, left: 4722, right: 4724, id: 3, up: 4725 },
];

And then my test file Helpers.test.ts:

describe('Helpers', () => {
    test('removes scattered zeros using cleanIndices', () => {
        const result = Helpers.cleanIndices(itemsMockData);
        expect(result).toEqual(cleanItemsMockData);
    });
});

describe('Helpers', () => {
    test('removes scattered zeros using cleanIndices', () => {
        const result = Helpers.cleanIndices(itemsMockData);
        expect(result).toEqual(cleanItemsMockData);
    });
});

My question is: is this a common practice for React projects? By "this" I mean having a separate file with very long, hardcoded data that you'll use for .toEqual comparisons in your tests

4 Replies

kewinzaq1•4mo ago

@Muhct Probably you be better using toMatchInlineSnapshot instead @Muhct You save time preparing expected result, it will be generated automatically if you use this method @Muhct And if something will be messed up in the future you will have the same benefits and if the change is expected you can commit update automatically without the need to manually adjust file

Muhct•4mo ago

I see... so if you use .toMatchInlineSnapshot() you only have to provide it the hardcoded dirty/input data, and then when you run the test for the first time, it will automatically modify your test file to add the generated clean/output data... right? So at the end of the day you would still have 2 large blocks of hardcoded data

kewinzaq1•4mo ago

yes

ktmouk•4mo ago

In that case, I would shorten the dummy data and write it directly into the test instead of splitting the file. Do you really need very long dummy data?

describe('Helpers', () => {
    test('removes scattered zeros using cleanIndices', () => {
        const result = Helpers.cleanIndices([0, { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 }, 0]);
        expect(result).toEqual([{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 }]);
    });
});

describe('Helpers', () => {
    test('removes scattered zeros using cleanIndices', () => {
        const result = Helpers.cleanIndices([0, { down: 4719, left: 4718, right: 4720, id: 1, up: 4721 }, 0]);
        expect(result).toEqual([{ down: 4719, left: 4718, right: 4720, id: 1, up: 4721 }]);
    });
});

Gaming

Programming

Using hardcoded data for comparison in unit tests with toEqual?