Configuration

Our Jest configuration setup.

jest.config.js

module.exports = {
    globals: {
        __SAAS_CLIENT_VERSION__: "saas-client-version"
    },
    moduleDirectories: [
        "node_modules",
        "<rootDir>/src/test/react-testing-library/utils",
    ],
    testEnvironment: "jsdom",
    transformIgnorePatterns: ["/node_modules/(?!(@klipfolio/design-system)/)"],
    setupFilesAfterEnv: ["<rootDir>/src/test/react-testing-library/mocks/mocks.js", /* ... */],
    "moduleNameMapper": {
        "@app/utils/RESTHelper.js": "<rootDir>/src/test/react-testing-library/utils/RESTHelper.js",
        //...
    },
    coverageDirectory: "<rootDir>/src/test/react-testing-library/coverage",
    coveragePathIgnorePatterns: [
        "<rootDir>/src/test/",
        //...
    ]
};

• globals - Declare any variables here that can be used anywhere in the code

• moduleDirectories - This tells jest where to look for module directories, aka, imports. In out case, node_modules and the react utils

• testEnvironment - (jsdom) Since jest doesn't actually use a browser to render the tests. it uses the virtual dom, jsdom to do so. This makes tests run quicker but also doesn't have the full set of dom features. Therefore we will have to mock some.

• transformIgnorePatterns - Here we tell jest that we don't want to compile our design system. Just use as is.

• setupFilesAfterEnv - An array of JS files to set up our testing environments, like mocks, or any pre-setup tasks. In our case some console.error, and warn suppression.

• moduleNameMapper - Array of regular expressions to map imports too. A way to globally mock a service or class. A good example would be the RESTHelper, any time we import it, we say to use the mocked version in the mocks folder.