JavaScript

Knowledge Base

JavaScript > Tools

Jest

Jest (https://jestjs.io/en/) ist eines (von mehreren) JavaScript Test Frameworks. Es unterstützt auch out-of-the-box code coverage (https://jestjs.io/docs/en/cli.html#coverage), d. h. hier ist nicht zwingend ein weiteres Tool notwendig.

Installation:

npm i -D jest

Konfiguration (siehe weitere Einstellungen für Babel unten):

Initial kann eine jest.config.js so erzeugt werden:

npx jest --init

Beispiel für jest.config.js (in unserem Fall mit ein paar Änderungen, weil wir webpack alias einsetzen und auch jest das verstehen sollte, das Standard-Verzeichnis für "coverage" geändert haben, etc.):

// For a detailed explanation regarding each configuration property, visit:
 
module.exports = {
    // All imported modules in your tests should be mocked automatically
    // automock: false,
 
    // Stop running tests after `n` failures
    // bail: 0,
 
    // Respect "browser" field in package.json when resolving modules
    // browser: false,
 
    // The directory where Jest should store its cached dependency information
    // cacheDirectory: "",
 
    // Automatically clear mock calls and instances between every test
    clearMocks: true,
 
    // Indicates whether the coverage information should be collected while executing the test
    //collectCoverage: true,
 
    // An array of glob patterns indicating a set of files for which coverage information should be collected
    //collectCoverageFrom: ["**/src/store/*.{js,jsx}", "!**/node_modules/**"],
    //collectCoverageFrom: ["**/src/store/*.js"],
 
    // The directory where Jest should output its coverage files
    coverageDirectory: ".coverage",
 
    // An array of regexp pattern strings used to skip coverage collection
    // coveragePathIgnorePatterns: [
    //   "\\\\node_modules\\\\"
    // ],
 
    //A list of reporter names that Jest uses when writing coverage reports
    // coverageReporters: [
    //  "json",
    //  "text",
    //  "lcov",
    //  //"clover"
    // ],
 
    // An object that configures minimum threshold enforcement for coverage results
    // coverageThreshold: null,
 
    // A path to a custom dependency extractor
    // dependencyExtractor: null,
 
    // Make calling deprecated APIs throw helpful error messages
    // errorOnDeprecated: false,
 
    // Force coverage collection from ignored files using an array of glob patterns
    // forceCoverageMatch: [],
 
    // A path to a module which exports an async function that is triggered once before all test suites
    // globalSetup: null,
 
    // A path to a module which exports an async function that is triggered once after all test suites
    // globalTeardown: null,
 
    // A set of global variables that need to be available in all test environments
    // globals: {},
 
    // An array of directory names to be searched recursively up from the requiring module's location
    // moduleDirectories: [
    //   "node_modules"
    // ],
 
    // An array of file extensions your modules use
    // moduleFileExtensions: [
    //   "js",
    //   "json",
    //   "jsx",
    //   "ts",
    //   "tsx",
    //   "node"
    // ],
 
    // A map from regular expressions to module names that allow to stub out resources with a single module
    moduleNameMapper: {
        "^components/(.*)$": "<rootDir>/src/components/$1",
        "^backend/(.*)$": "<rootDir>/src/backend/$1",
        "^constants/(.*)$": "<rootDir>/src/constants/$1",
        "^entries/(.*)$": "<rootDir>/src/entries/$1",
        "^pages/(.*)$": "<rootDir>/src/pages/$1",
        "^store/(.*)$": "<rootDir>/src/store/$1",
        "^types/(.*)$": "<rootDir>/src/types/$1",
        "^utils/(.*)$": "<rootDir>/src/utils/$1",
    },
 
    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
    // modulePathIgnorePatterns: [],
 
    // Activates notifications for test results
    // notify: false,
 
    // An enum that specifies notification mode. Requires { notify: true }
    // notifyMode: "failure-change",
 
    // A preset that is used as a base for Jest's configuration
    // preset: null,
 
    // Run tests from one or more projects
    // projects: null,
 
    // Use this configuration option to add custom reporters to Jest
    // reporters: undefined,
 
    // Automatically reset mock state between every test
    // resetMocks: false,
 
    // Reset the module registry before running each individual test
    // resetModules: false,
 
    // A path to a custom resolver
    // resolver: null,
 
    // Automatically restore mock state between every test
    // restoreMocks: false,
 
    // The root directory that Jest should scan for tests and modules within
    // rootDir: null,
 
    // A list of paths to directories that Jest should use to search for files in
    // roots: [
    //   "<rootDir>"
    // ],
 
    // Allows you to use a custom runner instead of Jest's default test runner
    // runner: "jest-runner",
 
    // The paths to modules that run some code to configure or set up the testing environment before each test
    // setupFiles: [],
 
    // A list of paths to modules that run some code to configure or set up the testing framework before each test
    // setupFilesAfterEnv: [],
 
    // A list of paths to snapshot serializer modules Jest should use for snapshot testing
    // snapshotSerializers: [],
 
    // The test environment that will be used for testing
    testEnvironment: "node",
 
    // Options that will be passed to the testEnvironment
    // testEnvironmentOptions: {},
 
    // Adds a location field to test results
    // testLocationInResults: false,
 
    // The glob patterns Jest uses to detect test files
    //testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"],
 
    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
    // testPathIgnorePatterns: [
    //   "\\\\node_modules\\\\"
    // ],
 
    // The regexp pattern or array of patterns that Jest uses to detect test files
    // testRegex: [],
 
    // This option allows the use of a custom results processor
    // testResultsProcessor: null,
 
    // This option allows use of a custom test runner
    // testRunner: "jasmine2",
 
    // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
    // testURL: "http://localhost",
 
    // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
    // timers: "real",
 
    // A map from regular expressions to paths to transformers
    // transform: null,
 
    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
    // transformIgnorePatterns: [
    //   "\\\\node_modules\\\\"
    // ],
 
    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
    // unmockedModulePathPatterns: undefined,
 
    // Indicates whether each individual test should be reported during the run
    verbose: false,
 
    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
    // watchPathIgnorePatterns: [],
 
    // Whether to use watchman for file crawling
    // watchman: true,
};

Babel-Konfiguration:

Das Plugin @babel/preset-env sollte bei "modules:auto" (default) beibehalten - webpack steuert Babel so, dass die (ES6) modules (imports) nicht transformiert (bzw. dann von webpack transformiert werden) - für jest (unter node) steuert Babel so, dass die (ES6) modules (imports) transformiert werden (weil node keine ES6 modules "versteht").

Wird useBuiltIns: "entry" verwendet , sollte auch targets gesetzt werden, weil ältere Versionen von node generator functions nicht verstehen.

[
        "@babel/preset-env",
        {
            corejs: 3, // Use core-js 3 for polyfills (core-js 3 must be installed for this option)
 
            // CAUTION: This fails in case node_modules are not touched by Babel
            // useBuiltIns: "usage", // Add polyfills only in files where used
 
            // https://babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-entry
            // IMPORTANT: Add this import on the beginning of your entry:
            // import "core-js/stable";
            // import "regenerator-runtime/runtime";
            useBuiltIns: "entry", // Add polyfills on entry level based on the defined browserslist (independent whether they are used or not used)
 
            //debug: true, // Optional: Show debug output on command line
 
            // We are using webpack modules (which are already transformed by webpack)
            // so no need to transform them by babel - so we could enforce this to "false".
            // However, we are also using jest under node where we need to transform the
            // ES6 module imports -> therefore we keep auto and let the framework (webpack, jest)
            // configure this
            modules: "auto",
 
            targets: {
                // We are adding this for jest - because in case of useBuiltIns: "entry"
                // we have no entry point for jest (except we add additional entries to jest.init.js) and it fails with
                // "ReferenceError: regeneratorRuntime is not defined"
                node: "current",
            },
        },
    ]

Konfiguration package.json > scripts:

jest kann direkt so konfiguriert werden:

"scripts": {
        "test": "jest"
    },

Damit kann jest einmalig mit "npm test" auf der console gestartet werden.

Es gibt zahlreiche CLI Optionen (https://jestjs.io/docs/en/cli), z. B. kann man jest in einen watch mode versetzen und auch code coverage direkt ausgeben:

"scripts": {
        "test": "jest --watchAll --collectCoverage"
    },