From ca8d81022199756ef3bf96658d8c5cdc199e9b08 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Fri, 23 Nov 2018 21:38:39 +0100 Subject: [PATCH] Implement Jest's main configuration file This commit implements the main configuration file of Jest. It follows the "Setting up your environment" (1) guide of Gatsby and the Jest docs about how to get started (2). The file is placed in the project root and initially contains the following options: - `coverageDirectory` - The directory where Jest should output its coverage files. - `collectCoverageFrom` - To ensure only relevant files are included in the coverage stats this array of glob patterns matches files for which coverage information should be collected. - `globals` - A set of global variables that need to be available in all test environments. The `__PATH_PREFIX__` variable is specific to Gatsby based projects which is necessary for some components. - `moduleNameMapper` - A map from regular expressions to module names that allow to stub out resources, like images or styles with a single module. It is also used to set up "resolve aliases" that reflect the same setup like the ones configured for Gatsby's Webpack configuration. - `modulePaths` - An array with paths to additional locations to search when resolving modules. This is useful to define test specific utils which can then be imported like an aliased module. - `setupFiles` - The paths to modules that run some code to configure or set up the testing environment before each test. The `___loader` shim is a global function used by internal Gatsby APIs. Note that this is executed BEFORE the `setupTestFrameworkScriptFile` option! - `setupTestFrameworkScriptFile` - The path to the module that runs to configure or set up the testing framework before each test. Note that this is executed AFTER the `setupFiles` option! - `testPathIgnorePatterns` - An array of regexp pattern strings that are matched against all test paths before executing the test. If the test path matches any of the patterns, it will be skipped. - `transform` - To write tests using the latest ECMAScript syntax and proposals, Babel must be in place and set up to transpile the sources before they are processed by Jest to run them. This mapping from regular expressions to paths of transformers will transpile matching files with the specified Babel config. See the Jest documentation (3) about how to use Jest with Babel for more details. - `transformIgnorePatterns` - This is an important and required option for Gatsby based projects since Gastby includes un-transpiled ES6 code and by default Jest doesn't try to transform code inside `node_modules`, therefore the` gatsby-browser-entry.js` file isn't transpiled before running Jest so the `gatsby` module must be excluded. The array of regexp pattern strings that are matched against all source file paths before transformation. If the test path matches any of the patterns, it will not be transformed. References: (1) https://www.gatsbyjs.org/docs/unit-testing/#setting-up-your-environment (2) https://jestjs.io/docs/en/getting-started (3) https://jestjs.io/docs/en/getting-started#using-babel GH-39 --- .gatsby/onCreateWebpackConfig.js | 6 +- jest.config.js | 113 +++++++++++++++++++++++++++++++ src/config/internal/constants.js | 39 +++++++++-- 3 files changed, 150 insertions(+), 8 deletions(-) create mode 100644 jest.config.js diff --git a/.gatsby/onCreateWebpackConfig.js b/.gatsby/onCreateWebpackConfig.js index be62e9ae..54b7ce78 100644 --- a/.gatsby/onCreateWebpackConfig.js +++ b/.gatsby/onCreateWebpackConfig.js @@ -23,6 +23,8 @@ const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const GitRevisionPlugin = require("git-revision-webpack-plugin"); /* eslint-enable import/no-extraneous-dependencies */ +const { BASE_DIR_BUILD_REPORTS } = require("../src/config/internal/constants"); + const r = m => resolvePath(__dirname, m); /** @@ -36,8 +38,8 @@ const bundleAnalyzerPluginConfig = { analyzerMode: "static", generateStatsFile: true, openAnalyzer: false, - reportFilename: r("../build/reports/webpack-bundle-analyzer/index.html"), - statsFilename: r("../build/reports/webpack-bundle-analyzer/stats.json") + reportFilename: r(`../${BASE_DIR_BUILD_REPORTS}/webpack-bundle-analyzer/index.html`), + statsFilename: r(`../${BASE_DIR_BUILD_REPORTS}/webpack-bundle-analyzer/stats.json`) }; /** diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..0bee91a5 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,113 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file The Jest configuration. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://jestjs.io/docs/en/configuration + * @see https://www.gatsbyjs.org/docs/testing + * @since 0.1.0 + */ + +const { BASE_DIR_BUILD_REPORTS_COVERAGE } = require("./src/config/internal/constants"); + +module.exports = { + /* + * The directory where Jest should output its coverage files. + */ + coverageDirectory: `/${BASE_DIR_BUILD_REPORTS_COVERAGE}`, + + /* + * To ensure only relevant files are included in the coverage stats this array of glob patterns matches files for + * which coverage information should be collected. + */ + collectCoverageFrom: ["**/src/**/*.{js,jsx}", "!**/src/{config,data}/**", "!**/.cache/**", "!**/node_modules/**"], + + /* + * A set of global variables that need to be available in all test environments. The `__PATH_PREFIX__` variable is + * specific to Gatsby based projects which is necessary for some components. + */ + globals: { + __PATH_PREFIX__: "" + }, + + /* + * A map from regular expressions to module names that allow to stub out resources, like images or styles with a + * single module. It is also used to set up "resolve aliases" that reflect the same setup like the ones configured for + * Gatsby's Webpack configuration. + */ + moduleNameMapper: { + /* Reflect Webpack's `resolve.alias` configuration. */ + "^assets(.*)$": "/src/assets$1", + "^atoms(.*)$": "/src/components/atoms$1", + "^config(.*)$": "/src/config$1", + "^containers(.*)$": "/src/components/containers$1", + "^data(.*)$": "/src/data$1", + "^layouts(.*)$": "/src/components/layouts$1", + "^molecules(.*)$": "/src/components/molecules$1", + "^organisms(.*)$": "/src/components/organisms$1", + "^pages(.*)$": "/src/pages$1", + "^stores(.*)$": "/src/stores$1", + "^styles(.*)$": "/src/styles$1", + "^templates(.*)$": "/src/components/templates$1", + "^utils(.*)$": "/src/utils$1", + /* Map all import stylesheets to the "identity object proxy" module. */ + ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy", + ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": + "/test/__mocks__/file.js" + }, + + /* + * An array with paths to additional locations to search when resolving modules. This is useful to define test + * specific utils which can then be imported like an aliased module. + */ + modulePaths: ["/test/__utils__"], + + /* + * The paths to modules that run some code to configure or set up the testing environment before each test. + * The `___loader` shim is a global function used by internal Gatsby APIs. + * Note that this is executed BEFORE the `setupTestFrameworkScriptFile` option! + */ + setupFiles: ["/test/__shims__/___loader.js"], + + /* + * The path to the module that runs to configure or set up the testing framework before each test. + * Note that this is executed AFTER the `setupFiles` option! + */ + setupTestFrameworkScriptFile: require.resolve("./test/setup.js"), + + /* + * An array of regexp pattern strings that are matched against all test paths before executing the test. If the test + * path matches any of the patterns, it will be skipped. + */ + testPathIgnorePatterns: ["node_modules", ".cache"], + + /* + * To write tests using the latest ECMAScript syntax and + * proposals, Babel must be in place and set up to transpile the sources before they are processed by Jest to run + * them. This mapping from regular expressions to paths of transformers will transpile matching files with the + * specified Babel config. + * See the linked Jest documentation about how to use Jest with Babel for more details. + * + * @see https://jestjs.io/docs/en/getting-started#using-babel + */ + transform: { + "^.+\\.jsx?$": "/test/babel-config.js" + }, + + /* + * This is an important and required option for Gatsby based projects since Gastby includes un-transpiled ES6 code + * and by default Jest doesn't try to transform code inside `node_modules`, therefore the` gatsby-browser-entry.js` + * file isn't transpiled before running Jest so the `gatsby` module must be excluded. + * This array of regexp pattern strings that are matched against all source file paths before transformation. If the + * test path matches any of the patterns, it will not be transformed. + */ + transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"] +}; diff --git a/src/config/internal/constants.js b/src/config/internal/constants.js index f6dc10ca..df417350 100644 --- a/src/config/internal/constants.js +++ b/src/config/internal/constants.js @@ -15,7 +15,7 @@ */ /** - * The absolute path of the content base directory starting from the project root. + * The relative path of the content base directory starting from the project root. * * @constant {string} * @since 0.1.0 @@ -23,7 +23,7 @@ const BASE_DIR_CONTENT = "content"; /** - * The absolute path of the sources base directory starting from the project root. + * The relative path of the sources base directory starting from the project root. * * @constant {string} * @since 0.1.0 @@ -31,7 +31,7 @@ const BASE_DIR_CONTENT = "content"; const BASE_DIR_SRC = "src"; /** - * The absolute path of the assets base directory starting from the project root. + * The relative path of the assets base directory starting from the project root. * * @constant {string} * @since 0.1.0 @@ -39,7 +39,7 @@ const BASE_DIR_SRC = "src"; const BASE_DIR_ASSETS = `${BASE_DIR_SRC}/assets`; /** - * The absolute path of the assets directory for images starting from the project root. + * The relative path of the assets directory for images starting from the project root. * * @constant {string} * @since 0.1.0 @@ -47,7 +47,31 @@ const BASE_DIR_ASSETS = `${BASE_DIR_SRC}/assets`; const BASE_DIR_ASSETS_IMAGES = `${BASE_DIR_ASSETS}/images`; /** - * The absolute path of the config base directory starting from the project root. + * The relative path of the build base directory starting from the project root. + * + * @constant {string} + * @since 0.1.0 + */ +const BASE_DIR_BUILD = "build"; + +/** + * The relative path of the build base directory for reports starting from the project root. + * + * @constant {string} + * @since 0.1.0 + */ +const BASE_DIR_BUILD_REPORTS = `${BASE_DIR_BUILD}/reports`; + +/** + * The relative path of the build base directory for coverage reports starting from the project root. + * + * @constant {string} + * @since 0.1.0 + */ +const BASE_DIR_BUILD_REPORTS_COVERAGE = `${BASE_DIR_BUILD_REPORTS}/coverage`; + +/** + * The relative path of the config base directory starting from the project root. * * @constant {string} * @since 0.1.0 @@ -55,7 +79,7 @@ const BASE_DIR_ASSETS_IMAGES = `${BASE_DIR_ASSETS}/images`; const BASE_DIR_CONFIG = `${BASE_DIR_SRC}/config`; /** - * The absolute path of the pages base directory starting from the project root. + * The relative path of the pages base directory starting from the project root. * * @constant {string} * @since 0.1.0 @@ -82,6 +106,9 @@ const REGEX_BLOG_POST_DATE = /([0-9]+)\/([0-9]+)\/([0-9]+)\/(.+)/; module.exports = { BASE_DIR_ASSETS, BASE_DIR_ASSETS_IMAGES, + BASE_DIR_BUILD, + BASE_DIR_BUILD_REPORTS, + BASE_DIR_BUILD_REPORTS_COVERAGE, BASE_DIR_CONFIG, BASE_DIR_CONTENT, BASE_DIR_PAGES,