Shared utils functions for testing with Jest

There is an ability to expose helpers as global functions without any need to import modules explicitly.

1. Jest allows to configure some files will be run before every test file executed through setupFiles configuration option
2. Also Jest provides global object that you can modify and everything you put there will be available in your tests.

Example

package.json:

"jest": {
    "setupFiles": ["helpers.js"]
} 

helpers.js:

global.mockFetchJsonResponse = (data) => {
    ok: () => true,
    json: () => data
};

somecomponent.test.js:

mockFetchJsonResponse(); // look mom, I can call this like say expect()!

With TypeScript

TypeScript will complain with cannot find name 'mockFetchJsonResponse'. You can fix that by adding a declaration file:

helpers.d.ts:

declare function mockFetchJsonResponse(data: any): any;

Create a new tsconfig.test.json file and add that file to the files section and extend your main tsconfig:

{
    "extends": "./tsconfig.json",
    "files": ["./.jest/helpers.d.ts"]
}

In your jest.config.js file, add a new global setup for ts-jest to have jest use your new tsconfig file:

// ...
globals: {
    "ts-jest": {
         tsconfig: "tsconfig.test.json"
    }
}
// ...

Sure it does not answer you direct question “where to put the files” but it’s anyway up to you. You just need specify those files in setupFiles section. Since there is no import needed in tests it does not really matter.

As for testing test helpers I’m not sure. See it’s part of testing infrastructure like spec file itself. And we don’t write tests for tests or it would never stop. Sure, it’s up to you – say if logic behind is really-really complex and hard to follow. But if helper provides too complex/complicated logic it would lead to tests themselves be impossible to understand, do you agree?

kudos to that article on testing compoentns with intl. Have never dealt with globals in jest before.