diff --git a/website/versioned_docs/version-27.4/Architecture.md b/website/versioned_docs/version-27.4/Architecture.md
new file mode 100644
index 000000000000..86da7948415d
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Architecture.md
@@ -0,0 +1,14 @@
+---
+id: architecture
+title: Architecture
+---
+
+If you are interested in learning more about how Jest works, understand its architecture, and how Jest is split up into individual reusable packages, check out this video:
+
+
+
+If you'd like to learn how to build a testing framework like Jest from scratch, check out this video:
+
+
+
+There is also a [written guide you can follow](https://cpojer.net/posts/building-a-javascript-testing-framework). It teaches the fundamental concepts of Jest and explains how various parts of Jest can be used to compose a custom testing framework.
diff --git a/website/versioned_docs/version-27.4/BypassingModuleMocks.md b/website/versioned_docs/version-27.4/BypassingModuleMocks.md
new file mode 100644
index 000000000000..96dfa7462016
--- /dev/null
+++ b/website/versioned_docs/version-27.4/BypassingModuleMocks.md
@@ -0,0 +1,58 @@
+---
+id: bypassing-module-mocks
+title: Bypassing module mocks
+---
+
+Jest allows you to mock out whole modules in your tests, which can be useful for testing if your code is calling functions from that module correctly. However, sometimes you may want to use parts of a mocked module in your _test file_, in which case you want to access the original implementation, rather than a mocked version.
+
+Consider writing a test case for this `createUser` function:
+
+```javascript title="createUser.js"
+import fetch from 'node-fetch';
+
+export const createUser = async () => {
+ const response = await fetch('http://website.com/users', {method: 'POST'});
+ const userId = await response.text();
+ return userId;
+};
+```
+
+Your test will want to mock the `fetch` function so that we can be sure that it gets called without actually making the network request. However, you'll also need to mock the return value of `fetch` with a `Response` (wrapped in a `Promise`), as our function uses it to grab the created user's ID. So you might initially try writing a test like this:
+
+```javascript
+jest.mock('node-fetch');
+
+import fetch, {Response} from 'node-fetch';
+import {createUser} from './createUser';
+
+test('createUser calls fetch with the right args and returns the user id', async () => {
+ fetch.mockReturnValue(Promise.resolve(new Response('4')));
+
+ const userId = await createUser();
+
+ expect(fetch).toHaveBeenCalledTimes(1);
+ expect(fetch).toHaveBeenCalledWith('http://website.com/users', {
+ method: 'POST',
+ });
+ expect(userId).toBe('4');
+});
+```
+
+However, if you ran that test you would find that the `createUser` function would fail, throwing the error: `TypeError: response.text is not a function`. This is because the `Response` class you've imported from `node-fetch` has been mocked (due to the `jest.mock` call at the top of the test file) so it no longer behaves the way it should.
+
+To get around problems like this, Jest provides the `jest.requireActual` helper. To make the above test work, make the following change to the imports in the test file:
+
+```javascript
+// BEFORE
+jest.mock('node-fetch');
+import fetch, {Response} from 'node-fetch';
+```
+
+```javascript
+// AFTER
+jest.mock('node-fetch');
+import fetch from 'node-fetch';
+const {Response} = jest.requireActual('node-fetch');
+```
+
+This allows your test file to import the actual `Response` object from `node-fetch`, rather than a mocked version. This means the test will now pass correctly.
diff --git a/website/versioned_docs/version-27.4/CLI.md b/website/versioned_docs/version-27.4/CLI.md
new file mode 100644
index 000000000000..4d9af6aceb25
--- /dev/null
+++ b/website/versioned_docs/version-27.4/CLI.md
@@ -0,0 +1,390 @@
+---
+id: cli
+title: Jest CLI Options
+---
+
+The `jest` command line runner has a number of useful options. You can run `jest --help` to view all available options. Many of the options shown below can also be used together to run tests exactly the way you want. Every one of Jest's [Configuration](Configuration.md) options can also be specified through the CLI.
+
+Here is a brief overview:
+
+## Running from the command line
+
+Run all tests (default):
+
+```bash
+jest
+```
+
+Run only the tests that were specified with a pattern or filename:
+
+```bash
+jest my-test #or
+jest path/to/my-test.js
+```
+
+Run tests related to changed files based on hg/git (uncommitted files):
+
+```bash
+jest -o
+```
+
+Run tests related to `path/to/fileA.js` and `path/to/fileB.js`:
+
+```bash
+jest --findRelatedTests path/to/fileA.js path/to/fileB.js
+```
+
+Run tests that match this spec name (match against the name in `describe` or `test`, basically).
+
+```bash
+jest -t name-of-spec
+```
+
+Run watch mode:
+
+```bash
+jest --watch #runs jest -o by default
+jest --watchAll #runs all tests
+```
+
+Watch mode also enables to specify the name or path to a file to focus on a specific set of tests.
+
+## Using with yarn
+
+If you run Jest via `yarn test`, you can pass the command line arguments directly as Jest arguments.
+
+Instead of:
+
+```bash
+jest -u -t="ColorPicker"
+```
+
+you can use:
+
+```bash
+yarn test -u -t="ColorPicker"
+```
+
+## Using with npm scripts
+
+If you run Jest via `npm test`, you can still use the command line arguments by inserting a `--` between `npm test` and the Jest arguments.
+
+Instead of:
+
+```bash
+jest -u -t="ColorPicker"
+```
+
+you can use:
+
+```bash
+npm test -- -u -t="ColorPicker"
+```
+
+## Camelcase & dashed args support
+
+Jest supports both camelcase and dashed arg formats. The following examples will have an equal result:
+
+```bash
+jest --collect-coverage
+jest --collectCoverage
+```
+
+Arguments can also be mixed:
+
+```bash
+jest --update-snapshot --detectOpenHandles
+```
+
+## Options
+
+_Note: CLI options take precedence over values from the [Configuration](Configuration.md)._
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Reference
+
+### `jest `
+
+When you run `jest` with an argument, that argument is treated as a regular expression to match against files in your project. It is possible to run test suites by providing a pattern. Only the files that the pattern matches will be picked up and executed. Depending on your terminal, you may need to quote this argument: `jest "my.*(complex)?pattern"`. On Windows, you will need to use `/` as a path separator or escape `\` as `\\`.
+
+### `--bail`
+
+Alias: `-b`. Exit the test suite immediately upon `n` number of failing test suite. Defaults to `1`.
+
+### `--cache`
+
+Whether to use the cache. Defaults to true. Disable the cache using `--no-cache`. _Note: the cache should only be disabled if you are experiencing caching related problems. On average, disabling the cache makes Jest at least two times slower._
+
+If you want to inspect the cache, use `--showConfig` and look at the `cacheDirectory` value. If you need to clear the cache, use `--clearCache`.
+
+### `--changedFilesWithAncestor`
+
+Runs tests related to the current changes and the changes made in the last commit. Behaves similarly to `--onlyChanged`.
+
+### `--changedSince`
+
+Runs tests related to the changes since the provided branch or commit hash. If the current branch has diverged from the given branch, then only changes made locally will be tested. Behaves similarly to `--onlyChanged`.
+
+### `--ci`
+
+When this option is provided, Jest will assume it is running in a CI environment. This changes the behavior when a new snapshot is encountered. Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`.
+
+### `--clearCache`
+
+Deletes the Jest cache directory and then exits without running tests. Will delete `cacheDirectory` if the option is passed, or Jest's default cache directory. The default cache directory can be found by calling `jest --showConfig`. _Note: clearing the cache will reduce performance._
+
+### `--clearMocks`
+
+Automatically clear mock calls, instances and results before every test. Equivalent to calling [`jest.clearAllMocks()`](JestObjectAPI.md#jestclearallmocks) before each test. This does not remove any mock implementation that may have been provided.
+
+### `--collectCoverageFrom=`
+
+A glob pattern relative to `rootDir` matching the files that coverage info needs to be collected from.
+
+### `--colors`
+
+Forces test results output highlighting even if stdout is not a TTY.
+
+### `--config=`
+
+Alias: `-c`. The path to a Jest config file specifying how to find and execute tests. If no `rootDir` is set in the config, the directory containing the config file is assumed to be the `rootDir` for the project. This can also be a JSON-encoded value which Jest will use as configuration.
+
+### `--coverage[=]`
+
+Alias: `--collectCoverage`. Indicates that test coverage information should be collected and reported in the output. Optionally pass `` to override option set in configuration.
+
+### `--coverageProvider=`
+
+Indicates which provider should be used to instrument code for coverage. Allowed values are `babel` (default) or `v8`.
+
+Note that using `v8` is considered experimental. This uses V8's builtin code coverage rather than one based on Babel. It is not as well tested, and it has also improved in the last few releases of Node. Using the latest versions of node (v14 at the time of this writing) will yield better results.
+
+### `--debug`
+
+Print debugging info about your Jest config.
+
+### `--detectOpenHandles`
+
+Attempt to collect and print open handles preventing Jest from exiting cleanly. Use this in cases where you need to use `--forceExit` in order for Jest to exit to potentially track down the reason. This implies `--runInBand`, making tests run serially. Implemented using [`async_hooks`](https://nodejs.org/api/async_hooks.html). This option has a significant performance penalty and should only be used for debugging.
+
+### `--env=`
+
+The test environment used for all tests. This can point to any file or node module. Examples: `jsdom`, `node` or `path/to/my-environment.js`.
+
+### `--errorOnDeprecated`
+
+Make calling deprecated APIs throw helpful error messages. Useful for easing the upgrade process.
+
+### `--expand`
+
+Alias: `-e`. Use this flag to show full diffs and errors instead of a patch.
+
+### `--filter=`
+
+Path to a module exporting a filtering function. This method receives a list of tests which can be manipulated to exclude tests from running. Especially useful when used in conjunction with a testing infrastructure to filter known broken.
+
+### `--findRelatedTests `
+
+Find and run the tests that cover a space separated list of source files that were passed in as arguments. Useful for pre-commit hook integration to run the minimal amount of tests necessary. Can be used together with `--coverage` to include a test coverage for the source files, no duplicate `--collectCoverageFrom` arguments needed.
+
+### `--forceExit`
+
+Force Jest to exit after all tests have completed running. This is useful when resources set up by test code cannot be adequately cleaned up. _Note: This feature is an escape-hatch. If Jest doesn't exit at the end of a test run, it means external resources are still being held on to or timers are still pending in your code. It is advised to tear down external resources after each test to make sure Jest can shut down cleanly. You can use `--detectOpenHandles` to help track it down._
+
+### `--help`
+
+Show the help information, similar to this page.
+
+### `--init`
+
+Generate a basic configuration file. Based on your project, Jest will ask you a few questions that will help to generate a `jest.config.js` file with a short description for each option.
+
+### `--injectGlobals`
+
+Insert Jest's globals (`expect`, `test`, `describe`, `beforeEach` etc.) into the global environment. If you set this to `false`, you should import from `@jest/globals`, e.g.
+
+```ts
+import {expect, jest, test} from '@jest/globals';
+
+jest.useFakeTimers();
+
+test('some test', () => {
+ expect(Date.now()).toBe(0);
+});
+```
+
+_Note: This option is only supported using the default `jest-circus` test runner._
+
+### `--json`
+
+Prints the test results in JSON. This mode will send all other test output and user messages to stderr.
+
+### `--lastCommit`
+
+Run all tests affected by file changes in the last commit made. Behaves similarly to `--onlyChanged`.
+
+### `--listTests`
+
+Lists all tests as JSON that Jest will run given the arguments, and exits. This can be used together with `--findRelatedTests` to know which tests Jest will run.
+
+### `--logHeapUsage`
+
+Logs the heap usage after every test. Useful to debug memory leaks. Use together with `--runInBand` and `--expose-gc` in node.
+
+### `--maxConcurrency=`
+
+Prevents Jest from executing more than the specified amount of tests at the same time. Only affects tests that use `test.concurrent`.
+
+### `--maxWorkers=|`
+
+Alias: `-w`. Specifies the maximum number of workers the worker-pool will spawn for running tests. In single run mode, this defaults to the number of the cores available on your machine minus one for the main thread. In watch mode, this defaults to half of the available cores on your machine to ensure Jest is unobtrusive and does not grind your machine to a halt. It may be useful to adjust this in resource limited environments like CIs but the defaults should be adequate for most use-cases.
+
+For environments with variable CPUs available, you can use percentage based configuration: `--maxWorkers=50%`
+
+### `--noStackTrace`
+
+Disables stack trace in test results output.
+
+### `--notify`
+
+Activates notifications for test results. Good for when you don't want your consciousness to be able to focus on anything except JavaScript testing.
+
+### `--onlyChanged`
+
+Alias: `-o`. Attempts to identify which tests to run based on which files have changed in the current repository. Only works if you're running tests in a git/hg repository at the moment and requires a static dependency graph (ie. no dynamic requires).
+
+### `--outputFile=`
+
+Write test results to a file when the `--json` option is also specified. The returned JSON structure is documented in [testResultsProcessor](Configuration.md#testresultsprocessor-string).
+
+### `--passWithNoTests`
+
+Allows the test suite to pass when no files are found.
+
+### `--projects ... `
+
+Run tests from one or more projects, found in the specified paths; also takes path globs. This option is the CLI equivalent of the [`projects`](configuration#projects-arraystring--projectconfig) configuration option. Note that if configuration files are found in the specified paths, _all_ projects specified within those configuration files will be run.
+
+### `--reporters`
+
+Run tests with specified reporters. [Reporter options](configuration#reporters-arraymodulename--modulename-options) are not available via CLI. Example with multiple reporters:
+
+`jest --reporters="default" --reporters="jest-junit"`
+
+### `--resetMocks`
+
+Automatically reset mock state before every test. Equivalent to calling [`jest.resetAllMocks()`](JestObjectAPI.md#jestresetallmocks) before each test. This will lead to any mocks having their fake implementations removed but does not restore their initial implementation.
+
+### `--restoreMocks`
+
+Automatically restore mock state and implementation before every test. Equivalent to calling [`jest.restoreAllMocks()`](JestObjectAPI.md#jestrestoreallmocks) before each test. This will lead to any mocks having their fake implementations removed and restores their initial implementation.
+
+### `--roots`
+
+A list of paths to directories that Jest should use to search for files in.
+
+### `--runInBand`
+
+Alias: `-i`. Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. This can be useful for debugging.
+
+### `--runTestsByPath`
+
+Run only the tests that were specified with their exact paths.
+
+_Note: The default regex matching works fine on small runs, but becomes slow if provided with multiple patterns and/or against a lot of tests. This option replaces the regex matching logic and by that optimizes the time it takes Jest to filter specific test files_
+
+### `--selectProjects ... `
+
+Run only the tests of the specified projects. Jest uses the attribute `displayName` in the configuration to identify each project. If you use this option, you should provide a `displayName` to all your projects.
+
+### `--setupFilesAfterEnv ... `
+
+A list of paths to modules that run some code to configure or to set up the testing framework before each test. Beware that files imported by the setup scripts will not be mocked during testing.
+
+### `--showConfig`
+
+Print your Jest config and then exits.
+
+### `--silent`
+
+Prevent tests from printing messages through the console.
+
+### `--testEnvironmentOptions=`
+
+A JSON string with options that will be passed to the `testEnvironment`. The relevant options depend on the environment.
+
+### `--testLocationInResults`
+
+Adds a `location` field to test results. Useful if you want to report the location of a test in a reporter.
+
+Note that `column` is 0-indexed while `line` is not.
+
+```json
+{
+ "column": 4,
+ "line": 5
+}
+```
+
+### `--testNamePattern=`
+
+Alias: -t. Run only tests with a name that matches the regex. For example, suppose you want to run only tests related to authorization which will have names like "GET /api/posts with auth", then you can use jest -t=auth.
+
+Note: The regex is matched against the full name, which is a combination of the test name and all its surrounding describe blocks.
+
+### `--testPathIgnorePatterns=|[array]`
+
+A single or array of regexp pattern strings that are tested against all tests paths before executing the test. Contrary to `--testPathPattern`, it will only run those tests with a path that does not match with the provided regexp expressions.
+
+To pass as an array use escaped parentheses and space delimited regexps such as `\(/node_modules/ /tests/e2e/\)`. Alternatively, you can omit parentheses by combining regexps into a single regexp like `/node_modules/|/tests/e2e/`. These two examples are equivalent.
+
+### `--testPathPattern=`
+
+A regexp pattern string that is matched against all tests paths before executing the test. On Windows, you will need to use `/` as a path separator or escape `\` as `\\`.
+
+### `--testRunner=`
+
+Lets you specify a custom test runner.
+
+### `--testSequencer=`
+
+Lets you specify a custom test sequencer. Please refer to the documentation of the corresponding configuration property for details.
+
+### `--testTimeout=`
+
+Default timeout of a test in milliseconds. Default value: 5000.
+
+### `--updateSnapshot`
+
+Alias: `-u`. Use this flag to re-record every snapshot that fails during this test run. Can be used together with a test suite pattern or with `--testNamePattern` to re-record snapshots.
+
+### `--useStderr`
+
+Divert all output to stderr.
+
+### `--verbose`
+
+Display individual test results with the test suite hierarchy.
+
+### `--version`
+
+Alias: `-v`. Print the version and exit.
+
+### `--watch`
+
+Watch files for changes and rerun tests related to changed files. If you want to re-run all tests when a file has changed, use the `--watchAll` option instead.
+
+### `--watchAll`
+
+Watch files for changes and rerun all tests when something changes. If you want to re-run only the tests that depend on the changed files, use the `--watch` option.
+
+Use `--watchAll=false` to explicitly disable the watch mode. Note that in most CI environments, this is automatically handled for you.
+
+### `--watchman`
+
+Whether to use [`watchman`](https://facebook.github.io/watchman/) for file crawling. Defaults to `true`. Disable using `--no-watchman`.
diff --git a/website/versioned_docs/version-27.4/CodeTransformation.md b/website/versioned_docs/version-27.4/CodeTransformation.md
new file mode 100644
index 000000000000..8da5d7a72bc8
--- /dev/null
+++ b/website/versioned_docs/version-27.4/CodeTransformation.md
@@ -0,0 +1,158 @@
+---
+id: code-transformation
+title: Code Transformation
+---
+
+Jest runs the code in your project as JavaScript, but if you use some syntax not supported by Node.js out of the box (such as JSX, types from TypeScript, Vue templates etc.) then you'll need to transform that code into plain JavaScript, similar to what you would do when building for browsers.
+
+Jest supports this via the [`transform` configuration option](Configuration.md#transform-objectstring-pathtotransformer--pathtotransformer-object).
+
+A transformer is a module that provides a synchronous function for transforming source files. For example, if you wanted to be able to use a new language feature in your modules or tests that aren't yet supported by Node, you might plug in one of many compilers that compile a future version of JavaScript to a current one.
+
+Jest will cache the result of a transformation and attempt to invalidate that result based on a number of factors, such as the source of the file being transformed and changing configuration.
+
+## Defaults
+
+Jest ships with one transformer out of the box - `babel-jest`. It will automatically load your project's Babel configuration and transform any file matching the following RegEx: `/\.[jt]sx?$/` meaning any `.js`, `.jsx`, `.ts` and `.tsx` file. In addition, `babel-jest` will inject the Babel plugin necessary for mock hoisting talked about in [ES Module mocking](ManualMocks.md#using-with-es-module-imports).
+
+If you override the `transform` configuration option `babel-jest` will no longer be active, and you'll need to add it manually if you wish to use Babel.
+
+## Writing custom transformers
+
+You can write your own transformer. The API of a transformer is as follows:
+
+```ts
+interface SyncTransformer {
+ /**
+ * Indicates if the transformer is capable of instrumenting the code for code coverage.
+ *
+ * If V8 coverage is _not_ active, and this is `true`, Jest will assume the code is instrumented.
+ * If V8 coverage is _not_ active, and this is `false`. Jest will instrument the code returned by this transformer using Babel.
+ */
+ canInstrument?: boolean;
+ createTransformer?: (options?: OptionType) => SyncTransformer;
+
+ getCacheKey?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => string;
+
+ getCacheKeyAsync?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => Promise;
+
+ process: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => TransformedSource;
+
+ processAsync?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => Promise;
+}
+
+interface AsyncTransformer {
+ /**
+ * Indicates if the transformer is capable of instrumenting the code for code coverage.
+ *
+ * If V8 coverage is _not_ active, and this is `true`, Jest will assume the code is instrumented.
+ * If V8 coverage is _not_ active, and this is `false`. Jest will instrument the code returned by this transformer using Babel.
+ */
+ canInstrument?: boolean;
+ createTransformer?: (options?: OptionType) => AsyncTransformer;
+
+ getCacheKey?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => string;
+
+ getCacheKeyAsync?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => Promise;
+
+ process?: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => TransformedSource;
+
+ processAsync: (
+ sourceText: string,
+ sourcePath: Config.Path,
+ options: TransformOptions,
+ ) => Promise;
+}
+
+type Transformer =
+ | SyncTransformer
+ | AsyncTransformer;
+
+interface TransformOptions {
+ /**
+ * If a transformer does module resolution and reads files, it should populate `cacheFS` so that
+ * Jest avoids reading the same files again, improving performance. `cacheFS` stores entries of
+ *
+ */
+ cacheFS: Map;
+ config: Config.ProjectConfig;
+ /** A stringified version of the configuration - useful in cache busting */
+ configString: string;
+ instrument: boolean;
+ // names are copied from babel: https://babeljs.io/docs/en/options#caller
+ supportsDynamicImport: boolean;
+ supportsExportNamespaceFrom: boolean;
+ supportsStaticESM: boolean;
+ supportsTopLevelAwait: boolean;
+ /** the options passed through Jest's config by the user */
+ transformerConfig: OptionType;
+}
+
+type TransformedSource =
+ | {code: string; map?: RawSourceMap | string | null}
+ | string;
+
+// Config.ProjectConfig can be seen in code [here](https://github.com/facebook/jest/blob/v26.6.3/packages/jest-types/src/Config.ts#L323)
+// RawSourceMap comes from [`source-map`](https://github.com/mozilla/source-map/blob/0.6.1/source-map.d.ts#L6-L12)
+```
+
+As can be seen, only `process` or `processAsync` is mandatory to implement, although we highly recommend implementing `getCacheKey` as well, so we don't waste resources transpiling the same source file when we can read its previous result from disk. You can use [`@jest/create-cache-key-function`](https://www.npmjs.com/package/@jest/create-cache-key-function) to help implement it.
+
+Note that [ECMAScript module](ECMAScriptModules.md) support is indicated by the passed in `supports*` options. Specifically `supportsDynamicImport: true` means the transformer can return `import()` expressions, which is supported by both ESM and CJS. If `supportsStaticESM: true` it means top level `import` statements are supported and the code will be interpreted as ESM and not CJS. See [Node's docs](https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs) for details on the differences.
+
+### Examples
+
+### TypeScript with type checking
+
+While `babel-jest` by default will transpile TypeScript files, Babel will not verify the types. If you want that you can use [`ts-jest`](https://github.com/kulshekhar/ts-jest).
+
+#### Transforming images to their path
+
+Importing images is a way to include them in your browser bundle, but they are not valid JavaScript. One way of handling it in Jest is to replace the imported value with its filename.
+
+```js title="fileTransformer.js"
+const path = require('path');
+
+module.exports = {
+ process(src, filename, config, options) {
+ return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+ },
+};
+```
+
+```js title="jest.config.js"
+module.exports = {
+ transform: {
+ '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+ '/fileTransformer.js',
+ },
+};
+```
diff --git a/website/versioned_docs/version-27.4/Configuration.md b/website/versioned_docs/version-27.4/Configuration.md
new file mode 100644
index 000000000000..60ee6f4c889f
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Configuration.md
@@ -0,0 +1,1454 @@
+---
+id: configuration
+title: Configuring Jest
+---
+
+Jest's configuration can be defined in the `package.json` file of your project, or through a `jest.config.js`, or `jest.config.ts` file or through the `--config ` option. If you'd like to use your `package.json` to store Jest's config, the `"jest"` key should be used on the top level so Jest will know how to find your settings:
+
+```json
+{
+ "name": "my-project",
+ "jest": {
+ "verbose": true
+ }
+}
+```
+
+Or through JavaScript:
+
+```js title="jest.config.js"
+// Sync object
+/** @type {import('@jest/types').Config.InitialOptions} */
+const config = {
+ verbose: true,
+};
+
+module.exports = config;
+
+// Or async function
+module.exports = async () => {
+ return {
+ verbose: true,
+ };
+};
+```
+
+Or through TypeScript (if `ts-node` is installed):
+
+```ts title="jest.config.ts"
+import type {Config} from '@jest/types';
+
+// Sync object
+const config: Config.InitialOptions = {
+ verbose: true,
+};
+export default config;
+
+// Or async function
+export default async (): Promise => {
+ return {
+ verbose: true,
+ };
+};
+```
+
+Please keep in mind that the resulting configuration must be JSON-serializable.
+
+When using the `--config` option, the JSON file must not contain a "jest" key:
+
+```json
+{
+ "bail": 1,
+ "verbose": true
+}
+```
+
+## Options
+
+These options let you control Jest's behavior in your `package.json` file. The Jest philosophy is to work great by default, but sometimes you just need more configuration power.
+
+### Defaults
+
+You can retrieve Jest's default options to expand them if needed:
+
+```js title="jest.config.js"
+const {defaults} = require('jest-config');
+module.exports = {
+ // ...
+ moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+ // ...
+};
+```
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Reference
+
+### `automock` \[boolean]
+
+Default: `false`
+
+This option tells Jest that all imported modules in your tests should be mocked automatically. All modules used in your tests will have a replacement implementation, keeping the API surface.
+
+Example:
+
+```js title="utils.js"
+export default {
+ authorize: () => {
+ return 'token';
+ },
+ isAuthorized: secret => secret === 'wizard',
+};
+```
+
+```js
+//__tests__/automocking.test.js
+import utils from '../utils';
+
+test('if utils mocked automatically', () => {
+ // Public methods of `utils` are now mock functions
+ expect(utils.authorize.mock).toBeTruthy();
+ expect(utils.isAuthorized.mock).toBeTruthy();
+
+ // You can provide them with your own implementation
+ // or pass the expected return value
+ utils.authorize.mockReturnValue('mocked_token');
+ utils.isAuthorized.mockReturnValue(true);
+
+ expect(utils.authorize()).toBe('mocked_token');
+ expect(utils.isAuthorized('not_wizard')).toBeTruthy();
+});
+```
+
+_Note: Node modules are automatically mocked when you have a manual mock in place (e.g.: `__mocks__/lodash.js`). More info [here](manual-mocks#mocking-node-modules)._
+
+_Note: Core modules, like `fs`, are not mocked by default. They can be mocked explicitly, like `jest.mock('fs')`._
+
+### `bail` \[number | boolean]
+
+Default: `0`
+
+By default, Jest runs all tests and produces all errors into the console upon completion. The bail config option can be used here to have Jest stop running tests after `n` failures. Setting bail to `true` is the same as setting bail to `1`.
+
+### `cacheDirectory` \[string]
+
+Default: `"/tmp/"`
+
+The directory where Jest should store its cached dependency information.
+
+Jest attempts to scan your dependency tree once (up-front) and cache it in order to ease some of the filesystem raking that needs to happen while running tests. This config option lets you customize where Jest stores that cache data on disk.
+
+### `clearMocks` \[boolean]
+
+Default: `false`
+
+Automatically clear mock calls, instances and results before every test. Equivalent to calling [`jest.clearAllMocks()`](JestObjectAPI.md#jestclearallmocks) before each test. This does not remove any mock implementation that may have been provided.
+
+### `collectCoverage` \[boolean]
+
+Default: `false`
+
+Indicates whether the coverage information should be collected while executing the test. Because this retrofits all executed files with coverage collection statements, it may significantly slow down your tests.
+
+### `collectCoverageFrom` \[array]
+
+Default: `undefined`
+
+An array of [glob patterns](https://github.com/micromatch/micromatch) indicating a set of files for which coverage information should be collected. If a file matches the specified glob pattern, coverage information will be collected for it even if no tests exist for this file and it's never required in the test suite.
+
+Example:
+
+```json
+{
+ "collectCoverageFrom": [
+ "**/*.{js,jsx}",
+ "!**/node_modules/**",
+ "!**/vendor/**"
+ ]
+}
+```
+
+This will collect coverage information for all the files inside the project's `rootDir`, except the ones that match `**/node_modules/**` or `**/vendor/**`.
+
+_Note: Each glob pattern is applied in the order they are specified in the config. (For example `["!**/__tests__/**", "**/*.js"]` will not exclude `__tests__` because the negation is overwritten with the second pattern. In order to make the negated glob work in this example it has to come after `**/*.js`.)_
+
+_Note: This option requires `collectCoverage` to be set to true or Jest to be invoked with `--coverage`._
+
+
+ Help:
+ If you are seeing coverage output such as...
+
+```
+=============================== Coverage summary ===============================
+Statements : Unknown% ( 0/0 )
+Branches : Unknown% ( 0/0 )
+Functions : Unknown% ( 0/0 )
+Lines : Unknown% ( 0/0 )
+================================================================================
+Jest: Coverage data for global was not found.
+```
+
+Most likely your glob patterns are not matching any files. Refer to the [micromatch](https://github.com/micromatch/micromatch) documentation to ensure your globs are compatible.
+
+
+
+### `coverageDirectory` \[string]
+
+Default: `undefined`
+
+The directory where Jest should output its coverage files.
+
+### `coveragePathIgnorePatterns` \[array<string>]
+
+Default: `["/node_modules/"]`
+
+An array of regexp pattern strings that are matched against all file paths before executing the test. If the file path matches any of the patterns, coverage information will be skipped.
+
+These pattern strings match against the full path. Use the `` string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories. Example: `["/build/", "/node_modules/"]`.
+
+### `coverageProvider` \[string]
+
+Indicates which provider should be used to instrument code for coverage. Allowed values are `babel` (default) or `v8`.
+
+Note that using `v8` is considered experimental. This uses V8's builtin code coverage rather than one based on Babel. It is not as well tested, and it has also improved in the last few releases of Node. Using the latest versions of node (v14 at the time of this writing) will yield better results.
+
+### `coverageReporters` \[array<string | \[string, options]>]
+
+Default: `["clover", "json", "lcov", "text"]`
+
+A list of reporter names that Jest uses when writing coverage reports. Any [istanbul reporter](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib) can be used.
+
+_Note: Setting this option overwrites the default values. Add `"text"` or `"text-summary"` to see a coverage summary in the console output._
+
+Additional options can be passed using the tuple form. For example, you may hide coverage report lines for all fully-covered files:
+
+```json
+{
+ "coverageReporters": ["clover", "json", "lcov", ["text", {"skipFull": true}]]
+}
+```
+
+For more information about the options object shape refer to `CoverageReporterWithOptions` type in the [type definitions](https://github.com/facebook/jest/tree/main/packages/jest-types/src/Config.ts).
+
+### `coverageThreshold` \[object]
+
+Default: `undefined`
+
+This will be used to configure minimum threshold enforcement for coverage results. Thresholds can be specified as `global`, as a [glob](https://github.com/isaacs/node-glob#glob-primer), and as a directory or file path. If thresholds aren't met, jest will fail. Thresholds specified as a positive number are taken to be the minimum percentage required. Thresholds specified as a negative number represent the maximum number of uncovered entities allowed.
+
+For example, with the following configuration jest will fail if there is less than 80% branch, line, and function coverage, or if there are more than 10 uncovered statements:
+
+```json
+{
+ ...
+ "jest": {
+ "coverageThreshold": {
+ "global": {
+ "branches": 80,
+ "functions": 80,
+ "lines": 80,
+ "statements": -10
+ }
+ }
+ }
+}
+```
+
+If globs or paths are specified alongside `global`, coverage data for matching paths will be subtracted from overall coverage and thresholds will be applied independently. Thresholds for globs are applied to all files matching the glob. If the file specified by path is not found, an error is returned.
+
+For example, with the following configuration:
+
+```json
+{
+ ...
+ "jest": {
+ "coverageThreshold": {
+ "global": {
+ "branches": 50,
+ "functions": 50,
+ "lines": 50,
+ "statements": 50
+ },
+ "./src/components/": {
+ "branches": 40,
+ "statements": 40
+ },
+ "./src/reducers/**/*.js": {
+ "statements": 90
+ },
+ "./src/api/very-important-module.js": {
+ "branches": 100,
+ "functions": 100,
+ "lines": 100,
+ "statements": 100
+ }
+ }
+ }
+}
+```
+
+Jest will fail if:
+
+- The `./src/components` directory has less than 40% branch or statement coverage.
+- One of the files matching the `./src/reducers/**/*.js` glob has less than 90% statement coverage.
+- The `./src/api/very-important-module.js` file has less than 100% coverage.
+- Every remaining file combined has less than 50% coverage (`global`).
+
+### `dependencyExtractor` \[string]
+
+Default: `undefined`
+
+This option allows the use of a custom dependency extractor. It must be a node module that exports an object with an `extract` function. E.g.:
+
+```javascript
+const crypto = require('crypto');
+const fs = require('fs');
+
+module.exports = {
+ extract(code, filePath, defaultExtract) {
+ const deps = defaultExtract(code, filePath);
+ // Scan the file and add dependencies in `deps` (which is a `Set`)
+ return deps;
+ },
+ getCacheKey() {
+ return crypto
+ .createHash('md5')
+ .update(fs.readFileSync(__filename))
+ .digest('hex');
+ },
+};
+```
+
+The `extract` function should return an iterable (`Array`, `Set`, etc.) with the dependencies found in the code.
+
+That module can also contain a `getCacheKey` function to generate a cache key to determine if the logic has changed and any cached artifacts relying on it should be discarded.
+
+### `displayName` \[string, object]
+
+default: `undefined`
+
+Allows for a label to be printed alongside a test while it is running. This becomes more useful in multi-project repositories where there can be many jest configuration files. This visually tells which project a test belongs to. Here are sample valid values.
+
+```js
+module.exports = {
+ displayName: 'CLIENT',
+};
+```
+
+or
+
+```js
+module.exports = {
+ displayName: {
+ name: 'CLIENT',
+ color: 'blue',
+ },
+};
+```
+
+As a secondary option, an object with the properties `name` and `color` can be passed. This allows for a custom configuration of the background color of the displayName. `displayName` defaults to white when its value is a string. Jest uses [chalk](https://github.com/chalk/chalk) to provide the color. As such, all of the valid options for colors supported by chalk are also supported by jest.
+
+### `errorOnDeprecated` \[boolean]
+
+Default: `false`
+
+Make calling deprecated APIs throw helpful error messages. Useful for easing the upgrade process.
+
+### `extensionsToTreatAsEsm` \[array<string>]
+
+Default: `[]`
+
+Jest will run `.mjs` and `.js` files with nearest `package.json`'s `type` field set to `module` as ECMAScript Modules. If you have any other files that should run with native ESM, you need to specify their file extension here.
+
+> Note: Jest's ESM support is still experimental, see [its docs for more details](ECMAScriptModules.md).
+
+```json
+{
+ ...
+ "jest": {
+ "extensionsToTreatAsEsm": [".ts"]
+ }
+}
+```
+
+### `extraGlobals` \[array<string>]
+
+Default: `undefined`
+
+Test files run inside a [vm](https://nodejs.org/api/vm.html), which slows calls to global context properties (e.g. `Math`). With this option you can specify extra properties to be defined inside the vm for faster lookups.
+
+For example, if your tests call `Math` often, you can pass it by setting `extraGlobals`.
+
+```json
+{
+ ...
+ "jest": {
+ "extraGlobals": ["Math"]
+ }
+}
+```
+
+### `forceCoverageMatch` \[array<string>]
+
+Default: `['']`
+
+Test files are normally ignored from collecting code coverage. With this option, you can overwrite this behavior and include otherwise ignored files in code coverage.
+
+For example, if you have tests in source files named with `.t.js` extension as following:
+
+```javascript title="sum.t.js"
+export function sum(a, b) {
+ return a + b;
+}
+
+if (process.env.NODE_ENV === 'test') {
+ test('sum', () => {
+ expect(sum(1, 2)).toBe(3);
+ });
+}
+```
+
+You can collect coverage from those files with setting `forceCoverageMatch`.
+
+```json
+{
+ ...
+ "jest": {
+ "forceCoverageMatch": ["**/*.t.js"]
+ }
+}
+```
+
+### `globals` \[object]
+
+Default: `{}`
+
+A set of global variables that need to be available in all test environments.
+
+For example, the following would create a global `__DEV__` variable set to `true` in all test environments:
+
+```json
+{
+ ...
+ "jest": {
+ "globals": {
+ "__DEV__": true
+ }
+ }
+}
+```
+
+Note that, if you specify a global reference value (like an object or array) here, and some code mutates that value in the midst of running a test, that mutation will _not_ be persisted across test runs for other test files. In addition, the `globals` object must be json-serializable, so it can't be used to specify global functions. For that, you should use `setupFiles`.
+
+### `globalSetup` \[string]
+
+Default: `undefined`
+
+This option allows the use of a custom global setup module which exports an async function that is triggered once before all test suites. This function gets Jest's `globalConfig` object as a parameter.
+
+_Note: A global setup module configured in a project (using multi-project runner) will be triggered only when you run at least one test from this project._
+
+_Note: Any global variables that are defined through `globalSetup` can only be read in `globalTeardown`. You cannot retrieve globals defined here in your test suites._
+
+_Note: While code transformation is applied to the linked setup-file, Jest will **not** transform any code in `node_modules`. This is due to the need to load the actual transformers (e.g. `babel` or `typescript`) to perform transformation._
+
+Example:
+
+```js title="setup.js"
+module.exports = async () => {
+ // ...
+ // Set reference to mongod in order to close the server during teardown.
+ global.__MONGOD__ = mongod;
+};
+```
+
+```js title="teardown.js"
+module.exports = async function () {
+ await global.__MONGOD__.stop();
+};
+```
+
+### `globalTeardown` \[string]
+
+Default: `undefined`
+
+This option allows the use of a custom global teardown module which exports an async function that is triggered once after all test suites. This function gets Jest's `globalConfig` object as a parameter.
+
+_Note: A global teardown module configured in a project (using multi-project runner) will be triggered only when you run at least one test from this project._
+
+_Note: The same caveat concerning transformation of `node_modules` as for `globalSetup` applies to `globalTeardown`._
+
+### `haste` \[object]
+
+Default: `undefined`
+
+This will be used to configure the behavior of `jest-haste-map`, Jest's internal file crawler/cache system. The following options are supported:
+
+```ts
+type HasteConfig = {
+ /** Whether to hash files using SHA-1. */
+ computeSha1?: boolean;
+ /** The platform to use as the default, e.g. 'ios'. */
+ defaultPlatform?: string | null;
+ /** Force use of Node's `fs` APIs rather than shelling out to `find` */
+ forceNodeFilesystemAPI?: boolean;
+ /**
+ * Whether to follow symlinks when crawling for files.
+ * This options cannot be used in projects which use watchman.
+ * Projects with `watchman` set to true will error if this option is set to true.
+ */
+ enableSymlinks?: boolean;
+ /** Path to a custom implementation of Haste. */
+ hasteImplModulePath?: string;
+ /** All platforms to target, e.g ['ios', 'android']. */
+ platforms?: Array;
+ /** Whether to throw on error on module collision. */
+ throwOnModuleCollision?: boolean;
+ /** Custom HasteMap module */
+ hasteMapModulePath?: string;
+};
+```
+
+### `injectGlobals` \[boolean]
+
+Default: `true`
+
+Insert Jest's globals (`expect`, `test`, `describe`, `beforeEach` etc.) into the global environment. If you set this to `false`, you should import from `@jest/globals`, e.g.
+
+```ts
+import {expect, jest, test} from '@jest/globals';
+
+jest.useFakeTimers();
+
+test('some test', () => {
+ expect(Date.now()).toBe(0);
+});
+```
+
+_Note: This option is only supported using the default `jest-circus`. test runner_
+
+### `maxConcurrency` \[number]
+
+Default: `5`
+
+A number limiting the number of tests that are allowed to run at the same time when using `test.concurrent`. Any test above this limit will be queued and executed once a slot is released.
+
+### `maxWorkers` \[number | string]
+
+Specifies the maximum number of workers the worker-pool will spawn for running tests. In single run mode, this defaults to the number of the cores available on your machine minus one for the main thread. In watch mode, this defaults to half of the available cores on your machine to ensure Jest is unobtrusive and does not grind your machine to a halt. It may be useful to adjust this in resource limited environments like CIs but the defaults should be adequate for most use-cases.
+
+For environments with variable CPUs available, you can use percentage based configuration: `"maxWorkers": "50%"`
+
+### `moduleDirectories` \[array<string>]
+
+Default: `["node_modules"]`
+
+An array of directory names to be searched recursively up from the requiring module's location. Setting this option will _override_ the default, if you wish to still search `node_modules` for packages include it along with any other options: `["node_modules", "bower_components"]`
+
+### `moduleFileExtensions` \[array<string>]
+
+Default: `["js", "jsx", "ts", "tsx", "json", "node"]`
+
+An array of file extensions your modules use. If you require modules without specifying a file extension, these are the extensions Jest will look for, in left-to-right order.
+
+We recommend placing the extensions most commonly used in your project on the left, so if you are using TypeScript, you may want to consider moving "ts" and/or "tsx" to the beginning of the array.
+
+### `moduleNameMapper` \[object<string, string | array<string>>]
+
+Default: `null`
+
+A map from regular expressions to module names or to arrays of module names that allow to stub out resources, like images or styles with a single module.
+
+Modules that are mapped to an alias are unmocked by default, regardless of whether automocking is enabled or not.
+
+Use `` string token to refer to [`rootDir`](#rootdir-string) value if you want to use file paths.
+
+Additionally, you can substitute captured regex groups using numbered backreferences.
+
+Example:
+
+```json
+{
+ "moduleNameMapper": {
+ "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
+ "^[./a-zA-Z0-9$_-]+\\.png$": "/RelativeImageStub.js",
+ "module_name_(.*)": "/substituted_module_$1.js",
+ "assets/(.*)": [
+ "/images/$1",
+ "/photos/$1",
+ "/recipes/$1"
+ ]
+ }
+}
+```
+
+The order in which the mappings are defined matters. Patterns are checked one by one until one fits. The most specific rule should be listed first. This is true for arrays of module names as well.
+
+_Note: If you provide module name without boundaries `^$` it may cause hard to spot errors. E.g. `relay` will replace all modules which contain `relay` as a substring in its name: `relay`, `react-relay` and `graphql-relay` will all be pointed to your stub._
+
+### `modulePathIgnorePatterns` \[array<string>]
+
+Default: `[]`
+
+An array of regexp pattern strings that are matched against all module paths before those paths are to be considered 'visible' to the module loader. If a given module's path matches any of the patterns, it will not be `require()`-able in the test environment.
+
+These pattern strings match against the full path. Use the `` string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories. Example: `["/build/"]`.
+
+### `modulePaths` \[array<string>]
+
+Default: `[]`
+
+An alternative API to setting the `NODE_PATH` env variable, `modulePaths` is an array of absolute paths to additional locations to search when resolving modules. Use the `` string token to include the path to your project's root directory. Example: `["/app/"]`.
+
+### `notify` \[boolean]
+
+Default: `false`
+
+Activates notifications for test results.
+
+**Beware:** Jest uses [node-notifier](https://github.com/mikaelbr/node-notifier) to display desktop notifications. On Windows, it creates a new start menu entry on the first use and not display the notification. Notifications will be properly displayed on subsequent runs
+
+### `notifyMode` \[string]
+
+Default: `failure-change`
+
+Specifies notification mode. Requires `notify: true`.
+
+#### Modes
+
+- `always`: always send a notification.
+- `failure`: send a notification when tests fail.
+- `success`: send a notification when tests pass.
+- `change`: send a notification when the status changed.
+- `success-change`: send a notification when tests pass or once when it fails.
+- `failure-change`: send a notification when tests fail or once when it passes.
+
+### `preset` \[string]
+
+Default: `undefined`
+
+A preset that is used as a base for Jest's configuration. A preset should point to an npm module that has a `jest-preset.json`, `jest-preset.js`, `jest-preset.cjs` or `jest-preset.mjs` file at the root.
+
+For example, this preset `foo-bar/jest-preset.js` will be configured as follows:
+
+```json
+{
+ "preset": "foo-bar"
+}
+```
+
+Presets may also be relative to filesystem paths.
+
+```json
+{
+ "preset": "./node_modules/foo-bar/jest-preset.js"
+}
+```
+
+### `prettierPath` \[string]
+
+Default: `'prettier'`
+
+Sets the path to the [`prettier`](https://prettier.io/) node module used to update inline snapshots.
+
+### `projects` \[array<string | ProjectConfig>]
+
+Default: `undefined`
+
+When the `projects` configuration is provided with an array of paths or glob patterns, Jest will run tests in all of the specified projects at the same time. This is great for monorepos or when working on multiple projects at the same time.
+
+```json
+{
+ "projects": ["", "/examples/*"]
+}
+```
+
+This example configuration will run Jest in the root directory as well as in every folder in the examples directory. You can have an unlimited amount of projects running in the same Jest instance.
+
+The projects feature can also be used to run multiple configurations or multiple [runners](#runner-string). For this purpose, you can pass an array of configuration objects. For example, to run both tests and ESLint (via [jest-runner-eslint](https://github.com/jest-community/jest-runner-eslint)) in the same invocation of Jest:
+
+```json
+{
+ "projects": [
+ {
+ "displayName": "test"
+ },
+ {
+ "displayName": "lint",
+ "runner": "jest-runner-eslint",
+ "testMatch": ["/**/*.js"]
+ }
+ ]
+}
+```
+
+_Note: When using multi-project runner, it's recommended to add a `displayName` for each project. This will show the `displayName` of a project next to its tests._
+
+### `reporters` \[array<moduleName | \[moduleName, options]>]
+
+Default: `undefined`
+
+Use this configuration option to add custom reporters to Jest. A custom reporter is a class that implements `onRunStart`, `onTestStart`, `onTestResult`, `onRunComplete` methods that will be called when any of those events occurs.
+
+If custom reporters are specified, the default Jest reporters will be overridden. To keep default reporters, `default` can be passed as a module name.
+
+This will override default reporters:
+
+```json
+{
+ "reporters": ["/my-custom-reporter.js"]
+}
+```
+
+This will use custom reporter in addition to default reporters that Jest provides:
+
+```json
+{
+ "reporters": ["default", "/my-custom-reporter.js"]
+}
+```
+
+Additionally, custom reporters can be configured by passing an `options` object as a second argument:
+
+```json
+{
+ "reporters": [
+ "default",
+ ["/my-custom-reporter.js", {"banana": "yes", "pineapple": "no"}]
+ ]
+}
+```
+
+Custom reporter modules must define a class that takes a `GlobalConfig` and reporter options as constructor arguments:
+
+Example reporter:
+
+```js title="my-custom-reporter.js"
+class MyCustomReporter {
+ constructor(globalConfig, options) {
+ this._globalConfig = globalConfig;
+ this._options = options;
+ }
+
+ onRunComplete(contexts, results) {
+ console.log('Custom reporter output:');
+ console.log('GlobalConfig: ', this._globalConfig);
+ console.log('Options: ', this._options);
+ }
+}
+
+module.exports = MyCustomReporter;
+// or export default MyCustomReporter;
+```
+
+Custom reporters can also force Jest to exit with non-0 code by returning an Error from `getLastError()` methods
+
+```js
+class MyCustomReporter {
+ // ...
+ getLastError() {
+ if (this._shouldFail) {
+ return new Error('my-custom-reporter.js reported an error');
+ }
+ }
+}
+```
+
+For the full list of methods and argument types see `Reporter` interface in [packages/jest-reporters/src/types.ts](https://github.com/facebook/jest/blob/main/packages/jest-reporters/src/types.ts)
+
+### `resetMocks` \[boolean]
+
+Default: `false`
+
+Automatically reset mock state before every test. Equivalent to calling [`jest.resetAllMocks()`](JestObjectAPI.md#jestresetallmocks) before each test. This will lead to any mocks having their fake implementations removed but does not restore their initial implementation.
+
+### `resetModules` \[boolean]
+
+Default: `false`
+
+By default, each test file gets its own independent module registry. Enabling `resetModules` goes a step further and resets the module registry before running each individual test. This is useful to isolate modules for every test so that the local module state doesn't conflict between tests. This can be done programmatically using [`jest.resetModules()`](JestObjectAPI.md#jestresetmodules).
+
+### `resolver` \[string]
+
+Default: `undefined`
+
+This option allows the use of a custom resolver. This resolver must be a node module that exports a function expecting a string as the first argument for the path to resolve and an object with the following structure as the second argument:
+
+```json
+{
+ "basedir": string,
+ "conditions": [string],
+ "defaultResolver": "function(request, options)",
+ "extensions": [string],
+ "moduleDirectory": [string],
+ "paths": [string],
+ "packageFilter": "function(pkg, pkgdir)",
+ "pathFilter": "function(pkg, path, relativePath)",
+ "rootDir": [string]
+}
+```
+
+The function should either return a path to the module that should be resolved or throw an error if the module can't be found.
+
+Note: the defaultResolver passed as an option is the Jest default resolver which might be useful when you write your custom one. It takes the same arguments as your custom one, e.g. `(request, options)`.
+
+For example, if you want to respect Browserify's [`"browser"` field](https://github.com/browserify/browserify-handbook/blob/master/readme.markdown#browser-field), you can use the following configuration:
+
+```json
+{
+ ...
+ "jest": {
+ "resolver": "/resolver.js"
+ }
+}
+```
+
+```js title="resolver.js"
+const browserResolve = require('browser-resolve');
+
+module.exports = browserResolve.sync;
+```
+
+By combining `defaultResolver` and `packageFilter` we can implement a `package.json` "pre-processor" that allows us to change how the default resolver will resolve modules. For example, imagine we want to use the field `"module"` if it is present, otherwise fallback to `"main"`:
+
+```json
+{
+ ...
+ "jest": {
+ "resolver": "my-module-resolve"
+ }
+}
+```
+
+```js
+// my-module-resolve package
+
+module.exports = (request, options) => {
+ // Call the defaultResolver, so we leverage its cache, error handling, etc.
+ return options.defaultResolver(request, {
+ ...options,
+ // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+ packageFilter: pkg => {
+ return {
+ ...pkg,
+ // Alter the value of `main` before resolving the package
+ main: pkg.module || pkg.main,
+ };
+ },
+ });
+};
+```
+
+While Jest does not support [package `exports`](https://nodejs.org/api/packages.html#packages_package_entry_points) (beyond `main`), Jest will provide `conditions` as an option when calling custom resolvers, which can be used to implement support for `exports` in userland. Jest will pass `['import', 'default']` when running a test in ESM mode, and `['require', 'default']` when running with CJS. Additionally, custom test environments can specify an `exportConditions` method which returns an array of conditions that will be passed along with Jest's defaults.
+
+### `restoreMocks` \[boolean]
+
+Default: `false`
+
+Automatically restore mock state and implementation before every test. Equivalent to calling [`jest.restoreAllMocks()`](JestObjectAPI.md#jestrestoreallmocks) before each test. This will lead to any mocks having their fake implementations removed and restores their initial implementation.
+
+### `rootDir` \[string]
+
+Default: The root of the directory containing your Jest [config file](#) _or_ the `package.json` _or_ the [`pwd`](http://en.wikipedia.org/wiki/Pwd) if no `package.json` is found
+
+The root directory that Jest should scan for tests and modules within. If you put your Jest config inside your `package.json` and want the root directory to be the root of your repo, the value for this config param will default to the directory of the `package.json`.
+
+Oftentimes, you'll want to set this to `'src'` or `'lib'`, corresponding to where in your repository the code is stored.
+
+_Note that using `''` as a string token in any other path-based config settings will refer back to this value. So, for example, if you want your [`setupFiles`](#setupfiles-array) config entry to point at the `env-setup.js` file at the root of your project, you could set its value to `["/env-setup.js"]`._
+
+### `roots` \[array<string>]
+
+Default: `[""]`
+
+A list of paths to directories that Jest should use to search for files in.
+
+There are times where you only want Jest to search in a single sub-directory (such as cases where you have a `src/` directory in your repo), but prevent it from accessing the rest of the repo.
+
+_Note: While `rootDir` is mostly used as a token to be re-used in other configuration options, `roots` is used by the internals of Jest to locate **test files and source files**. This applies also when searching for manual mocks for modules from `node_modules` (`__mocks__` will need to live in one of the `roots`)._
+
+_Note: By default, `roots` has a single entry `` but there are cases where you may want to have multiple roots within one project, for example `roots: ["/src/", "/tests/"]`._
+
+### `runner` \[string]
+
+Default: `"jest-runner"`
+
+This option allows you to use a custom runner instead of Jest's default test runner. Examples of runners include:
+
+- [`jest-runner-eslint`](https://github.com/jest-community/jest-runner-eslint)
+- [`jest-runner-mocha`](https://github.com/rogeliog/jest-runner-mocha)
+- [`jest-runner-tsc`](https://github.com/azz/jest-runner-tsc)
+- [`jest-runner-prettier`](https://github.com/keplersj/jest-runner-prettier)
+
+_Note: The `runner` property value can omit the `jest-runner-` prefix of the package name._
+
+To write a test-runner, export a class with which accepts `globalConfig` in the constructor, and has a `runTests` method with the signature:
+
+```ts
+async runTests(
+ tests: Array,
+ watcher: TestWatcher,
+ onStart: OnTestStart,
+ onResult: OnTestSuccess,
+ onFailure: OnTestFailure,
+ options: TestRunnerOptions,
+): Promise
+```
+
+If you need to restrict your test-runner to only run in serial rather than being executed in parallel your class should have the property `isSerial` to be set as `true`.
+
+### `setupFiles` \[array]
+
+Default: `[]`
+
+A list of paths to modules that run some code to configure or set up the testing environment. Each setupFile will be run once per test file. Since every test runs in its own environment, these scripts will be executed in the testing environment before executing [`setupFilesAfterEnv`](#setupfilesafterenv-array) and before the test code itself.
+
+### `setupFilesAfterEnv` \[array]
+
+Default: `[]`
+
+A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed. Since [`setupFiles`](#setupfiles-array) executes before the test framework is installed in the environment, this script file presents you the opportunity of running some code immediately after the test framework has been installed in the environment but before the test code itself.
+
+If you want a path to be [relative to the root directory of your project](#rootdir-string), please include `` inside a path's string, like `"/a-configs-folder"`.
+
+For example, Jest ships with several plug-ins to `jasmine` that work by monkey-patching the jasmine API. If you wanted to add even more jasmine plugins to the mix (or if you wanted some custom, project-wide matchers for example), you could do so in these modules.
+
+_Note: `setupTestFrameworkScriptFile` is deprecated in favor of `setupFilesAfterEnv`._
+
+Example `setupFilesAfterEnv` array in a jest.config.js:
+
+```js
+module.exports = {
+ setupFilesAfterEnv: ['./jest.setup.js'],
+};
+```
+
+Example `jest.setup.js` file
+
+```js
+jest.setTimeout(10000); // in milliseconds
+```
+
+### `slowTestThreshold` \[number]
+
+Default: `5`
+
+The number of seconds after which a test is considered as slow and reported as such in the results.
+
+### `snapshotFormat` \[object]
+
+Default: `undefined`
+
+Allows overriding specific snapshot formatting options documented in the [pretty-format readme](https://www.npmjs.com/package/pretty-format#usage-with-options). For example, this config would have the snapshot formatter not print a prefix for "Object" and "Array":
+
+```json
+{
+ "jest": {
+ "snapshotFormat": {
+ "printBasicPrototype": false
+ }
+ }
+}
+```
+
+```ts
+import {expect, test} from '@jest/globals';
+
+test('does not show prototypes for object and array inline', () => {
+ const object = {
+ array: [{hello: 'Danger'}],
+ };
+ expect(object).toMatchInlineSnapshot(`
+{
+ "array": [
+ {
+ "hello": "Danger",
+ },
+ ],
+}
+ `);
+});
+```
+
+### `snapshotResolver` \[string]
+
+Default: `undefined`
+
+The path to a module that can resolve test<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.
+
+Example snapshot resolver module:
+
+```js
+module.exports = {
+ // resolves from test to snapshot path
+ resolveSnapshotPath: (testPath, snapshotExtension) =>
+ testPath.replace('__tests__', '__snapshots__') + snapshotExtension,
+
+ // resolves from snapshot to test path
+ resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+ snapshotFilePath
+ .replace('__snapshots__', '__tests__')
+ .slice(0, -snapshotExtension.length),
+
+ // Example test path, used for preflight consistency check of the implementation above
+ testPathForConsistencyCheck: 'some/__tests__/example.test.js',
+};
+```
+
+### `snapshotSerializers` \[array<string>]
+
+Default: `[]`
+
+A list of paths to snapshot serializer modules Jest should use for snapshot testing.
+
+Jest has default serializers for built-in JavaScript types, HTML elements (Jest 20.0.0+), ImmutableJS (Jest 20.0.0+) and for React elements. See [snapshot test tutorial](TutorialReactNative.md#snapshot-test) for more information.
+
+Example serializer module:
+
+```js
+// my-serializer-module
+module.exports = {
+ serialize(val, config, indentation, depth, refs, printer) {
+ return 'Pretty foo: ' + printer(val.foo);
+ },
+
+ test(val) {
+ return val && val.hasOwnProperty('foo');
+ },
+};
+```
+
+`printer` is a function that serializes a value using existing plugins.
+
+To use `my-serializer-module` as a serializer, configuration would be as follows:
+
+```json
+{
+ ...
+ "jest": {
+ "snapshotSerializers": ["my-serializer-module"]
+ }
+}
+```
+
+Finally tests would look as follows:
+
+```js
+test(() => {
+ const bar = {
+ foo: {
+ x: 1,
+ y: 2,
+ },
+ };
+
+ expect(bar).toMatchSnapshot();
+});
+```
+
+Rendered snapshot:
+
+```json
+Pretty foo: Object {
+ "x": 1,
+ "y": 2,
+}
+```
+
+To make a dependency explicit instead of implicit, you can call [`expect.addSnapshotSerializer`](ExpectAPI.md#expectaddsnapshotserializerserializer) to add a module for an individual test file instead of adding its path to `snapshotSerializers` in Jest configuration.
+
+More about serializers API can be found [here](https://github.com/facebook/jest/tree/main/packages/pretty-format/README.md#serialize).
+
+### `testEnvironment` \[string]
+
+Default: `"node"`
+
+The test environment that will be used for testing. The default environment in Jest is a Node.js environment. If you are building a web app, you can use a browser-like environment through [`jsdom`](https://github.com/jsdom/jsdom) instead.
+
+By adding a `@jest-environment` docblock at the top of the file, you can specify another environment to be used for all tests in that file:
+
+```js
+/**
+ * @jest-environment jsdom
+ */
+
+test('use jsdom in this test file', () => {
+ const element = document.createElement('div');
+ expect(element).not.toBeNull();
+});
+```
+
+You can create your own module that will be used for setting up the test environment. The module must export a class with `setup`, `teardown` and `getVmContext` methods. You can also pass variables from this module to your test suites by assigning them to `this.global` object – this will make them available in your test suites as global variables.
+
+The class may optionally expose an asynchronous `handleTestEvent` method to bind to events fired by [`jest-circus`](https://github.com/facebook/jest/tree/main/packages/jest-circus). Normally, `jest-circus` test runner would pause until a promise returned from `handleTestEvent` gets fulfilled, **except for the next events**: `start_describe_definition`, `finish_describe_definition`, `add_hook`, `add_test` or `error` (for the up-to-date list you can look at [SyncEvent type in the types definitions](https://github.com/facebook/jest/tree/main/packages/jest-types/src/Circus.ts)). That is caused by backward compatibility reasons and `process.on('unhandledRejection', callback)` signature, but that usually should not be a problem for most of the use cases.
+
+Any docblock pragmas in test files will be passed to the environment constructor and can be used for per-test configuration. If the pragma does not have a value, it will be present in the object with its value set to an empty string. If the pragma is not present, it will not be present in the object.
+
+To use this class as your custom environment, refer to it by its full path within the project. For example, if your class is stored in `my-custom-environment.js` in some subfolder of your project, then the annotation might look like this:
+
+```js
+/**
+ * @jest-environment ./src/test/my-custom-environment
+ */
+```
+
+_Note: TestEnvironment is sandboxed. Each test suite will trigger setup/teardown in their own TestEnvironment._
+
+Example:
+
+```js
+// my-custom-environment
+const NodeEnvironment = require('jest-environment-node');
+
+class CustomEnvironment extends NodeEnvironment {
+ constructor(config, context) {
+ super(config, context);
+ this.testPath = context.testPath;
+ this.docblockPragmas = context.docblockPragmas;
+ }
+
+ async setup() {
+ await super.setup();
+ await someSetupTasks(this.testPath);
+ this.global.someGlobalObject = createGlobalObject();
+
+ // Will trigger if docblock contains @my-custom-pragma my-pragma-value
+ if (this.docblockPragmas['my-custom-pragma'] === 'my-pragma-value') {
+ // ...
+ }
+ }
+
+ async teardown() {
+ this.global.someGlobalObject = destroyGlobalObject();
+ await someTeardownTasks();
+ await super.teardown();
+ }
+
+ getVmContext() {
+ return super.getVmContext();
+ }
+
+ async handleTestEvent(event, state) {
+ if (event.name === 'test_start') {
+ // ...
+ }
+ }
+}
+
+module.exports = CustomEnvironment;
+```
+
+```js
+// my-test-suite
+/**
+ * @jest-environment ./my-custom-environment
+ */
+let someGlobalObject;
+
+beforeAll(() => {
+ someGlobalObject = global.someGlobalObject;
+});
+```
+
+### `testEnvironmentOptions` \[Object]
+
+Default: `{}`
+
+Test environment options that will be passed to the `testEnvironment`. The relevant options depend on the environment. For example, you can override options given to [jsdom](https://github.com/jsdom/jsdom) such as `{html: "", userAgent: "Agent/007"}`.
+
+### `testFailureExitCode` \[number]
+
+Default: `1`
+
+The exit code Jest returns on test failure.
+
+_Note: This does not change the exit code in the case of Jest errors (e.g. invalid configuration)._
+
+### `testMatch` \[array<string>]
+
+(default: `[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]`)
+
+The glob patterns Jest uses to detect test files. By default it looks for `.js`, `.jsx`, `.ts` and `.tsx` files inside of `__tests__` folders, as well as any files with a suffix of `.test` or `.spec` (e.g. `Component.test.js` or `Component.spec.js`). It will also find files called `test.js` or `spec.js`.
+
+See the [micromatch](https://github.com/micromatch/micromatch) package for details of the patterns you can specify.
+
+See also [`testRegex` [string | array<string>]](#testregex-string--arraystring), but note that you cannot specify both options.
+
+_Note: Each glob pattern is applied in the order they are specified in the config. (For example `["!**/__fixtures__/**", "**/__tests__/**/*.js"]` will not exclude `__fixtures__` because the negation is overwritten with the second pattern. In order to make the negated glob work in this example it has to come after `**/__tests__/**/*.js`.)_
+
+### `testPathIgnorePatterns` \[array<string>]
+
+Default: `["/node_modules/"]`
+
+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.
+
+These pattern strings match against the full path. Use the `` string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories. Example: `["/build/", "/node_modules/"]`.
+
+### `testRegex` \[string | array<string>]
+
+Default: `(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$`
+
+The pattern or patterns Jest uses to detect test files. By default it looks for `.js`, `.jsx`, `.ts` and `.tsx` files inside of `__tests__` folders, as well as any files with a suffix of `.test` or `.spec` (e.g. `Component.test.js` or `Component.spec.js`). It will also find files called `test.js` or `spec.js`. See also [`testMatch` [array<string>]](#testmatch-arraystring), but note that you cannot specify both options.
+
+The following is a visualization of the default regex:
+
+```bash
+├── __tests__
+│ └── component.spec.js # test
+│ └── anything # test
+├── package.json # not test
+├── foo.test.js # test
+├── bar.spec.jsx # test
+└── component.js # not test
+```
+
+_Note: `testRegex` will try to detect test files using the **absolute file path**, therefore, having a folder with a name that matches it will run all the files as tests_
+
+### `testResultsProcessor` \[string]
+
+Default: `undefined`
+
+This option allows the use of a custom results processor. This processor must be a node module that exports a function expecting an object with the following structure as the first argument and return it:
+
+```json
+{
+ "success": boolean,
+ "startTime": epoch,
+ "numTotalTestSuites": number,
+ "numPassedTestSuites": number,
+ "numFailedTestSuites": number,
+ "numRuntimeErrorTestSuites": number,
+ "numTotalTests": number,
+ "numPassedTests": number,
+ "numFailedTests": number,
+ "numPendingTests": number,
+ "numTodoTests": number,
+ "openHandles": Array,
+ "testResults": [{
+ "numFailingTests": number,
+ "numPassingTests": number,
+ "numPendingTests": number,
+ "testResults": [{
+ "title": string (message in it block),
+ "status": "failed" | "pending" | "passed",
+ "ancestorTitles": [string (message in describe blocks)],
+ "failureMessages": [string],
+ "numPassingAsserts": number,
+ "location": {
+ "column": number,
+ "line": number
+ }
+ },
+ ...
+ ],
+ "perfStats": {
+ "start": epoch,
+ "end": epoch
+ },
+ "testFilePath": absolute path to test file,
+ "coverage": {}
+ },
+ "testExecError:" (exists if there was a top-level failure) {
+ "message": string
+ "stack": string
+ }
+ ...
+ ]
+}
+```
+
+### `testRunner` \[string]
+
+Default: `jest-circus/runner`
+
+This option allows the use of a custom test runner. The default is `jest-circus`. A custom test runner can be provided by specifying a path to a test runner implementation.
+
+The test runner module must export a function with the following signature:
+
+```ts
+function testRunner(
+ globalConfig: GlobalConfig,
+ config: ProjectConfig,
+ environment: Environment,
+ runtime: Runtime,
+ testPath: string,
+): Promise;
+```
+
+An example of such function can be found in our default [jasmine2 test runner package](https://github.com/facebook/jest/blob/main/packages/jest-jasmine2/src/index.ts).
+
+### `testSequencer` \[string]
+
+Default: `@jest/test-sequencer`
+
+This option allows you to use a custom sequencer instead of Jest's default. `sort` may optionally return a Promise.
+
+Example:
+
+Sort test path alphabetically.
+
+```js title="testSequencer.js"
+const Sequencer = require('@jest/test-sequencer').default;
+
+class CustomSequencer extends Sequencer {
+ sort(tests) {
+ // Test structure information
+ // https://github.com/facebook/jest/blob/6b8b1404a1d9254e7d5d90a8934087a9c9899dab/packages/jest-runner/src/types.ts#L17-L21
+ const copyTests = Array.from(tests);
+ return copyTests.sort((testA, testB) => (testA.path > testB.path ? 1 : -1));
+ }
+}
+
+module.exports = CustomSequencer;
+```
+
+Use it in your Jest config file like this:
+
+```json
+{
+ "testSequencer": "path/to/testSequencer.js"
+}
+```
+
+### `testTimeout` \[number]
+
+Default: `5000`
+
+Default timeout of a test in milliseconds.
+
+### `testURL` \[string]
+
+Default: `http://localhost`
+
+This option sets the URL for the jsdom environment. It is reflected in properties such as `location.href`.
+
+### `timers` \[string]
+
+Default: `real`
+
+Setting this value to `fake` or `modern` enables fake timers for all tests by default. Fake timers are useful when a piece of code sets a long timeout that we don't want to wait for in a test. You can learn more about fake timers [here](JestObjectAPI.md#jestusefaketimersimplementation-modern--legacy).
+
+If the value is `legacy`, the old implementation will be used as implementation instead of one backed by [`@sinonjs/fake-timers`](https://github.com/sinonjs/fake-timers).
+
+### `transform` \[object<string, pathToTransformer | \[pathToTransformer, object]>]
+
+Default: `{"\\.[jt]sx?$": "babel-jest"}`
+
+A map from regular expressions to paths to transformers. A transformer is a module that provides a synchronous function for transforming source files. For example, if you wanted to be able to use a new language feature in your modules or tests that aren't yet supported by node, you might plug in one of many compilers that compile a future version of JavaScript to a current one. Example: see the [examples/typescript](https://github.com/facebook/jest/blob/main/examples/typescript/package.json#L16) example or the [webpack tutorial](Webpack.md).
+
+Examples of such compilers include:
+
+- [Babel](https://babeljs.io/)
+- [TypeScript](http://www.typescriptlang.org/)
+- To build your own please visit the [Custom Transformer](CodeTransformation.md#writing-custom-transformers) section
+
+You can pass configuration to a transformer like `{filePattern: ['path-to-transformer', {options}]}` For example, to configure babel-jest for non-default behavior, `{"\\.js$": ['babel-jest', {rootMode: "upward"}]}`
+
+_Note: a transformer is only run once per file unless the file has changed. During the development of a transformer it can be useful to run Jest with `--no-cache` to frequently [delete Jest's cache](Troubleshooting.md#caching-issues)._
+
+_Note: when adding additional code transformers, this will overwrite the default config and `babel-jest` is no longer automatically loaded. If you want to use it to compile JavaScript or Typescript, it has to be explicitly defined by adding `{"\\.[jt]sx?$": "babel-jest"}` to the transform property. See [babel-jest plugin](https://github.com/facebook/jest/tree/main/packages/babel-jest#setup)_
+
+A transformer must be an object with at least a `process` function, and it's also recommended to include a `getCacheKey` function. If your transformer is written in ESM you should have a default export with that object.
+
+If the tests are written using [native ESM](ECMAScriptModules.md) the transformer can export `processAsync` and `getCacheKeyAsync` instead or in addition to the synchronous variants.
+
+### `transformIgnorePatterns` \[array<string>]
+
+Default: `["/node_modules/", "\\.pnp\\.[^\\\/]+$"]`
+
+An array of regexp pattern strings that are matched against all source file paths before transformation. If the file path matches **any** of the patterns, it will not be transformed.
+
+Providing regexp patterns that overlap with each other may result in files not being transformed that you expected to be transformed. For example:
+
+```json
+{
+ "transformIgnorePatterns": ["/node_modules/(?!(foo|bar)/)", "/bar/"]
+}
+```
+
+The first pattern will match (and therefore not transform) files inside `/node_modules` except for those in `/node_modules/foo/` and `/node_modules/bar/`. The second pattern will match (and therefore not transform) files inside any path with `/bar/` in it. With the two together, files in `/node_modules/bar/` will not be transformed because it does match the second pattern, even though it was excluded by the first.
+
+Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside `node_modules` are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use `transformIgnorePatterns` to allow transpiling such modules. You'll find a good example of this use case in [React Native Guide](/docs/tutorial-react-native#transformignorepatterns-customization).
+
+These pattern strings match against the full path. Use the `` string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories.
+
+Example:
+
+```json
+{
+ "transformIgnorePatterns": [
+ "/bower_components/",
+ "/node_modules/"
+ ]
+}
+```
+
+### `unmockedModulePathPatterns` \[array<string>]
+
+Default: `[]`
+
+An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them. If a module's path matches any of the patterns in this list, it will not be automatically mocked by the module loader.
+
+This is useful for some commonly used 'utility' modules that are almost always used as implementation details almost all the time (like underscore/lo-dash, etc). It's generally a best practice to keep this list as small as possible and always use explicit `jest.mock()`/`jest.unmock()` calls in individual tests. Explicit per-test setup is far easier for other readers of the test to reason about the environment the test will run in.
+
+It is possible to override this setting in individual tests by explicitly calling `jest.mock()` at the top of the test file.
+
+### `verbose` \[boolean]
+
+Default: `false`
+
+Indicates whether each individual test should be reported during the run. All errors will also still be shown on the bottom after execution. Note that if there is only one test file being run it will default to `true`.
+
+### `watchPathIgnorePatterns` \[array<string>]
+
+Default: `[]`
+
+An array of RegExp patterns that are matched against all source file paths before re-running tests in watch mode. If the file path matches any of the patterns, when it is updated, it will not trigger a re-run of tests.
+
+These patterns match against the full path. Use the `` string token to include the path to your project's root directory to prevent it from accidentally ignoring all of your files in different environments that may have different root directories. Example: `["/node_modules/"]`.
+
+Even if nothing is specified here, the watcher will ignore changes to any hidden files and directories, i.e. files and folders that begin with a dot (`.`).
+
+### `watchPlugins` \[array<string | \[string, Object]>]
+
+Default: `[]`
+
+This option allows you to use custom watch plugins. Read more about watch plugins [here](watch-plugins).
+
+Examples of watch plugins include:
+
+- [`jest-watch-master`](https://github.com/rickhanlonii/jest-watch-master)
+- [`jest-watch-select-projects`](https://github.com/rogeliog/jest-watch-select-projects)
+- [`jest-watch-suspend`](https://github.com/unional/jest-watch-suspend)
+- [`jest-watch-typeahead`](https://github.com/jest-community/jest-watch-typeahead)
+- [`jest-watch-yarn-workspaces`](https://github.com/cameronhunter/jest-watch-directories/tree/master/packages/jest-watch-yarn-workspaces)
+
+_Note: The values in the `watchPlugins` property value can omit the `jest-watch-` prefix of the package name._
+
+### `watchman` \[boolean]
+
+Default: `true`
+
+Whether to use [`watchman`](https://facebook.github.io/watchman/) for file crawling.
+
+### `//` \[string]
+
+No default
+
+This option allows comments in `package.json`. Include the comment text as the value of this key anywhere in `package.json`.
+
+Example:
+
+```json
+{
+ "name": "my-project",
+ "jest": {
+ "//": "Comment goes here",
+ "verbose": true
+ }
+}
+```
diff --git a/website/versioned_docs/version-27.4/DynamoDB.md b/website/versioned_docs/version-27.4/DynamoDB.md
new file mode 100644
index 000000000000..a5abd9147aed
--- /dev/null
+++ b/website/versioned_docs/version-27.4/DynamoDB.md
@@ -0,0 +1,81 @@
+---
+id: dynamodb
+title: Using with DynamoDB
+---
+
+With the [Global Setup/Teardown](Configuration.md#globalsetup-string) and [Async Test Environment](Configuration.md#testenvironment-string) APIs, Jest can work smoothly with [DynamoDB](https://aws.amazon.com/dynamodb/).
+
+## Use jest-dynamodb Preset
+
+[Jest DynamoDB](https://github.com/shelfio/jest-dynamodb) provides all required configuration to run your tests using DynamoDB.
+
+1. First, install `@shelf/jest-dynamodb`
+
+```
+yarn add @shelf/jest-dynamodb --dev
+```
+
+2. Specify preset in your Jest configuration:
+
+```json
+{
+ "preset": "@shelf/jest-dynamodb"
+}
+```
+
+3. Create `jest-dynamodb-config.js` and define DynamoDB tables
+
+See [Create Table API](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/DynamoDB.html#createTable-property)
+
+```js
+module.exports = {
+ tables: [
+ {
+ TableName: `files`,
+ KeySchema: [{AttributeName: 'id', KeyType: 'HASH'}],
+ AttributeDefinitions: [{AttributeName: 'id', AttributeType: 'S'}],
+ ProvisionedThroughput: {ReadCapacityUnits: 1, WriteCapacityUnits: 1},
+ },
+ // etc
+ ],
+};
+```
+
+4. Configure DynamoDB client
+
+```js
+const {DocumentClient} = require('aws-sdk/clients/dynamodb');
+
+const isTest = process.env.JEST_WORKER_ID;
+const config = {
+ convertEmptyValues: true,
+ ...(isTest && {
+ endpoint: 'localhost:8000',
+ sslEnabled: false,
+ region: 'local-env',
+ }),
+};
+
+const ddb = new DocumentClient(config);
+```
+
+5. Write tests
+
+```js
+it('should insert item into table', async () => {
+ await ddb
+ .put({TableName: 'files', Item: {id: '1', hello: 'world'}})
+ .promise();
+
+ const {Item} = await ddb.get({TableName: 'files', Key: {id: '1'}}).promise();
+
+ expect(Item).toEqual({
+ id: '1',
+ hello: 'world',
+ });
+});
+```
+
+There's no need to load any dependencies.
+
+See [documentation](https://github.com/shelfio/jest-dynamodb) for details.
diff --git a/website/versioned_docs/version-27.4/ECMAScriptModules.md b/website/versioned_docs/version-27.4/ECMAScriptModules.md
new file mode 100644
index 000000000000..64a1e003b502
--- /dev/null
+++ b/website/versioned_docs/version-27.4/ECMAScriptModules.md
@@ -0,0 +1,31 @@
+---
+id: ecmascript-modules
+title: ECMAScript Modules
+---
+
+Jest ships with _experimental_ support for ECMAScript Modules (ESM).
+
+> Note that due to its experimental nature there are many bugs and missing features in Jest's implementation, both known and unknown. You should check out the [tracking issue](https://github.com/facebook/jest/issues/9430) and the [label](https://github.com/facebook/jest/labels/ES%20Modules) on the issue tracker for the latest status.
+
+> Also note that the APIs Jest uses to implement ESM support is still [considered experimental by Node](https://nodejs.org/api/vm.html#vm_class_vm_module) (as of version `14.13.1`).
+
+With the warnings out of the way, this is how you activate ESM support in your tests.
+
+1. Ensure you either disable [code transforms](./configuration#transform-objectstring-pathtotransformer--pathtotransformer-object) by passing `transform: {}` or otherwise configure your transformer to emit ESM rather than the default CommonJS (CJS).
+1. Execute `node` with `--experimental-vm-modules`, e.g. `node --experimental-vm-modules node_modules/jest/bin/jest.js` or `NODE_OPTIONS=--experimental-vm-modules npx jest` etc.. On Windows, you can use [`cross-env`](https://github.com/kentcdodds/cross-env) to be able to set environment variables.
+1. Beyond that, we attempt to follow `node`'s logic for activating "ESM mode" (such as looking at `type` in `package.json` or `.mjs` files), see [their docs](https://nodejs.org/api/esm.html#esm_enabling) for details.
+1. If you want to treat other file extensions (such as `.jsx` or `.ts`) as ESM, please use the [`extensionsToTreatAsEsm` option](Configuration.md#extensionstotreatasesm-arraystring).
+
+## Differences between ESM and CommonJS
+
+Most of the differences are explained in [Node's documentation](https://nodejs.org/api/esm.html#esm_differences_between_es_modules_and_commonjs), but in addition to the things mentioned there, Jest injects a special variable into all executed files - the [`jest` object](JestObjectAPI.md). To access this object in ESM, you need to import it from the `@jest/globals` module.
+
+```js
+import {jest} from '@jest/globals';
+
+jest.useFakeTimers();
+
+// etc.
+```
+
+Please note that we currently don't support `jest.mock` in a clean way in ESM, but that is something we intend to add proper support for in the future. Follow [this issue](https://github.com/facebook/jest/issues/10025) for updates.
diff --git a/website/versioned_docs/version-27.4/EnvironmentVariables.md b/website/versioned_docs/version-27.4/EnvironmentVariables.md
new file mode 100644
index 000000000000..fb50c3e72d08
--- /dev/null
+++ b/website/versioned_docs/version-27.4/EnvironmentVariables.md
@@ -0,0 +1,14 @@
+---
+id: environment-variables
+title: Environment Variables
+---
+
+Jest sets the following environment variables:
+
+### `NODE_ENV`
+
+Set to `'test'` if it's not already set to something else.
+
+### `JEST_WORKER_ID`
+
+Each worker process is assigned a unique id (index-based that starts with `1`). This is set to `1` for all tests when [`runInBand`](CLI.md#--runinband) is set to true.
diff --git a/website/versioned_docs/version-27.4/Es6ClassMocks.md b/website/versioned_docs/version-27.4/Es6ClassMocks.md
new file mode 100644
index 000000000000..37d26d744624
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Es6ClassMocks.md
@@ -0,0 +1,354 @@
+---
+id: es6-class-mocks
+title: ES6 Class Mocks
+---
+
+Jest can be used to mock ES6 classes that are imported into files you want to test.
+
+ES6 classes are constructor functions with some syntactic sugar. Therefore, any mock for an ES6 class must be a function or an actual ES6 class (which is, again, another function). So you can mock them using [mock functions](MockFunctions.md).
+
+## An ES6 Class Example
+
+We'll use a contrived example of a class that plays sound files, `SoundPlayer`, and a consumer class which uses that class, `SoundPlayerConsumer`. We'll mock `SoundPlayer` in our tests for `SoundPlayerConsumer`.
+
+```javascript title="sound-player.js"
+export default class SoundPlayer {
+ constructor() {
+ this.foo = 'bar';
+ }
+
+ playSoundFile(fileName) {
+ console.log('Playing sound file ' + fileName);
+ }
+}
+```
+
+```javascript title="sound-player-consumer.js"
+import SoundPlayer from './sound-player';
+
+export default class SoundPlayerConsumer {
+ constructor() {
+ this.soundPlayer = new SoundPlayer();
+ }
+
+ playSomethingCool() {
+ const coolSoundFileName = 'song.mp3';
+ this.soundPlayer.playSoundFile(coolSoundFileName);
+ }
+}
+```
+
+## The 4 ways to create an ES6 class mock
+
+### Automatic mock
+
+Calling `jest.mock('./sound-player')` returns a useful "automatic mock" you can use to spy on calls to the class constructor and all of its methods. It replaces the ES6 class with a mock constructor, and replaces all of its methods with [mock functions](MockFunctions.md) that always return `undefined`. Method calls are saved in `theAutomaticMock.mock.instances[index].methodName.mock.calls`.
+
+Please note that if you use arrow functions in your classes, they will _not_ be part of the mock. The reason for that is that arrow functions are not present on the object's prototype, they are merely properties holding a reference to a function.
+
+If you don't need to replace the implementation of the class, this is the easiest option to set up. For example:
+
+```javascript
+import SoundPlayer from './sound-player';
+import SoundPlayerConsumer from './sound-player-consumer';
+jest.mock('./sound-player'); // SoundPlayer is now a mock constructor
+
+beforeEach(() => {
+ // Clear all instances and calls to constructor and all methods:
+ SoundPlayer.mockClear();
+});
+
+it('We can check if the consumer called the class constructor', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ expect(SoundPlayer).toHaveBeenCalledTimes(1);
+});
+
+it('We can check if the consumer called a method on the class instance', () => {
+ // Show that mockClear() is working:
+ expect(SoundPlayer).not.toHaveBeenCalled();
+
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ // Constructor should have been called again:
+ expect(SoundPlayer).toHaveBeenCalledTimes(1);
+
+ const coolSoundFileName = 'song.mp3';
+ soundPlayerConsumer.playSomethingCool();
+
+ // mock.instances is available with automatic mocks:
+ const mockSoundPlayerInstance = SoundPlayer.mock.instances[0];
+ const mockPlaySoundFile = mockSoundPlayerInstance.playSoundFile;
+ expect(mockPlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
+ // Equivalent to above check:
+ expect(mockPlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
+ expect(mockPlaySoundFile).toHaveBeenCalledTimes(1);
+});
+```
+
+### Manual mock
+
+Create a [manual mock](ManualMocks.md) by saving a mock implementation in the `__mocks__` folder. This allows you to specify the implementation, and it can be used across test files.
+
+```javascript title="__mocks__/sound-player.js"
+// Import this named export into your test file:
+export const mockPlaySoundFile = jest.fn();
+const mock = jest.fn().mockImplementation(() => {
+ return {playSoundFile: mockPlaySoundFile};
+});
+
+export default mock;
+```
+
+Import the mock and the mock method shared by all instances:
+
+```javascript title="sound-player-consumer.test.js"
+import SoundPlayer, {mockPlaySoundFile} from './sound-player';
+import SoundPlayerConsumer from './sound-player-consumer';
+jest.mock('./sound-player'); // SoundPlayer is now a mock constructor
+
+beforeEach(() => {
+ // Clear all instances and calls to constructor and all methods:
+ SoundPlayer.mockClear();
+ mockPlaySoundFile.mockClear();
+});
+
+it('We can check if the consumer called the class constructor', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ expect(SoundPlayer).toHaveBeenCalledTimes(1);
+});
+
+it('We can check if the consumer called a method on the class instance', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ const coolSoundFileName = 'song.mp3';
+ soundPlayerConsumer.playSomethingCool();
+ expect(mockPlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
+});
+```
+
+### Calling [`jest.mock()`](JestObjectAPI.md#jestmockmodulename-factory-options) with the module factory parameter
+
+`jest.mock(path, moduleFactory)` takes a **module factory** argument. A module factory is a function that returns the mock.
+
+In order to mock a constructor function, the module factory must return a constructor function. In other words, the module factory must be a function that returns a function - a higher-order function (HOF).
+
+```javascript
+import SoundPlayer from './sound-player';
+const mockPlaySoundFile = jest.fn();
+jest.mock('./sound-player', () => {
+ return jest.fn().mockImplementation(() => {
+ return {playSoundFile: mockPlaySoundFile};
+ });
+});
+```
+
+A limitation with the factory parameter is that, since calls to `jest.mock()` are hoisted to the top of the file, it's not possible to first define a variable and then use it in the factory. An exception is made for variables that start with the word 'mock'. It's up to you to guarantee that they will be initialized on time! For example, the following will throw an out-of-scope error due to the use of 'fake' instead of 'mock' in the variable declaration:
+
+```javascript
+// Note: this will fail
+import SoundPlayer from './sound-player';
+const fakePlaySoundFile = jest.fn();
+jest.mock('./sound-player', () => {
+ return jest.fn().mockImplementation(() => {
+ return {playSoundFile: fakePlaySoundFile};
+ });
+});
+```
+
+### Replacing the mock using [`mockImplementation()`](MockFunctionAPI.md#mockfnmockimplementationfn) or [`mockImplementationOnce()`](MockFunctionAPI.md#mockfnmockimplementationoncefn)
+
+You can replace all of the above mocks in order to change the implementation, for a single test or all tests, by calling `mockImplementation()` on the existing mock.
+
+Calls to jest.mock are hoisted to the top of the code. You can specify a mock later, e.g. in `beforeAll()`, by calling `mockImplementation()` (or `mockImplementationOnce()`) on the existing mock instead of using the factory parameter. This also allows you to change the mock between tests, if needed:
+
+```javascript
+import SoundPlayer from './sound-player';
+import SoundPlayerConsumer from './sound-player-consumer';
+
+jest.mock('./sound-player');
+
+describe('When SoundPlayer throws an error', () => {
+ beforeAll(() => {
+ SoundPlayer.mockImplementation(() => {
+ return {
+ playSoundFile: () => {
+ throw new Error('Test error');
+ },
+ };
+ });
+ });
+
+ it('Should throw an error when calling playSomethingCool', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ expect(() => soundPlayerConsumer.playSomethingCool()).toThrow();
+ });
+});
+```
+
+## In depth: Understanding mock constructor functions
+
+Building your constructor function mock using `jest.fn().mockImplementation()` makes mocks appear more complicated than they really are. This section shows how you can create your own mocks to illustrate how mocking works.
+
+### Manual mock that is another ES6 class
+
+If you define an ES6 class using the same filename as the mocked class in the `__mocks__` folder, it will serve as the mock. This class will be used in place of the real class. This allows you to inject a test implementation for the class, but does not provide a way to spy on calls.
+
+For the contrived example, the mock might look like this:
+
+```javascript title="__mocks__/sound-player.js"
+export default class SoundPlayer {
+ constructor() {
+ console.log('Mock SoundPlayer: constructor was called');
+ }
+
+ playSoundFile() {
+ console.log('Mock SoundPlayer: playSoundFile was called');
+ }
+}
+```
+
+### Mock using module factory parameter
+
+The module factory function passed to `jest.mock(path, moduleFactory)` can be a HOF that returns a function\*. This will allow calling `new` on the mock. Again, this allows you to inject different behavior for testing, but does not provide a way to spy on calls.
+
+#### \* Module factory function must return a function
+
+In order to mock a constructor function, the module factory must return a constructor function. In other words, the module factory must be a function that returns a function - a higher-order function (HOF).
+
+```javascript
+jest.mock('./sound-player', () => {
+ return function () {
+ return {playSoundFile: () => {}};
+ };
+});
+```
+
+**_Note: Arrow functions won't work_**
+
+Note that the mock can't be an arrow function because calling `new` on an arrow function is not allowed in JavaScript. So this won't work:
+
+```javascript
+jest.mock('./sound-player', () => {
+ return () => {
+ // Does not work; arrow functions can't be called with new
+ return {playSoundFile: () => {}};
+ };
+});
+```
+
+This will throw **_TypeError: \_soundPlayer2.default is not a constructor_**, unless the code is transpiled to ES5, e.g. by `@babel/preset-env`. (ES5 doesn't have arrow functions nor classes, so both will be transpiled to plain functions.)
+
+## Keeping track of usage (spying on the mock)
+
+Injecting a test implementation is helpful, but you will probably also want to test whether the class constructor and methods are called with the correct parameters.
+
+### Spying on the constructor
+
+In order to track calls to the constructor, replace the function returned by the HOF with a Jest mock function. Create it with [`jest.fn()`](JestObjectAPI.md#jestfnimplementation), and then specify its implementation with `mockImplementation()`.
+
+```javascript
+import SoundPlayer from './sound-player';
+jest.mock('./sound-player', () => {
+ // Works and lets you check for constructor calls:
+ return jest.fn().mockImplementation(() => {
+ return {playSoundFile: () => {}};
+ });
+});
+```
+
+This will let us inspect usage of our mocked class, using `SoundPlayer.mock.calls`: `expect(SoundPlayer).toHaveBeenCalled();` or near-equivalent: `expect(SoundPlayer.mock.calls.length).toEqual(1);`
+
+### Mocking non-default class exports
+
+If the class is **not** the default export from the module then you need to return an object with the key that is the same as the class export name.
+
+```javascript
+import {SoundPlayer} from './sound-player';
+jest.mock('./sound-player', () => {
+ // Works and lets you check for constructor calls:
+ return {
+ SoundPlayer: jest.fn().mockImplementation(() => {
+ return {playSoundFile: () => {}};
+ }),
+ };
+});
+```
+
+### Spying on methods of our class
+
+Our mocked class will need to provide any member functions (`playSoundFile` in the example) that will be called during our tests, or else we'll get an error for calling a function that doesn't exist. But we'll probably want to also spy on calls to those methods, to ensure that they were called with the expected parameters.
+
+A new object will be created each time the mock constructor function is called during tests. To spy on method calls in all of these objects, we populate `playSoundFile` with another mock function, and store a reference to that same mock function in our test file, so it's available during tests.
+
+```javascript
+import SoundPlayer from './sound-player';
+const mockPlaySoundFile = jest.fn();
+jest.mock('./sound-player', () => {
+ return jest.fn().mockImplementation(() => {
+ return {playSoundFile: mockPlaySoundFile};
+ // Now we can track calls to playSoundFile
+ });
+});
+```
+
+The manual mock equivalent of this would be:
+
+```javascript title="__mocks__/sound-player.js"
+// Import this named export into your test file
+export const mockPlaySoundFile = jest.fn();
+const mock = jest.fn().mockImplementation(() => {
+ return {playSoundFile: mockPlaySoundFile};
+});
+
+export default mock;
+```
+
+Usage is similar to the module factory function, except that you can omit the second argument from `jest.mock()`, and you must import the mocked method into your test file, since it is no longer defined there. Use the original module path for this; don't include `__mocks__`.
+
+### Cleaning up between tests
+
+To clear the record of calls to the mock constructor function and its methods, we call [`mockClear()`](MockFunctionAPI.md#mockfnmockclear) in the `beforeEach()` function:
+
+```javascript
+beforeEach(() => {
+ SoundPlayer.mockClear();
+ mockPlaySoundFile.mockClear();
+});
+```
+
+## Complete example
+
+Here's a complete test file which uses the module factory parameter to `jest.mock`:
+
+```javascript title="sound-player-consumer.test.js"
+import SoundPlayer from './sound-player';
+import SoundPlayerConsumer from './sound-player-consumer';
+
+const mockPlaySoundFile = jest.fn();
+jest.mock('./sound-player', () => {
+ return jest.fn().mockImplementation(() => {
+ return {playSoundFile: mockPlaySoundFile};
+ });
+});
+
+beforeEach(() => {
+ SoundPlayer.mockClear();
+ mockPlaySoundFile.mockClear();
+});
+
+it('The consumer should be able to call new() on SoundPlayer', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ // Ensure constructor created the object:
+ expect(soundPlayerConsumer).toBeTruthy();
+});
+
+it('We can check if the consumer called the class constructor', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ expect(SoundPlayer).toHaveBeenCalledTimes(1);
+});
+
+it('We can check if the consumer called a method on the class instance', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ const coolSoundFileName = 'song.mp3';
+ soundPlayerConsumer.playSomethingCool();
+ expect(mockPlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
+});
+```
diff --git a/website/versioned_docs/version-27.4/ExpectAPI.md b/website/versioned_docs/version-27.4/ExpectAPI.md
new file mode 100644
index 000000000000..bef99cce8ab5
--- /dev/null
+++ b/website/versioned_docs/version-27.4/ExpectAPI.md
@@ -0,0 +1,1388 @@
+---
+id: expect
+title: Expect
+---
+
+When you're writing tests, you often need to check that values meet certain conditions. `expect` gives you access to a number of "matchers" that let you validate different things.
+
+For additional Jest matchers maintained by the Jest Community check out [`jest-extended`](https://github.com/jest-community/jest-extended).
+
+## Methods
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Reference
+
+### `expect(value)`
+
+The `expect` function is used every time you want to test a value. You will rarely call `expect` by itself. Instead, you will use `expect` along with a "matcher" function to assert something about a value.
+
+It's easier to understand this with an example. Let's say you have a method `bestLaCroixFlavor()` which is supposed to return the string `'grapefruit'`. Here's how you would test that:
+
+```js
+test('the best flavor is grapefruit', () => {
+ expect(bestLaCroixFlavor()).toBe('grapefruit');
+});
+```
+
+In this case, `toBe` is the matcher function. There are a lot of different matcher functions, documented below, to help you test different things.
+
+The argument to `expect` should be the value that your code produces, and any argument to the matcher should be the correct value. If you mix them up, your tests will still work, but the error messages on failing tests will look strange.
+
+### `expect.extend(matchers)`
+
+You can use `expect.extend` to add your own matchers to Jest. For example, let's say that you're testing a number utility library and you're frequently asserting that numbers appear within particular ranges of other numbers. You could abstract that into a `toBeWithinRange` matcher:
+
+```js
+expect.extend({
+ toBeWithinRange(received, floor, ceiling) {
+ const pass = received >= floor && received <= ceiling;
+ if (pass) {
+ return {
+ message: () =>
+ `expected ${received} not to be within range ${floor} - ${ceiling}`,
+ pass: true,
+ };
+ } else {
+ return {
+ message: () =>
+ `expected ${received} to be within range ${floor} - ${ceiling}`,
+ pass: false,
+ };
+ }
+ },
+});
+
+test('numeric ranges', () => {
+ expect(100).toBeWithinRange(90, 110);
+ expect(101).not.toBeWithinRange(0, 100);
+ expect({apples: 6, bananas: 3}).toEqual({
+ apples: expect.toBeWithinRange(1, 10),
+ bananas: expect.not.toBeWithinRange(11, 20),
+ });
+});
+```
+
+_Note_: In TypeScript, when using `@types/jest` for example, you can declare the new `toBeWithinRange` matcher in the imported module like this:
+
+```ts
+declare global {
+ namespace jest {
+ interface Matchers {
+ toBeWithinRange(a: number, b: number): R;
+ }
+ }
+}
+```
+
+#### Async Matchers
+
+`expect.extend` also supports async matchers. Async matchers return a Promise so you will need to await the returned value. Let's use an example matcher to illustrate the usage of them. We are going to implement a matcher called `toBeDivisibleByExternalValue`, where the divisible number is going to be pulled from an external source.
+
+```js
+expect.extend({
+ async toBeDivisibleByExternalValue(received) {
+ const externalValue = await getExternalValueFromRemoteSource();
+ const pass = received % externalValue == 0;
+ if (pass) {
+ return {
+ message: () =>
+ `expected ${received} not to be divisible by ${externalValue}`,
+ pass: true,
+ };
+ } else {
+ return {
+ message: () =>
+ `expected ${received} to be divisible by ${externalValue}`,
+ pass: false,
+ };
+ }
+ },
+});
+
+test('is divisible by external value', async () => {
+ await expect(100).toBeDivisibleByExternalValue();
+ await expect(101).not.toBeDivisibleByExternalValue();
+});
+```
+
+#### Custom Matchers API
+
+Matchers should return an object (or a Promise of an object) with two keys. `pass` indicates whether there was a match or not, and `message` provides a function with no arguments that returns an error message in case of failure. Thus, when `pass` is false, `message` should return the error message for when `expect(x).yourMatcher()` fails. And when `pass` is true, `message` should return the error message for when `expect(x).not.yourMatcher()` fails.
+
+Matchers are called with the argument passed to `expect(x)` followed by the arguments passed to `.yourMatcher(y, z)`:
+
+```js
+expect.extend({
+ yourMatcher(x, y, z) {
+ return {
+ pass: true,
+ message: () => '',
+ };
+ },
+});
+```
+
+These helper functions and properties can be found on `this` inside a custom matcher:
+
+#### `this.isNot`
+
+A boolean to let you know this matcher was called with the negated `.not` modifier allowing you to display a clear and correct matcher hint (see example code).
+
+#### `this.promise`
+
+A string allowing you to display a clear and correct matcher hint:
+
+- `'rejects'` if matcher was called with the promise `.rejects` modifier
+- `'resolves'` if matcher was called with the promise `.resolves` modifier
+- `''` if matcher was not called with a promise modifier
+
+#### `this.equals(a, b)`
+
+This is a deep-equality function that will return `true` if two objects have the same values (recursively).
+
+#### `this.expand`
+
+A boolean to let you know this matcher was called with an `expand` option. When Jest is called with the `--expand` flag, `this.expand` can be used to determine if Jest is expected to show full diffs and errors.
+
+#### `this.utils`
+
+There are a number of helpful tools exposed on `this.utils` primarily consisting of the exports from [`jest-matcher-utils`](https://github.com/facebook/jest/tree/main/packages/jest-matcher-utils).
+
+The most useful ones are `matcherHint`, `printExpected` and `printReceived` to format the error messages nicely. For example, take a look at the implementation for the `toBe` matcher:
+
+```js
+const {diff} = require('jest-diff');
+expect.extend({
+ toBe(received, expected) {
+ const options = {
+ comment: 'Object.is equality',
+ isNot: this.isNot,
+ promise: this.promise,
+ };
+
+ const pass = Object.is(received, expected);
+
+ const message = pass
+ ? () =>
+ this.utils.matcherHint('toBe', undefined, undefined, options) +
+ '\n\n' +
+ `Expected: not ${this.utils.printExpected(expected)}\n` +
+ `Received: ${this.utils.printReceived(received)}`
+ : () => {
+ const diffString = diff(expected, received, {
+ expand: this.expand,
+ });
+ return (
+ this.utils.matcherHint('toBe', undefined, undefined, options) +
+ '\n\n' +
+ (diffString && diffString.includes('- Expect')
+ ? `Difference:\n\n${diffString}`
+ : `Expected: ${this.utils.printExpected(expected)}\n` +
+ `Received: ${this.utils.printReceived(received)}`)
+ );
+ };
+
+ return {actual: received, message, pass};
+ },
+});
+```
+
+This will print something like this:
+
+```bash
+ expect(received).toBe(expected)
+
+ Expected value to be (using Object.is):
+ "banana"
+ Received:
+ "apple"
+```
+
+When an assertion fails, the error message should give as much signal as necessary to the user so they can resolve their issue quickly. You should craft a precise failure message to make sure users of your custom assertions have a good developer experience.
+
+#### Custom snapshot matchers
+
+To use snapshot testing inside of your custom matcher you can import `jest-snapshot` and use it from within your matcher.
+
+Here's a snapshot matcher that trims a string to store for a given length, `.toMatchTrimmedSnapshot(length)`:
+
+```js
+const {toMatchSnapshot} = require('jest-snapshot');
+
+expect.extend({
+ toMatchTrimmedSnapshot(received, length) {
+ return toMatchSnapshot.call(
+ this,
+ received.substring(0, length),
+ 'toMatchTrimmedSnapshot',
+ );
+ },
+});
+
+it('stores only 10 characters', () => {
+ expect('extra long string oh my gerd').toMatchTrimmedSnapshot(10);
+});
+
+/*
+Stored snapshot will look like:
+
+exports[`stores only 10 characters: toMatchTrimmedSnapshot 1`] = `"extra long"`;
+*/
+```
+
+It's also possible to create custom matchers for inline snapshots, the snapshots will be correctly added to the custom matchers. However, inline snapshot will always try to append to the first argument or the second when the first argument is the property matcher, so it's not possible to accept custom arguments in the custom matchers.
+
+```js
+const {toMatchInlineSnapshot} = require('jest-snapshot');
+
+expect.extend({
+ toMatchTrimmedInlineSnapshot(received, ...rest) {
+ return toMatchInlineSnapshot.call(this, received.substring(0, 10), ...rest);
+ },
+});
+
+it('stores only 10 characters', () => {
+ expect('extra long string oh my gerd').toMatchTrimmedInlineSnapshot();
+ /*
+ The snapshot will be added inline like
+ expect('extra long string oh my gerd').toMatchTrimmedInlineSnapshot(
+ `"extra long"`
+ );
+ */
+});
+```
+
+#### async
+
+If your custom inline snapshot matcher is async i.e. uses `async`-`await` you might encounter an error like "Multiple inline snapshots for the same call are not supported". Jest needs additional context information to find where the custom inline snapshot matcher was used to update the snapshots properly.
+
+```js
+const {toMatchInlineSnapshot} = require('jest-snapshot');
+
+expect.extend({
+ async toMatchObservationInlineSnapshot(fn, ...rest) {
+ // The error (and its stacktrace) must be created before any `await`
+ this.error = new Error();
+
+ // The implementation of `observe` doesn't matter.
+ // It only matters that the custom snapshot matcher is async.
+ const observation = await observe(async () => {
+ await fn();
+ });
+
+ return toMatchInlineSnapshot.call(this, recording, ...rest);
+ },
+});
+
+it('observes something', async () => {
+ await expect(async () => {
+ return 'async action';
+ }).toMatchTrimmedInlineSnapshot();
+ /*
+ The snapshot will be added inline like
+ await expect(async () => {
+ return 'async action';
+ }).toMatchTrimmedInlineSnapshot(`"async action"`);
+ */
+});
+```
+
+#### Bail out
+
+Usually `jest` tries to match every snapshot that is expected in a test.
+
+Sometimes it might not make sense to continue the test if a prior snapshot failed. For example, when you make snapshots of a state-machine after various transitions you can abort the test once one transition produced the wrong state.
+
+In that case you can implement a custom snapshot matcher that throws on the first mismatch instead of collecting every mismatch.
+
+```js
+const {toMatchInlineSnapshot} = require('jest-snapshot');
+
+expect.extend({
+ toMatchStateInlineSnapshot(...args) {
+ this.dontThrow = () => {};
+
+ return toMatchInlineSnapshot.call(this, ...args);
+ },
+});
+
+let state = 'initial';
+
+function transition() {
+ // Typo in the implementation should cause the test to fail
+ if (state === 'INITIAL') {
+ state = 'pending';
+ } else if (state === 'pending') {
+ state = 'done';
+ }
+}
+
+it('transitions as expected', () => {
+ expect(state).toMatchStateInlineSnapshot(`"initial"`);
+
+ transition();
+ // Already produces a mismatch. No point in continuing the test.
+ expect(state).toMatchStateInlineSnapshot(`"loading"`);
+
+ transition();
+ expect(state).toMatchStateInlineSnapshot(`"done"`);
+});
+```
+
+### `expect.anything()`
+
+`expect.anything()` matches anything but `null` or `undefined`. You can use it inside `toEqual` or `toBeCalledWith` instead of a literal value. For example, if you want to check that a mock function is called with a non-null argument:
+
+```js
+test('map calls its argument with a non-null argument', () => {
+ const mock = jest.fn();
+ [1].map(x => mock(x));
+ expect(mock).toBeCalledWith(expect.anything());
+});
+```
+
+### `expect.any(constructor)`
+
+`expect.any(constructor)` matches anything that was created with the given constructor. You can use it inside `toEqual` or `toBeCalledWith` instead of a literal value. For example, if you want to check that a mock function is called with a number:
+
+```js
+function randocall(fn) {
+ return fn(Math.floor(Math.random() * 6 + 1));
+}
+
+test('randocall calls its callback with a number', () => {
+ const mock = jest.fn();
+ randocall(mock);
+ expect(mock).toBeCalledWith(expect.any(Number));
+});
+```
+
+### `expect.arrayContaining(array)`
+
+`expect.arrayContaining(array)` matches a received array which contains all of the elements in the expected array. That is, the expected array is a **subset** of the received array. Therefore, it matches a received array which contains elements that are **not** in the expected array.
+
+You can use it instead of a literal value:
+
+- in `toEqual` or `toBeCalledWith`
+- to match a property in `objectContaining` or `toMatchObject`
+
+```js
+describe('arrayContaining', () => {
+ const expected = ['Alice', 'Bob'];
+ it('matches even if received contains additional elements', () => {
+ expect(['Alice', 'Bob', 'Eve']).toEqual(expect.arrayContaining(expected));
+ });
+ it('does not match if received does not contain expected elements', () => {
+ expect(['Bob', 'Eve']).not.toEqual(expect.arrayContaining(expected));
+ });
+});
+```
+
+```js
+describe('Beware of a misunderstanding! A sequence of dice rolls', () => {
+ const expected = [1, 2, 3, 4, 5, 6];
+ it('matches even with an unexpected number 7', () => {
+ expect([4, 1, 6, 7, 3, 5, 2, 5, 4, 6]).toEqual(
+ expect.arrayContaining(expected),
+ );
+ });
+ it('does not match without an expected number 2', () => {
+ expect([4, 1, 6, 7, 3, 5, 7, 5, 4, 6]).not.toEqual(
+ expect.arrayContaining(expected),
+ );
+ });
+});
+```
+
+### `expect.assertions(number)`
+
+`expect.assertions(number)` verifies that a certain number of assertions are called during a test. This is often useful when testing asynchronous code, in order to make sure that assertions in a callback actually got called.
+
+For example, let's say that we have a function `doAsync` that receives two callbacks `callback1` and `callback2`, it will asynchronously call both of them in an unknown order. We can test this with:
+
+```js
+test('doAsync calls both callbacks', () => {
+ expect.assertions(2);
+ function callback1(data) {
+ expect(data).toBeTruthy();
+ }
+ function callback2(data) {
+ expect(data).toBeTruthy();
+ }
+
+ doAsync(callback1, callback2);
+});
+```
+
+The `expect.assertions(2)` call ensures that both callbacks actually get called.
+
+### `expect.hasAssertions()`
+
+`expect.hasAssertions()` verifies that at least one assertion is called during a test. This is often useful when testing asynchronous code, in order to make sure that assertions in a callback actually got called.
+
+For example, let's say that we have a few functions that all deal with state. `prepareState` calls a callback with a state object, `validateState` runs on that state object, and `waitOnState` returns a promise that waits until all `prepareState` callbacks complete. We can test this with:
+
+```js
+test('prepareState prepares a valid state', () => {
+ expect.hasAssertions();
+ prepareState(state => {
+ expect(validateState(state)).toBeTruthy();
+ });
+ return waitOnState();
+});
+```
+
+The `expect.hasAssertions()` call ensures that the `prepareState` callback actually gets called.
+
+### `expect.not.arrayContaining(array)`
+
+`expect.not.arrayContaining(array)` matches a received array which does not contain all of the elements in the expected array. That is, the expected array **is not a subset** of the received array.
+
+It is the inverse of `expect.arrayContaining`.
+
+```js
+describe('not.arrayContaining', () => {
+ const expected = ['Samantha'];
+
+ it('matches if the actual array does not contain the expected elements', () => {
+ expect(['Alice', 'Bob', 'Eve']).toEqual(
+ expect.not.arrayContaining(expected),
+ );
+ });
+});
+```
+
+### `expect.not.objectContaining(object)`
+
+`expect.not.objectContaining(object)` matches any received object that does not recursively match the expected properties. That is, the expected object **is not a subset** of the received object. Therefore, it matches a received object which contains properties that are **not** in the expected object.
+
+It is the inverse of `expect.objectContaining`.
+
+```js
+describe('not.objectContaining', () => {
+ const expected = {foo: 'bar'};
+
+ it('matches if the actual object does not contain expected key: value pairs', () => {
+ expect({bar: 'baz'}).toEqual(expect.not.objectContaining(expected));
+ });
+});
+```
+
+### `expect.not.stringContaining(string)`
+
+`expect.not.stringContaining(string)` matches the received value if it is not a string or if it is a string that does not contain the exact expected string.
+
+It is the inverse of `expect.stringContaining`.
+
+```js
+describe('not.stringContaining', () => {
+ const expected = 'Hello world!';
+
+ it('matches if the received value does not contain the expected substring', () => {
+ expect('How are you?').toEqual(expect.not.stringContaining(expected));
+ });
+});
+```
+
+### `expect.not.stringMatching(string | regexp)`
+
+`expect.not.stringMatching(string | regexp)` matches the received value if it is not a string or if it is a string that does not match the expected string or regular expression.
+
+It is the inverse of `expect.stringMatching`.
+
+```js
+describe('not.stringMatching', () => {
+ const expected = /Hello world!/;
+
+ it('matches if the received value does not match the expected regex', () => {
+ expect('How are you?').toEqual(expect.not.stringMatching(expected));
+ });
+});
+```
+
+### `expect.objectContaining(object)`
+
+`expect.objectContaining(object)` matches any received object that recursively matches the expected properties. That is, the expected object is a **subset** of the received object. Therefore, it matches a received object which contains properties that **are present** in the expected object.
+
+Instead of literal property values in the expected object, you can use matchers, `expect.anything()`, and so on.
+
+For example, let's say that we expect an `onPress` function to be called with an `Event` object, and all we need to verify is that the event has `event.x` and `event.y` properties. We can do that with:
+
+```js
+test('onPress gets called with the right thing', () => {
+ const onPress = jest.fn();
+ simulatePresses(onPress);
+ expect(onPress).toBeCalledWith(
+ expect.objectContaining({
+ x: expect.any(Number),
+ y: expect.any(Number),
+ }),
+ );
+});
+```
+
+### `expect.stringContaining(string)`
+
+`expect.stringContaining(string)` matches the received value if it is a string that contains the exact expected string.
+
+### `expect.stringMatching(string | regexp)`
+
+`expect.stringMatching(string | regexp)` matches the received value if it is a string that matches the expected string or regular expression.
+
+You can use it instead of a literal value:
+
+- in `toEqual` or `toBeCalledWith`
+- to match an element in `arrayContaining`
+- to match a property in `objectContaining` or `toMatchObject`
+
+This example also shows how you can nest multiple asymmetric matchers, with `expect.stringMatching` inside the `expect.arrayContaining`.
+
+```js
+describe('stringMatching in arrayContaining', () => {
+ const expected = [
+ expect.stringMatching(/^Alic/),
+ expect.stringMatching(/^[BR]ob/),
+ ];
+ it('matches even if received contains additional elements', () => {
+ expect(['Alicia', 'Roberto', 'Evelina']).toEqual(
+ expect.arrayContaining(expected),
+ );
+ });
+ it('does not match if received does not contain expected elements', () => {
+ expect(['Roberto', 'Evelina']).not.toEqual(
+ expect.arrayContaining(expected),
+ );
+ });
+});
+```
+
+### `expect.addSnapshotSerializer(serializer)`
+
+You can call `expect.addSnapshotSerializer` to add a module that formats application-specific data structures.
+
+For an individual test file, an added module precedes any modules from `snapshotSerializers` configuration, which precede the default snapshot serializers for built-in JavaScript types and for React elements. The last module added is the first module tested.
+
+```js
+import serializer from 'my-serializer-module';
+expect.addSnapshotSerializer(serializer);
+
+// affects expect(value).toMatchSnapshot() assertions in the test file
+```
+
+If you add a snapshot serializer in individual test files instead of adding it to `snapshotSerializers` configuration:
+
+- You make the dependency explicit instead of implicit.
+- You avoid limits to configuration that might cause you to eject from [create-react-app](https://github.com/facebookincubator/create-react-app).
+
+See [configuring Jest](Configuration.md#snapshotserializers-arraystring) for more information.
+
+### `.not`
+
+If you know how to test something, `.not` lets you test its opposite. For example, this code tests that the best La Croix flavor is not coconut:
+
+```js
+test('the best flavor is not coconut', () => {
+ expect(bestLaCroixFlavor()).not.toBe('coconut');
+});
+```
+
+### `.resolves`
+
+Use `resolves` to unwrap the value of a fulfilled promise so any other matcher can be chained. If the promise is rejected the assertion fails.
+
+For example, this code tests that the promise resolves and that the resulting value is `'lemon'`:
+
+```js
+test('resolves to lemon', () => {
+ // make sure to add a return statement
+ return expect(Promise.resolve('lemon')).resolves.toBe('lemon');
+});
+```
+
+Note that, since you are still testing promises, the test is still asynchronous. Hence, you will need to [tell Jest to wait](TestingAsyncCode.md#promises) by returning the unwrapped assertion.
+
+Alternatively, you can use `async/await` in combination with `.resolves`:
+
+```js
+test('resolves to lemon', async () => {
+ await expect(Promise.resolve('lemon')).resolves.toBe('lemon');
+ await expect(Promise.resolve('lemon')).resolves.not.toBe('octopus');
+});
+```
+
+### `.rejects`
+
+Use `.rejects` to unwrap the reason of a rejected promise so any other matcher can be chained. If the promise is fulfilled the assertion fails.
+
+For example, this code tests that the promise rejects with reason `'octopus'`:
+
+```js
+test('rejects to octopus', () => {
+ // make sure to add a return statement
+ return expect(Promise.reject(new Error('octopus'))).rejects.toThrow(
+ 'octopus',
+ );
+});
+```
+
+Note that, since you are still testing promises, the test is still asynchronous. Hence, you will need to [tell Jest to wait](TestingAsyncCode.md#promises) by returning the unwrapped assertion.
+
+Alternatively, you can use `async/await` in combination with `.rejects`.
+
+```js
+test('rejects to octopus', async () => {
+ await expect(Promise.reject(new Error('octopus'))).rejects.toThrow('octopus');
+});
+```
+
+### `.toBe(value)`
+
+Use `.toBe` to compare primitive values or to check referential identity of object instances. It calls `Object.is` to compare values, which is even better for testing than `===` strict equality operator.
+
+For example, this code will validate some properties of the `can` object:
+
+```js
+const can = {
+ name: 'pamplemousse',
+ ounces: 12,
+};
+
+describe('the can', () => {
+ test('has 12 ounces', () => {
+ expect(can.ounces).toBe(12);
+ });
+
+ test('has a sophisticated name', () => {
+ expect(can.name).toBe('pamplemousse');
+ });
+});
+```
+
+Don't use `.toBe` with floating-point numbers. For example, due to rounding, in JavaScript `0.2 + 0.1` is not strictly equal to `0.3`. If you have floating point numbers, try `.toBeCloseTo` instead.
+
+Although the `.toBe` matcher **checks** referential identity, it **reports** a deep comparison of values if the assertion fails. If differences between properties do not help you to understand why a test fails, especially if the report is large, then you might move the comparison into the `expect` function. For example, to assert whether or not elements are the same instance:
+
+- rewrite `expect(received).toBe(expected)` as `expect(Object.is(received, expected)).toBe(true)`
+- rewrite `expect(received).not.toBe(expected)` as `expect(Object.is(received, expected)).toBe(false)`
+
+### `.toHaveBeenCalled()`
+
+Also under the alias: `.toBeCalled()`
+
+Use `.toHaveBeenCalled` to ensure that a mock function got called.
+
+For example, let's say you have a `drinkAll(drink, flavour)` function that takes a `drink` function and applies it to all available beverages. You might want to check that `drink` gets called for `'lemon'`, but not for `'octopus'`, because `'octopus'` flavour is really weird and why would anything be octopus-flavoured? You can do that with this test suite:
+
+```js
+function drinkAll(callback, flavour) {
+ if (flavour !== 'octopus') {
+ callback(flavour);
+ }
+}
+
+describe('drinkAll', () => {
+ test('drinks something lemon-flavoured', () => {
+ const drink = jest.fn();
+ drinkAll(drink, 'lemon');
+ expect(drink).toHaveBeenCalled();
+ });
+
+ test('does not drink something octopus-flavoured', () => {
+ const drink = jest.fn();
+ drinkAll(drink, 'octopus');
+ expect(drink).not.toHaveBeenCalled();
+ });
+});
+```
+
+### `.toHaveBeenCalledTimes(number)`
+
+Also under the alias: `.toBeCalledTimes(number)`
+
+Use `.toHaveBeenCalledTimes` to ensure that a mock function got called exact number of times.
+
+For example, let's say you have a `drinkEach(drink, Array)` function that takes a `drink` function and applies it to array of passed beverages. You might want to check that drink function was called exact number of times. You can do that with this test suite:
+
+```js
+test('drinkEach drinks each drink', () => {
+ const drink = jest.fn();
+ drinkEach(drink, ['lemon', 'octopus']);
+ expect(drink).toHaveBeenCalledTimes(2);
+});
+```
+
+### `.toHaveBeenCalledWith(arg1, arg2, ...)`
+
+Also under the alias: `.toBeCalledWith()`
+
+Use `.toHaveBeenCalledWith` to ensure that a mock function was called with specific arguments.
+
+For example, let's say that you can register a beverage with a `register` function, and `applyToAll(f)` should apply the function `f` to all registered beverages. To make sure this works, you could write:
+
+```js
+test('registration applies correctly to orange La Croix', () => {
+ const beverage = new LaCroix('orange');
+ register(beverage);
+ const f = jest.fn();
+ applyToAll(f);
+ expect(f).toHaveBeenCalledWith(beverage);
+});
+```
+
+### `.toHaveBeenLastCalledWith(arg1, arg2, ...)`
+
+Also under the alias: `.lastCalledWith(arg1, arg2, ...)`
+
+If you have a mock function, you can use `.toHaveBeenLastCalledWith` to test what arguments it was last called with. For example, let's say you have a `applyToAllFlavors(f)` function that applies `f` to a bunch of flavors, and you want to ensure that when you call it, the last flavor it operates on is `'mango'`. You can write:
+
+```js
+test('applying to all flavors does mango last', () => {
+ const drink = jest.fn();
+ applyToAllFlavors(drink);
+ expect(drink).toHaveBeenLastCalledWith('mango');
+});
+```
+
+### `.toHaveBeenNthCalledWith(nthCall, arg1, arg2, ....)`
+
+Also under the alias: `.nthCalledWith(nthCall, arg1, arg2, ...)`
+
+If you have a mock function, you can use `.toHaveBeenNthCalledWith` to test what arguments it was nth called with. For example, let's say you have a `drinkEach(drink, Array)` function that applies `f` to a bunch of flavors, and you want to ensure that when you call it, the first flavor it operates on is `'lemon'` and the second one is `'octopus'`. You can write:
+
+```js
+test('drinkEach drinks each drink', () => {
+ const drink = jest.fn();
+ drinkEach(drink, ['lemon', 'octopus']);
+ expect(drink).toHaveBeenNthCalledWith(1, 'lemon');
+ expect(drink).toHaveBeenNthCalledWith(2, 'octopus');
+});
+```
+
+Note: the nth argument must be positive integer starting from 1.
+
+### `.toHaveReturned()`
+
+Also under the alias: `.toReturn()`
+
+If you have a mock function, you can use `.toHaveReturned` to test that the mock function successfully returned (i.e., did not throw an error) at least one time. For example, let's say you have a mock `drink` that returns `true`. You can write:
+
+```js
+test('drinks returns', () => {
+ const drink = jest.fn(() => true);
+
+ drink();
+
+ expect(drink).toHaveReturned();
+});
+```
+
+### `.toHaveReturnedTimes(number)`
+
+Also under the alias: `.toReturnTimes(number)`
+
+Use `.toHaveReturnedTimes` to ensure that a mock function returned successfully (i.e., did not throw an error) an exact number of times. Any calls to the mock function that throw an error are not counted toward the number of times the function returned.
+
+For example, let's say you have a mock `drink` that returns `true`. You can write:
+
+```js
+test('drink returns twice', () => {
+ const drink = jest.fn(() => true);
+
+ drink();
+ drink();
+
+ expect(drink).toHaveReturnedTimes(2);
+});
+```
+
+### `.toHaveReturnedWith(value)`
+
+Also under the alias: `.toReturnWith(value)`
+
+Use `.toHaveReturnedWith` to ensure that a mock function returned a specific value.
+
+For example, let's say you have a mock `drink` that returns the name of the beverage that was consumed. You can write:
+
+```js
+test('drink returns La Croix', () => {
+ const beverage = {name: 'La Croix'};
+ const drink = jest.fn(beverage => beverage.name);
+
+ drink(beverage);
+
+ expect(drink).toHaveReturnedWith('La Croix');
+});
+```
+
+### `.toHaveLastReturnedWith(value)`
+
+Also under the alias: `.lastReturnedWith(value)`
+
+Use `.toHaveLastReturnedWith` to test the specific value that a mock function last returned. If the last call to the mock function threw an error, then this matcher will fail no matter what value you provided as the expected return value.
+
+For example, let's say you have a mock `drink` that returns the name of the beverage that was consumed. You can write:
+
+```js
+test('drink returns La Croix (Orange) last', () => {
+ const beverage1 = {name: 'La Croix (Lemon)'};
+ const beverage2 = {name: 'La Croix (Orange)'};
+ const drink = jest.fn(beverage => beverage.name);
+
+ drink(beverage1);
+ drink(beverage2);
+
+ expect(drink).toHaveLastReturnedWith('La Croix (Orange)');
+});
+```
+
+### `.toHaveNthReturnedWith(nthCall, value)`
+
+Also under the alias: `.nthReturnedWith(nthCall, value)`
+
+Use `.toHaveNthReturnedWith` to test the specific value that a mock function returned for the nth call. If the nth call to the mock function threw an error, then this matcher will fail no matter what value you provided as the expected return value.
+
+For example, let's say you have a mock `drink` that returns the name of the beverage that was consumed. You can write:
+
+```js
+test('drink returns expected nth calls', () => {
+ const beverage1 = {name: 'La Croix (Lemon)'};
+ const beverage2 = {name: 'La Croix (Orange)'};
+ const drink = jest.fn(beverage => beverage.name);
+
+ drink(beverage1);
+ drink(beverage2);
+
+ expect(drink).toHaveNthReturnedWith(1, 'La Croix (Lemon)');
+ expect(drink).toHaveNthReturnedWith(2, 'La Croix (Orange)');
+});
+```
+
+Note: the nth argument must be positive integer starting from 1.
+
+### `.toHaveLength(number)`
+
+Use `.toHaveLength` to check that an object has a `.length` property and it is set to a certain numeric value.
+
+This is especially useful for checking arrays or strings size.
+
+```js
+expect([1, 2, 3]).toHaveLength(3);
+expect('abc').toHaveLength(3);
+expect('').not.toHaveLength(5);
+```
+
+### `.toHaveProperty(keyPath, value?)`
+
+Use `.toHaveProperty` to check if property at provided reference `keyPath` exists for an object. For checking deeply nested properties in an object you may use [dot notation](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_accessors) or an array containing the keyPath for deep references.
+
+You can provide an optional `value` argument to compare the received property value (recursively for all properties of object instances, also known as deep equality, like the `toEqual` matcher).
+
+The following example contains a `houseForSale` object with nested properties. We are using `toHaveProperty` to check for the existence and values of various properties in the object.
+
+```js
+// Object containing house features to be tested
+const houseForSale = {
+ bath: true,
+ bedrooms: 4,
+ kitchen: {
+ amenities: ['oven', 'stove', 'washer'],
+ area: 20,
+ wallColor: 'white',
+ 'nice.oven': true,
+ },
+ livingroom: {
+ amenities: [
+ {
+ couch: [
+ ['large', {dimensions: [20, 20]}],
+ ['small', {dimensions: [10, 10]}],
+ ],
+ },
+ ],
+ },
+ 'ceiling.height': 2,
+};
+
+test('this house has my desired features', () => {
+ // Example Referencing
+ expect(houseForSale).toHaveProperty('bath');
+ expect(houseForSale).toHaveProperty('bedrooms', 4);
+
+ expect(houseForSale).not.toHaveProperty('pool');
+
+ // Deep referencing using dot notation
+ expect(houseForSale).toHaveProperty('kitchen.area', 20);
+ expect(houseForSale).toHaveProperty('kitchen.amenities', [
+ 'oven',
+ 'stove',
+ 'washer',
+ ]);
+
+ expect(houseForSale).not.toHaveProperty('kitchen.open');
+
+ // Deep referencing using an array containing the keyPath
+ expect(houseForSale).toHaveProperty(['kitchen', 'area'], 20);
+ expect(houseForSale).toHaveProperty(
+ ['kitchen', 'amenities'],
+ ['oven', 'stove', 'washer'],
+ );
+ expect(houseForSale).toHaveProperty(['kitchen', 'amenities', 0], 'oven');
+ expect(houseForSale).toHaveProperty(
+ 'livingroom.amenities[0].couch[0][1].dimensions[0]',
+ 20,
+ );
+ expect(houseForSale).toHaveProperty(['kitchen', 'nice.oven']);
+ expect(houseForSale).not.toHaveProperty(['kitchen', 'open']);
+
+ // Referencing keys with dot in the key itself
+ expect(houseForSale).toHaveProperty(['ceiling.height'], 'tall');
+});
+```
+
+### `.toBeCloseTo(number, numDigits?)`
+
+Use `toBeCloseTo` to compare floating point numbers for approximate equality.
+
+The optional `numDigits` argument limits the number of digits to check **after** the decimal point. For the default value `2`, the test criterion is `Math.abs(expected - received) < 0.005` (that is, `10 ** -2 / 2`).
+
+Intuitive equality comparisons often fail, because arithmetic on decimal (base 10) values often have rounding errors in limited precision binary (base 2) representation. For example, this test fails:
+
+```js
+test('adding works sanely with decimals', () => {
+ expect(0.2 + 0.1).toBe(0.3); // Fails!
+});
+```
+
+It fails because in JavaScript, `0.2 + 0.1` is actually `0.30000000000000004`.
+
+For example, this test passes with a precision of 5 digits:
+
+```js
+test('adding works sanely with decimals', () => {
+ expect(0.2 + 0.1).toBeCloseTo(0.3, 5);
+});
+```
+
+Because floating point errors are the problem that `toBeCloseTo` solves, it does not support big integer values.
+
+### `.toBeDefined()`
+
+Use `.toBeDefined` to check that a variable is not undefined. For example, if you want to check that a function `fetchNewFlavorIdea()` returns _something_, you can write:
+
+```js
+test('there is a new flavor idea', () => {
+ expect(fetchNewFlavorIdea()).toBeDefined();
+});
+```
+
+You could write `expect(fetchNewFlavorIdea()).not.toBe(undefined)`, but it's better practice to avoid referring to `undefined` directly in your code.
+
+### `.toBeFalsy()`
+
+Use `.toBeFalsy` when you don't care what a value is and you want to ensure a value is false in a boolean context. For example, let's say you have some application code that looks like:
+
+```js
+drinkSomeLaCroix();
+if (!getErrors()) {
+ drinkMoreLaCroix();
+}
+```
+
+You may not care what `getErrors` returns, specifically - it might return `false`, `null`, or `0`, and your code would still work. So if you want to test there are no errors after drinking some La Croix, you could write:
+
+```js
+test('drinking La Croix does not lead to errors', () => {
+ drinkSomeLaCroix();
+ expect(getErrors()).toBeFalsy();
+});
+```
+
+In JavaScript, there are six falsy values: `false`, `0`, `''`, `null`, `undefined`, and `NaN`. Everything else is truthy.
+
+### `.toBeGreaterThan(number | bigint)`
+
+Use `toBeGreaterThan` to compare `received > expected` for number or big integer values. For example, test that `ouncesPerCan()` returns a value of more than 10 ounces:
+
+```js
+test('ounces per can is more than 10', () => {
+ expect(ouncesPerCan()).toBeGreaterThan(10);
+});
+```
+
+### `.toBeGreaterThanOrEqual(number | bigint)`
+
+Use `toBeGreaterThanOrEqual` to compare `received >= expected` for number or big integer values. For example, test that `ouncesPerCan()` returns a value of at least 12 ounces:
+
+```js
+test('ounces per can is at least 12', () => {
+ expect(ouncesPerCan()).toBeGreaterThanOrEqual(12);
+});
+```
+
+### `.toBeLessThan(number | bigint)`
+
+Use `toBeLessThan` to compare `received < expected` for number or big integer values. For example, test that `ouncesPerCan()` returns a value of less than 20 ounces:
+
+```js
+test('ounces per can is less than 20', () => {
+ expect(ouncesPerCan()).toBeLessThan(20);
+});
+```
+
+### `.toBeLessThanOrEqual(number | bigint)`
+
+Use `toBeLessThanOrEqual` to compare `received <= expected` for number or big integer values. For example, test that `ouncesPerCan()` returns a value of at most 12 ounces:
+
+```js
+test('ounces per can is at most 12', () => {
+ expect(ouncesPerCan()).toBeLessThanOrEqual(12);
+});
+```
+
+### `.toBeInstanceOf(Class)`
+
+Use `.toBeInstanceOf(Class)` to check that an object is an instance of a class. This matcher uses `instanceof` underneath.
+
+```js
+class A {}
+
+expect(new A()).toBeInstanceOf(A);
+expect(() => {}).toBeInstanceOf(Function);
+expect(new A()).toBeInstanceOf(Function); // throws
+```
+
+### `.toBeNull()`
+
+`.toBeNull()` is the same as `.toBe(null)` but the error messages are a bit nicer. So use `.toBeNull()` when you want to check that something is null.
+
+```js
+function bloop() {
+ return null;
+}
+
+test('bloop returns null', () => {
+ expect(bloop()).toBeNull();
+});
+```
+
+### `.toBeTruthy()`
+
+Use `.toBeTruthy` when you don't care what a value is and you want to ensure a value is true in a boolean context. For example, let's say you have some application code that looks like:
+
+```js
+drinkSomeLaCroix();
+if (thirstInfo()) {
+ drinkMoreLaCroix();
+}
+```
+
+You may not care what `thirstInfo` returns, specifically - it might return `true` or a complex object, and your code would still work. So if you want to test that `thirstInfo` will be truthy after drinking some La Croix, you could write:
+
+```js
+test('drinking La Croix leads to having thirst info', () => {
+ drinkSomeLaCroix();
+ expect(thirstInfo()).toBeTruthy();
+});
+```
+
+In JavaScript, there are six falsy values: `false`, `0`, `''`, `null`, `undefined`, and `NaN`. Everything else is truthy.
+
+### `.toBeUndefined()`
+
+Use `.toBeUndefined` to check that a variable is undefined. For example, if you want to check that a function `bestDrinkForFlavor(flavor)` returns `undefined` for the `'octopus'` flavor, because there is no good octopus-flavored drink:
+
+```js
+test('the best drink for octopus flavor is undefined', () => {
+ expect(bestDrinkForFlavor('octopus')).toBeUndefined();
+});
+```
+
+You could write `expect(bestDrinkForFlavor('octopus')).toBe(undefined)`, but it's better practice to avoid referring to `undefined` directly in your code.
+
+### `.toBeNaN()`
+
+Use `.toBeNaN` when checking a value is `NaN`.
+
+```js
+test('passes when value is NaN', () => {
+ expect(NaN).toBeNaN();
+ expect(1).not.toBeNaN();
+});
+```
+
+### `.toContain(item)`
+
+Use `.toContain` when you want to check that an item is in an array. For testing the items in the array, this uses `===`, a strict equality check. `.toContain` can also check whether a string is a substring of another string.
+
+For example, if `getAllFlavors()` returns an array of flavors and you want to be sure that `lime` is in there, you can write:
+
+```js
+test('the flavor list contains lime', () => {
+ expect(getAllFlavors()).toContain('lime');
+});
+```
+
+### `.toContainEqual(item)`
+
+Use `.toContainEqual` when you want to check that an item with a specific structure and values is contained in an array. For testing the items in the array, this matcher recursively checks the equality of all fields, rather than checking for object identity.
+
+```js
+describe('my beverage', () => {
+ test('is delicious and not sour', () => {
+ const myBeverage = {delicious: true, sour: false};
+ expect(myBeverages()).toContainEqual(myBeverage);
+ });
+});
+```
+
+### `.toEqual(value)`
+
+Use `.toEqual` to compare recursively all properties of object instances (also known as "deep" equality). It calls `Object.is` to compare primitive values, which is even better for testing than `===` strict equality operator.
+
+For example, `.toEqual` and `.toBe` behave differently in this test suite, so all the tests pass:
+
+```js
+const can1 = {
+ flavor: 'grapefruit',
+ ounces: 12,
+};
+const can2 = {
+ flavor: 'grapefruit',
+ ounces: 12,
+};
+
+describe('the La Croix cans on my desk', () => {
+ test('have all the same properties', () => {
+ expect(can1).toEqual(can2);
+ });
+ test('are not the exact same can', () => {
+ expect(can1).not.toBe(can2);
+ });
+});
+```
+
+> Note: `.toEqual` won't perform a _deep equality_ check for two errors. Only the `message` property of an Error is considered for equality. It is recommended to use the `.toThrow` matcher for testing against errors.
+
+If differences between properties do not help you to understand why a test fails, especially if the report is large, then you might move the comparison into the `expect` function. For example, use `equals` method of `Buffer` class to assert whether or not buffers contain the same content:
+
+- rewrite `expect(received).toEqual(expected)` as `expect(received.equals(expected)).toBe(true)`
+- rewrite `expect(received).not.toEqual(expected)` as `expect(received.equals(expected)).toBe(false)`
+
+### `.toMatch(regexp | string)`
+
+Use `.toMatch` to check that a string matches a regular expression.
+
+For example, you might not know what exactly `essayOnTheBestFlavor()` returns, but you know it's a really long string, and the substring `grapefruit` should be in there somewhere. You can test this with:
+
+```js
+describe('an essay on the best flavor', () => {
+ test('mentions grapefruit', () => {
+ expect(essayOnTheBestFlavor()).toMatch(/grapefruit/);
+ expect(essayOnTheBestFlavor()).toMatch(new RegExp('grapefruit'));
+ });
+});
+```
+
+This matcher also accepts a string, which it will try to match:
+
+```js
+describe('grapefruits are healthy', () => {
+ test('grapefruits are a fruit', () => {
+ expect('grapefruits').toMatch('fruit');
+ });
+});
+```
+
+### `.toMatchObject(object)`
+
+Use `.toMatchObject` to check that a JavaScript object matches a subset of the properties of an object. It will match received objects with properties that are **not** in the expected object.
+
+You can also pass an array of objects, in which case the method will return true only if each object in the received array matches (in the `toMatchObject` sense described above) the corresponding object in the expected array. This is useful if you want to check that two arrays match in their number of elements, as opposed to `arrayContaining`, which allows for extra elements in the received array.
+
+You can match properties against values or against matchers.
+
+```js
+const houseForSale = {
+ bath: true,
+ bedrooms: 4,
+ kitchen: {
+ amenities: ['oven', 'stove', 'washer'],
+ area: 20,
+ wallColor: 'white',
+ },
+};
+const desiredHouse = {
+ bath: true,
+ kitchen: {
+ amenities: ['oven', 'stove', 'washer'],
+ wallColor: expect.stringMatching(/white|yellow/),
+ },
+};
+
+test('the house has my desired features', () => {
+ expect(houseForSale).toMatchObject(desiredHouse);
+});
+```
+
+```js
+describe('toMatchObject applied to arrays', () => {
+ test('the number of elements must match exactly', () => {
+ expect([{foo: 'bar'}, {baz: 1}]).toMatchObject([{foo: 'bar'}, {baz: 1}]);
+ });
+
+ test('.toMatchObject is called for each elements, so extra object properties are okay', () => {
+ expect([{foo: 'bar'}, {baz: 1, extra: 'quux'}]).toMatchObject([
+ {foo: 'bar'},
+ {baz: 1},
+ ]);
+ });
+});
+```
+
+### `.toMatchSnapshot(propertyMatchers?, hint?)`
+
+This ensures that a value matches the most recent snapshot. Check out [the Snapshot Testing guide](SnapshotTesting.md) for more information.
+
+You can provide an optional `propertyMatchers` object argument, which has asymmetric matchers as values of a subset of expected properties, **if** the received value will be an **object** instance. It is like `toMatchObject` with flexible criteria for a subset of properties, followed by a snapshot test as exact criteria for the rest of the properties.
+
+You can provide an optional `hint` string argument that is appended to the test name. Although Jest always appends a number at the end of a snapshot name, short descriptive hints might be more useful than numbers to differentiate **multiple** snapshots in a **single** `it` or `test` block. Jest sorts snapshots by name in the corresponding `.snap` file.
+
+### `.toMatchInlineSnapshot(propertyMatchers?, inlineSnapshot)`
+
+Ensures that a value matches the most recent snapshot.
+
+You can provide an optional `propertyMatchers` object argument, which has asymmetric matchers as values of a subset of expected properties, **if** the received value will be an **object** instance. It is like `toMatchObject` with flexible criteria for a subset of properties, followed by a snapshot test as exact criteria for the rest of the properties.
+
+Jest adds the `inlineSnapshot` string argument to the matcher in the test file (instead of an external `.snap` file) the first time that the test runs.
+
+Check out the section on [Inline Snapshots](SnapshotTesting.md#inline-snapshots) for more info.
+
+### `.toStrictEqual(value)`
+
+Use `.toStrictEqual` to test that objects have the same types as well as structure.
+
+Differences from `.toEqual`:
+
+- Keys with `undefined` properties are checked. e.g. `{a: undefined, b: 2}` does not match `{b: 2}` when using `.toStrictEqual`.
+- Array sparseness is checked. e.g. `[, 1]` does not match `[undefined, 1]` when using `.toStrictEqual`.
+- Object types are checked to be equal. e.g. A class instance with fields `a` and `b` will not equal a literal object with fields `a` and `b`.
+
+```js
+class LaCroix {
+ constructor(flavor) {
+ this.flavor = flavor;
+ }
+}
+
+describe('the La Croix cans on my desk', () => {
+ test('are not semantically the same', () => {
+ expect(new LaCroix('lemon')).toEqual({flavor: 'lemon'});
+ expect(new LaCroix('lemon')).not.toStrictEqual({flavor: 'lemon'});
+ });
+});
+```
+
+### `.toThrow(error?)`
+
+Also under the alias: `.toThrowError(error?)`
+
+Use `.toThrow` to test that a function throws when it is called. For example, if we want to test that `drinkFlavor('octopus')` throws, because octopus flavor is too disgusting to drink, we could write:
+
+```js
+test('throws on octopus', () => {
+ expect(() => {
+ drinkFlavor('octopus');
+ }).toThrow();
+});
+```
+
+> Note: You must wrap the code in a function, otherwise the error will not be caught and the assertion will fail.
+
+You can provide an optional argument to test that a specific error is thrown:
+
+- regular expression: error message **matches** the pattern
+- string: error message **includes** the substring
+- error object: error message is **equal to** the message property of the object
+- error class: error object is **instance of** class
+
+For example, let's say that `drinkFlavor` is coded like this:
+
+```js
+function drinkFlavor(flavor) {
+ if (flavor == 'octopus') {
+ throw new DisgustingFlavorError('yuck, octopus flavor');
+ }
+ // Do some other stuff
+}
+```
+
+We could test this error gets thrown in several ways:
+
+```js
+test('throws on octopus', () => {
+ function drinkOctopus() {
+ drinkFlavor('octopus');
+ }
+
+ // Test that the error message says "yuck" somewhere: these are equivalent
+ expect(drinkOctopus).toThrowError(/yuck/);
+ expect(drinkOctopus).toThrowError('yuck');
+
+ // Test the exact error message
+ expect(drinkOctopus).toThrowError(/^yuck, octopus flavor$/);
+ expect(drinkOctopus).toThrowError(new Error('yuck, octopus flavor'));
+
+ // Test that we get a DisgustingFlavorError
+ expect(drinkOctopus).toThrowError(DisgustingFlavorError);
+});
+```
+
+### `.toThrowErrorMatchingSnapshot(hint?)`
+
+Use `.toThrowErrorMatchingSnapshot` to test that a function throws an error matching the most recent snapshot when it is called.
+
+You can provide an optional `hint` string argument that is appended to the test name. Although Jest always appends a number at the end of a snapshot name, short descriptive hints might be more useful than numbers to differentiate **multiple** snapshots in a **single** `it` or `test` block. Jest sorts snapshots by name in the corresponding `.snap` file.
+
+For example, let's say you have a `drinkFlavor` function that throws whenever the flavor is `'octopus'`, and is coded like this:
+
+```js
+function drinkFlavor(flavor) {
+ if (flavor == 'octopus') {
+ throw new DisgustingFlavorError('yuck, octopus flavor');
+ }
+ // Do some other stuff
+}
+```
+
+The test for this function will look this way:
+
+```js
+test('throws on octopus', () => {
+ function drinkOctopus() {
+ drinkFlavor('octopus');
+ }
+
+ expect(drinkOctopus).toThrowErrorMatchingSnapshot();
+});
+```
+
+And it will generate the following snapshot:
+
+```js
+exports[`drinking flavors throws on octopus 1`] = `"yuck, octopus flavor"`;
+```
+
+Check out [React Tree Snapshot Testing](/blog/2016/07/27/jest-14) for more information on snapshot testing.
+
+### `.toThrowErrorMatchingInlineSnapshot(inlineSnapshot)`
+
+Use `.toThrowErrorMatchingInlineSnapshot` to test that a function throws an error matching the most recent snapshot when it is called.
+
+Jest adds the `inlineSnapshot` string argument to the matcher in the test file (instead of an external `.snap` file) the first time that the test runs.
+
+Check out the section on [Inline Snapshots](SnapshotTesting.md#inline-snapshots) for more info.
diff --git a/website/versioned_docs/version-27.4/GettingStarted.md b/website/versioned_docs/version-27.4/GettingStarted.md
new file mode 100644
index 000000000000..967ab4b06d3c
--- /dev/null
+++ b/website/versioned_docs/version-27.4/GettingStarted.md
@@ -0,0 +1,178 @@
+---
+id: getting-started
+title: Getting Started
+---
+
+Install Jest using [`yarn`](https://yarnpkg.com/en/package/jest):
+
+```bash
+yarn add --dev jest
+```
+
+Or [`npm`](https://www.npmjs.com/package/jest):
+
+```bash
+npm install --save-dev jest
+```
+
+Note: Jest documentation uses `yarn` commands, but `npm` will also work. You can compare `yarn` and `npm` commands in the [yarn docs, here](https://yarnpkg.com/en/docs/migrating-from-npm#toc-cli-commands-comparison).
+
+Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a `sum.js` file:
+
+```javascript
+function sum(a, b) {
+ return a + b;
+}
+module.exports = sum;
+```
+
+Then, create a file named `sum.test.js`. This will contain our actual test:
+
+```javascript
+const sum = require('./sum');
+
+test('adds 1 + 2 to equal 3', () => {
+ expect(sum(1, 2)).toBe(3);
+});
+```
+
+Add the following section to your `package.json`:
+
+```json
+{
+ "scripts": {
+ "test": "jest"
+ }
+}
+```
+
+Finally, run `yarn test` or `npm run test` and Jest will print this message:
+
+```bash
+PASS ./sum.test.js
+✓ adds 1 + 2 to equal 3 (5ms)
+```
+
+**You just successfully wrote your first test using Jest!**
+
+This test used `expect` and `toBe` to test that two values were exactly identical. To learn about the other things that Jest can test, see [Using Matchers](UsingMatchers.md).
+
+## Running from command line
+
+You can run Jest directly from the CLI (if it's globally available in your `PATH`, e.g. by `yarn global add jest` or `npm install jest --global`) with a variety of useful options.
+
+Here's how to run Jest on files matching `my-test`, using `config.json` as a configuration file and display a native OS notification after the run:
+
+```bash
+jest my-test --notify --config=config.json
+```
+
+If you'd like to learn more about running `jest` through the command line, take a look at the [Jest CLI Options](CLI.md) page.
+
+## Additional Configuration
+
+### Generate a basic configuration file
+
+Based on your project, Jest will ask you a few questions and will create a basic configuration file with a short description for each option:
+
+```bash
+jest --init
+```
+
+### Using Babel
+
+To use [Babel](https://babeljs.io/), install required dependencies via `yarn`:
+
+```bash
+yarn add --dev babel-jest @babel/core @babel/preset-env
+```
+
+Configure Babel to target your current version of Node by creating a `babel.config.js` file in the root of your project:
+
+```javascript title="babel.config.js"
+module.exports = {
+ presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};
+```
+
+_The ideal configuration for Babel will depend on your project._ See [Babel's docs](https://babeljs.io/docs/en/) for more details.
+
+Making your Babel config jest-aware
+
+Jest will set `process.env.NODE_ENV` to `'test'` if it's not set to something else. You can use that in your configuration to conditionally setup only the compilation needed for Jest, e.g.
+
+```javascript title="babel.config.js"
+module.exports = api => {
+ const isTest = api.env('test');
+ // You can use isTest to determine what presets and plugins to use.
+
+ return {
+ // ...
+ };
+};
+```
+
+> Note: `babel-jest` is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project. To avoid this behavior, you can explicitly reset the `transform` configuration option:
+
+```javascript title="jest.config.js"
+module.exports = {
+ transform: {},
+};
+```
+
+
+
+Babel 6 support
+
+Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7, which is actively maintained. However, if you cannot upgrade to Babel 7, either keep using Jest 23 or upgrade to Jest 24 with `babel-jest` locked at version 23, like in the example below:
+
+```
+"dependencies": {
+ "babel-core": "^6.26.3",
+ "babel-jest": "^23.6.0",
+ "babel-preset-env": "^1.7.0",
+ "jest": "^24.0.0"
+}
+```
+
+While we generally recommend using the same version of every Jest package, this workaround will allow you to continue using the latest version of Jest with Babel 6 for now.
+
+
+
+### Using webpack
+
+Jest can be used in projects that use [webpack](https://webpack.js.org/) to manage assets, styles, and compilation. webpack does offer some unique challenges over other tools. Refer to the [webpack guide](Webpack.md) to get started.
+
+### Using parcel
+
+Jest can be used in projects that use [parcel-bundler](https://parceljs.org/) to manage assets, styles, and compilation similar to webpack. Parcel requires zero configuration. Refer to the official [docs](https://parceljs.org/docs/) to get started.
+
+### Using TypeScript
+
+Jest supports TypeScript, via Babel. First, make sure you followed the instructions on [using Babel](#using-babel) above. Next, install the `@babel/preset-typescript` via `yarn`:
+
+```bash
+yarn add --dev @babel/preset-typescript
+```
+
+Then add `@babel/preset-typescript` to the list of presets in your `babel.config.js`.
+
+```javascript title="babel.config.js"
+module.exports = {
+ presets: [
+ ['@babel/preset-env', {targets: {node: 'current'}}],
+ // highlight-next-line
+ '@babel/preset-typescript',
+ ],
+};
+```
+
+However, there are some [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats) to using TypeScript with Babel. Because TypeScript support in Babel is purely transpilation, Jest will not type-check your tests as they are run. If you want that, you can use [ts-jest](https://github.com/kulshekhar/ts-jest) instead, or just run the TypeScript compiler [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) separately (or as part of your build process).
+
+You may also want to install the [`@types/jest`](https://www.npmjs.com/package/@types/jest) module for the version of Jest you're using. This will help provide full typing when writing your tests with TypeScript.
+
+> For `@types/*` modules it's recommended to try to match the version of the associated module. For example, if you are using `26.4.0` of `jest` then using `26.4.x` of `@types/jest` is ideal. In general, try to match the major (`26`) and minor (`4`) version as closely as possible.
+
+```bash
+yarn add --dev @types/jest
+```
diff --git a/website/versioned_docs/version-27.4/GlobalAPI.md b/website/versioned_docs/version-27.4/GlobalAPI.md
new file mode 100644
index 000000000000..775efe6125fa
--- /dev/null
+++ b/website/versioned_docs/version-27.4/GlobalAPI.md
@@ -0,0 +1,880 @@
+---
+id: api
+title: Globals
+---
+
+In your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do `import {describe, expect, test} from '@jest/globals'`.
+
+## Methods
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Reference
+
+### `afterAll(fn, timeout)`
+
+Runs a function after all the tests in this file have completed. If the function returns a promise or is a generator, Jest waits for that promise to resolve before continuing.
+
+Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+This is often useful if you want to clean up some global setup state that is shared across tests.
+
+For example:
+
+```js
+const globalDatabase = makeGlobalDatabase();
+
+function cleanUpDatabase(db) {
+ db.cleanUp();
+}
+
+afterAll(() => {
+ cleanUpDatabase(globalDatabase);
+});
+
+test('can find things', () => {
+ return globalDatabase.find('thing', {}, results => {
+ expect(results.length).toBeGreaterThan(0);
+ });
+});
+
+test('can insert a thing', () => {
+ return globalDatabase.insert('thing', makeThing(), response => {
+ expect(response.success).toBeTruthy();
+ });
+});
+```
+
+Here the `afterAll` ensures that `cleanUpDatabase` is called after all tests run.
+
+If `afterAll` is inside a `describe` block, it runs at the end of the describe block.
+
+If you want to run some cleanup after every test instead of after all tests, use `afterEach` instead.
+
+### `afterEach(fn, timeout)`
+
+Runs a function after each one of the tests in this file completes. If the function returns a promise or is a generator, Jest waits for that promise to resolve before continuing.
+
+Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+This is often useful if you want to clean up some temporary state that is created by each test.
+
+For example:
+
+```js
+const globalDatabase = makeGlobalDatabase();
+
+function cleanUpDatabase(db) {
+ db.cleanUp();
+}
+
+afterEach(() => {
+ cleanUpDatabase(globalDatabase);
+});
+
+test('can find things', () => {
+ return globalDatabase.find('thing', {}, results => {
+ expect(results.length).toBeGreaterThan(0);
+ });
+});
+
+test('can insert a thing', () => {
+ return globalDatabase.insert('thing', makeThing(), response => {
+ expect(response.success).toBeTruthy();
+ });
+});
+```
+
+Here the `afterEach` ensures that `cleanUpDatabase` is called after each test runs.
+
+If `afterEach` is inside a `describe` block, it only runs after the tests that are inside this describe block.
+
+If you want to run some cleanup just once, after all of the tests run, use `afterAll` instead.
+
+### `beforeAll(fn, timeout)`
+
+Runs a function before any of the tests in this file run. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running tests.
+
+Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+This is often useful if you want to set up some global state that will be used by many tests.
+
+For example:
+
+```js
+const globalDatabase = makeGlobalDatabase();
+
+beforeAll(() => {
+ // Clears the database and adds some testing data.
+ // Jest will wait for this promise to resolve before running tests.
+ return globalDatabase.clear().then(() => {
+ return globalDatabase.insert({testData: 'foo'});
+ });
+});
+
+// Since we only set up the database once in this example, it's important
+// that our tests don't modify it.
+test('can find things', () => {
+ return globalDatabase.find('thing', {}, results => {
+ expect(results.length).toBeGreaterThan(0);
+ });
+});
+```
+
+Here the `beforeAll` ensures that the database is set up before tests run. If setup was synchronous, you could do this without `beforeAll`. The key is that Jest will wait for a promise to resolve, so you can have asynchronous setup as well.
+
+If `beforeAll` is inside a `describe` block, it runs at the beginning of the describe block.
+
+If you want to run something before every test instead of before any test runs, use `beforeEach` instead.
+
+### `beforeEach(fn, timeout)`
+
+Runs a function before each of the tests in this file runs. If the function returns a promise or is a generator, Jest waits for that promise to resolve before running the test.
+
+Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+This is often useful if you want to reset some global state that will be used by many tests.
+
+For example:
+
+```js
+const globalDatabase = makeGlobalDatabase();
+
+beforeEach(() => {
+ // Clears the database and adds some testing data.
+ // Jest will wait for this promise to resolve before running tests.
+ return globalDatabase.clear().then(() => {
+ return globalDatabase.insert({testData: 'foo'});
+ });
+});
+
+test('can find things', () => {
+ return globalDatabase.find('thing', {}, results => {
+ expect(results.length).toBeGreaterThan(0);
+ });
+});
+
+test('can insert a thing', () => {
+ return globalDatabase.insert('thing', makeThing(), response => {
+ expect(response.success).toBeTruthy();
+ });
+});
+```
+
+Here the `beforeEach` ensures that the database is reset for each test.
+
+If `beforeEach` is inside a `describe` block, it runs for each test in the describe block.
+
+If you only need to run some setup code once, before any tests run, use `beforeAll` instead.
+
+### `describe(name, fn)`
+
+`describe(name, fn)` creates a block that groups together several related tests. For example, if you have a `myBeverage` object that is supposed to be delicious but not sour, you could test it with:
+
+```js
+const myBeverage = {
+ delicious: true,
+ sour: false,
+};
+
+describe('my beverage', () => {
+ test('is delicious', () => {
+ expect(myBeverage.delicious).toBeTruthy();
+ });
+
+ test('is not sour', () => {
+ expect(myBeverage.sour).toBeFalsy();
+ });
+});
+```
+
+This isn't required - you can write the `test` blocks directly at the top level. But this can be handy if you prefer your tests to be organized into groups.
+
+You can also nest `describe` blocks if you have a hierarchy of tests:
+
+```js
+const binaryStringToNumber = binString => {
+ if (!/^[01]+$/.test(binString)) {
+ throw new CustomError('Not a binary number.');
+ }
+
+ return parseInt(binString, 2);
+};
+
+describe('binaryStringToNumber', () => {
+ describe('given an invalid binary string', () => {
+ test('composed of non-numbers throws CustomError', () => {
+ expect(() => binaryStringToNumber('abc')).toThrowError(CustomError);
+ });
+
+ test('with extra whitespace throws CustomError', () => {
+ expect(() => binaryStringToNumber(' 100')).toThrowError(CustomError);
+ });
+ });
+
+ describe('given a valid binary string', () => {
+ test('returns the correct number', () => {
+ expect(binaryStringToNumber('100')).toBe(4);
+ });
+ });
+});
+```
+
+### `describe.each(table)(name, fn, timeout)`
+
+Use `describe.each` if you keep duplicating the same test suites with different data. `describe.each` allows you to write the test suite once and pass data in.
+
+`describe.each` is available with two APIs:
+
+#### 1. `describe.each(table)(name, fn, timeout)`
+
+- `table`: `Array` of Arrays with the arguments that are passed into the `fn` for each row.
+ - _Note_ If you pass in a 1D array of primitives, internally it will be mapped to a table i.e. `[1, 2, 3] -> [[1], [2], [3]]`
+- `name`: `String` the title of the test suite.
+ - Generate unique test titles by positionally injecting parameters with [`printf` formatting](https://nodejs.org/api/util.html#util_util_format_format_args):
+ - `%p` - [pretty-format](https://www.npmjs.com/package/pretty-format).
+ - `%s`- String.
+ - `%d`- Number.
+ - `%i` - Integer.
+ - `%f` - Floating point value.
+ - `%j` - JSON.
+ - `%o` - Object.
+ - `%#` - Index of the test case.
+ - `%%` - single percent sign ('%'). This does not consume an argument.
+ - Or generate unique test titles by injecting properties of test case object with `$variable`
+ - To inject nested object values use you can supply a keyPath i.e. `$variable.path.to.value`
+ - You can use `$#` to inject the index of the test case
+ - You cannot use `$variable` with the `printf` formatting except for `%%`
+- `fn`: `Function` the suite of tests to be ran, this is the function that will receive the parameters in each row as function arguments.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+describe.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ test(`returns ${expected}`, () => {
+ expect(a + b).toBe(expected);
+ });
+
+ test(`returned value not be greater than ${expected}`, () => {
+ expect(a + b).not.toBeGreaterThan(expected);
+ });
+
+ test(`returned value not be less than ${expected}`, () => {
+ expect(a + b).not.toBeLessThan(expected);
+ });
+});
+```
+
+```js
+describe.each([
+ {a: 1, b: 1, expected: 2},
+ {a: 1, b: 2, expected: 3},
+ {a: 2, b: 1, expected: 3},
+])('.add($a, $b)', ({a, b, expected}) => {
+ test(`returns ${expected}`, () => {
+ expect(a + b).toBe(expected);
+ });
+
+ test(`returned value not be greater than ${expected}`, () => {
+ expect(a + b).not.toBeGreaterThan(expected);
+ });
+
+ test(`returned value not be less than ${expected}`, () => {
+ expect(a + b).not.toBeLessThan(expected);
+ });
+});
+```
+
+#### 2. `` describe.each`table`(name, fn, timeout) ``
+
+- `table`: `Tagged Template Literal`
+ - First row of variable name column headings separated with `|`
+ - One or more subsequent rows of data supplied as template literal expressions using `${value}` syntax.
+- `name`: `String` the title of the test suite, use `$variable` to inject test data into the suite title from the tagged template expressions, and `$#` for the index of the row.
+ - To inject nested object values use you can supply a keyPath i.e. `$variable.path.to.value`
+- `fn`: `Function` the suite of tests to be ran, this is the function that will receive the test data object.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+describe.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('$a + $b', ({a, b, expected}) => {
+ test(`returns ${expected}`, () => {
+ expect(a + b).toBe(expected);
+ });
+
+ test(`returned value not be greater than ${expected}`, () => {
+ expect(a + b).not.toBeGreaterThan(expected);
+ });
+
+ test(`returned value not be less than ${expected}`, () => {
+ expect(a + b).not.toBeLessThan(expected);
+ });
+});
+```
+
+### `describe.only(name, fn)`
+
+Also under the alias: `fdescribe(name, fn)`
+
+You can use `describe.only` if you want to run only one describe block:
+
+```js
+describe.only('my beverage', () => {
+ test('is delicious', () => {
+ expect(myBeverage.delicious).toBeTruthy();
+ });
+
+ test('is not sour', () => {
+ expect(myBeverage.sour).toBeFalsy();
+ });
+});
+
+describe('my other beverage', () => {
+ // ... will be skipped
+});
+```
+
+### `describe.only.each(table)(name, fn)`
+
+Also under the aliases: `fdescribe.each(table)(name, fn)` and `` fdescribe.each`table`(name, fn) ``
+
+Use `describe.only.each` if you want to only run specific tests suites of data driven tests.
+
+`describe.only.each` is available with two APIs:
+
+#### `describe.only.each(table)(name, fn)`
+
+```js
+describe.only.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ test(`returns ${expected}`, () => {
+ expect(a + b).toBe(expected);
+ });
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` describe.only.each`table`(name, fn) ``
+
+```js
+describe.only.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', ({a, b, expected}) => {
+ test('passes', () => {
+ expect(a + b).toBe(expected);
+ });
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `describe.skip(name, fn)`
+
+Also under the alias: `xdescribe(name, fn)`
+
+You can use `describe.skip` if you do not want to run a particular describe block:
+
+```js
+describe('my beverage', () => {
+ test('is delicious', () => {
+ expect(myBeverage.delicious).toBeTruthy();
+ });
+
+ test('is not sour', () => {
+ expect(myBeverage.sour).toBeFalsy();
+ });
+});
+
+describe.skip('my other beverage', () => {
+ // ... will be skipped
+});
+```
+
+Using `describe.skip` is often a cleaner alternative to temporarily commenting out a chunk of tests.
+
+### `describe.skip.each(table)(name, fn)`
+
+Also under the aliases: `xdescribe.each(table)(name, fn)` and `` xdescribe.each`table`(name, fn) ``
+
+Use `describe.skip.each` if you want to stop running a suite of data driven tests.
+
+`describe.skip.each` is available with two APIs:
+
+#### `describe.skip.each(table)(name, fn)`
+
+```js
+describe.skip.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ test(`returns ${expected}`, () => {
+ expect(a + b).toBe(expected); // will not be ran
+ });
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` describe.skip.each`table`(name, fn) ``
+
+```js
+describe.skip.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', ({a, b, expected}) => {
+ test('will not be ran', () => {
+ expect(a + b).toBe(expected); // will not be ran
+ });
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `test(name, fn, timeout)`
+
+Also under the alias: `it(name, fn, timeout)`
+
+All you need in a test file is the `test` method which runs a test. For example, let's say there's a function `inchesOfRain()` that should be zero. Your whole test could be:
+
+```js
+test('did not rain', () => {
+ expect(inchesOfRain()).toBe(0);
+});
+```
+
+The first argument is the test name; the second argument is a function that contains the expectations to test. The third argument (optional) is `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+> Note: If a **promise is returned** from `test`, Jest will wait for the promise to resolve before letting the test complete. Jest will also wait if you **provide an argument to the test function**, usually called `done`. This could be handy when you want to test callbacks. See how to test async code [here](TestingAsyncCode.md#callbacks).
+
+For example, let's say `fetchBeverageList()` returns a promise that is supposed to resolve to a list that has `lemon` in it. You can test this with:
+
+```js
+test('has lemon in it', () => {
+ return fetchBeverageList().then(list => {
+ expect(list).toContain('lemon');
+ });
+});
+```
+
+Even though the call to `test` will return right away, the test doesn't complete until the promise resolves as well.
+
+### `test.concurrent(name, fn, timeout)`
+
+Also under the alias: `it.concurrent(name, fn, timeout)`
+
+Use `test.concurrent` if you want the test to run concurrently.
+
+> Note: `test.concurrent` is considered experimental - see [here](https://github.com/facebook/jest/labels/Area%3A%20Concurrent) for details on missing features and other issues
+
+The first argument is the test name; the second argument is an asynchronous function that contains the expectations to test. The third argument (optional) is `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+```
+test.concurrent('addition of 2 numbers', async () => {
+ expect(5 + 3).toBe(8);
+});
+
+test.concurrent('subtraction 2 numbers', async () => {
+ expect(5 - 3).toBe(2);
+});
+```
+
+> Note: Use `maxConcurrency` in configuration to prevents Jest from executing more than the specified amount of tests at the same time
+
+### `test.concurrent.each(table)(name, fn, timeout)`
+
+Also under the alias: `it.concurrent.each(table)(name, fn, timeout)`
+
+Use `test.concurrent.each` if you keep duplicating the same test with different data. `test.each` allows you to write the test once and pass data in, the tests are all run asynchronously.
+
+`test.concurrent.each` is available with two APIs:
+
+#### 1. `test.concurrent.each(table)(name, fn, timeout)`
+
+- `table`: `Array` of Arrays with the arguments that are passed into the test `fn` for each row.
+ - _Note_ If you pass in a 1D array of primitives, internally it will be mapped to a table i.e. `[1, 2, 3] -> [[1], [2], [3]]`
+- `name`: `String` the title of the test block.
+ - Generate unique test titles by positionally injecting parameters with [`printf` formatting](https://nodejs.org/api/util.html#util_util_format_format_args):
+ - `%p` - [pretty-format](https://www.npmjs.com/package/pretty-format).
+ - `%s`- String.
+ - `%d`- Number.
+ - `%i` - Integer.
+ - `%f` - Floating point value.
+ - `%j` - JSON.
+ - `%o` - Object.
+ - `%#` - Index of the test case.
+ - `%%` - single percent sign ('%'). This does not consume an argument.
+- `fn`: `Function` the test to be ran, this is the function that will receive the parameters in each row as function arguments, **this will have to be an asynchronous function**.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+test.concurrent.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', async (a, b, expected) => {
+ expect(a + b).toBe(expected);
+});
+```
+
+#### 2. `` test.concurrent.each`table`(name, fn, timeout) ``
+
+- `table`: `Tagged Template Literal`
+ - First row of variable name column headings separated with `|`
+ - One or more subsequent rows of data supplied as template literal expressions using `${value}` syntax.
+- `name`: `String` the title of the test, use `$variable` to inject test data into the test title from the tagged template expressions.
+ - To inject nested object values use you can supply a keyPath i.e. `$variable.path.to.value`
+- `fn`: `Function` the test to be ran, this is the function that will receive the test data object, **this will have to be an asynchronous function**.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+test.concurrent.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', async ({a, b, expected}) => {
+ expect(a + b).toBe(expected);
+});
+```
+
+### `test.concurrent.only.each(table)(name, fn)`
+
+Also under the alias: `it.concurrent.only.each(table)(name, fn)`
+
+Use `test.concurrent.only.each` if you want to only run specific tests with different test data concurrently.
+
+`test.concurrent.only.each` is available with two APIs:
+
+#### `test.concurrent.only.each(table)(name, fn)`
+
+```js
+test.concurrent.only.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', async (a, b, expected) => {
+ expect(a + b).toBe(expected);
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` test.only.each`table`(name, fn) ``
+
+```js
+test.concurrent.only.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', async ({a, b, expected}) => {
+ expect(a + b).toBe(expected);
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `test.concurrent.skip.each(table)(name, fn)`
+
+Also under the alias: `it.concurrent.skip.each(table)(name, fn)`
+
+Use `test.concurrent.skip.each` if you want to stop running a collection of asynchronous data driven tests.
+
+`test.concurrent.skip.each` is available with two APIs:
+
+#### `test.concurrent.skip.each(table)(name, fn)`
+
+```js
+test.concurrent.skip.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', async (a, b, expected) => {
+ expect(a + b).toBe(expected); // will not be ran
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` test.concurrent.skip.each`table`(name, fn) ``
+
+```js
+test.concurrent.skip.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', async ({a, b, expected}) => {
+ expect(a + b).toBe(expected); // will not be ran
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `test.each(table)(name, fn, timeout)`
+
+Also under the alias: `it.each(table)(name, fn)` and `` it.each`table`(name, fn) ``
+
+Use `test.each` if you keep duplicating the same test with different data. `test.each` allows you to write the test once and pass data in.
+
+`test.each` is available with two APIs:
+
+#### 1. `test.each(table)(name, fn, timeout)`
+
+- `table`: `Array` of Arrays with the arguments that are passed into the test `fn` for each row.
+ - _Note_ If you pass in a 1D array of primitives, internally it will be mapped to a table i.e. `[1, 2, 3] -> [[1], [2], [3]]`
+- `name`: `String` the title of the test block.
+ - Generate unique test titles by positionally injecting parameters with [`printf` formatting](https://nodejs.org/api/util.html#util_util_format_format_args):
+ - `%p` - [pretty-format](https://www.npmjs.com/package/pretty-format).
+ - `%s`- String.
+ - `%d`- Number.
+ - `%i` - Integer.
+ - `%f` - Floating point value.
+ - `%j` - JSON.
+ - `%o` - Object.
+ - `%#` - Index of the test case.
+ - `%%` - single percent sign ('%'). This does not consume an argument.
+ - Or generate unique test titles by injecting properties of test case object with `$variable`
+ - To inject nested object values use you can supply a keyPath i.e. `$variable.path.to.value`
+ - You can use `$#` to inject the index of the test case
+ - You cannot use `$variable` with the `printf` formatting except for `%%`
+- `fn`: `Function` the test to be ran, this is the function that will receive the parameters in each row as function arguments.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+test.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ expect(a + b).toBe(expected);
+});
+```
+
+```js
+test.each([
+ {a: 1, b: 1, expected: 2},
+ {a: 1, b: 2, expected: 3},
+ {a: 2, b: 1, expected: 3},
+])('.add($a, $b)', ({a, b, expected}) => {
+ expect(a + b).toBe(expected);
+});
+```
+
+#### 2. `` test.each`table`(name, fn, timeout) ``
+
+- `table`: `Tagged Template Literal`
+ - First row of variable name column headings separated with `|`
+ - One or more subsequent rows of data supplied as template literal expressions using `${value}` syntax.
+- `name`: `String` the title of the test, use `$variable` to inject test data into the test title from the tagged template expressions.
+ - To inject nested object values use you can supply a keyPath i.e. `$variable.path.to.value`
+- `fn`: `Function` the test to be ran, this is the function that will receive the test data object.
+- Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait for each row before aborting. _Note: The default timeout is 5 seconds._
+
+Example:
+
+```js
+test.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', ({a, b, expected}) => {
+ expect(a + b).toBe(expected);
+});
+```
+
+### `test.only(name, fn, timeout)`
+
+Also under the aliases: `it.only(name, fn, timeout)`, and `fit(name, fn, timeout)`
+
+When you are debugging a large test file, you will often only want to run a subset of tests. You can use `.only` to specify which tests are the only ones you want to run in that test file.
+
+Optionally, you can provide a `timeout` (in milliseconds) for specifying how long to wait before aborting. _Note: The default timeout is 5 seconds._
+
+For example, let's say you had these tests:
+
+```js
+test.only('it is raining', () => {
+ expect(inchesOfRain()).toBeGreaterThan(0);
+});
+
+test('it is not snowing', () => {
+ expect(inchesOfSnow()).toBe(0);
+});
+```
+
+Only the "it is raining" test will run in that test file, since it is run with `test.only`.
+
+Usually you wouldn't check code using `test.only` into source control - you would use it for debugging, and remove it once you have fixed the broken tests.
+
+### `test.only.each(table)(name, fn)`
+
+Also under the aliases: `it.only.each(table)(name, fn)`, `fit.each(table)(name, fn)`, `` it.only.each`table`(name, fn) `` and `` fit.each`table`(name, fn) ``
+
+Use `test.only.each` if you want to only run specific tests with different test data.
+
+`test.only.each` is available with two APIs:
+
+#### `test.only.each(table)(name, fn)`
+
+```js
+test.only.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ expect(a + b).toBe(expected);
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` test.only.each`table`(name, fn) ``
+
+```js
+test.only.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', ({a, b, expected}) => {
+ expect(a + b).toBe(expected);
+});
+
+test('will not be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `test.skip(name, fn)`
+
+Also under the aliases: `it.skip(name, fn)`, `xit(name, fn)`, and `xtest(name, fn)`
+
+When you are maintaining a large codebase, you may sometimes find a test that is temporarily broken for some reason. If you want to skip running this test, but you don't want to delete this code, you can use `test.skip` to specify some tests to skip.
+
+For example, let's say you had these tests:
+
+```js
+test('it is raining', () => {
+ expect(inchesOfRain()).toBeGreaterThan(0);
+});
+
+test.skip('it is not snowing', () => {
+ expect(inchesOfSnow()).toBe(0);
+});
+```
+
+Only the "it is raining" test will run, since the other test is run with `test.skip`.
+
+You could comment the test out, but it's often a bit nicer to use `test.skip` because it will maintain indentation and syntax highlighting.
+
+### `test.skip.each(table)(name, fn)`
+
+Also under the aliases: `it.skip.each(table)(name, fn)`, `xit.each(table)(name, fn)`, `xtest.each(table)(name, fn)`, `` it.skip.each`table`(name, fn) ``, `` xit.each`table`(name, fn) `` and `` xtest.each`table`(name, fn) ``
+
+Use `test.skip.each` if you want to stop running a collection of data driven tests.
+
+`test.skip.each` is available with two APIs:
+
+#### `test.skip.each(table)(name, fn)`
+
+```js
+test.skip.each([
+ [1, 1, 2],
+ [1, 2, 3],
+ [2, 1, 3],
+])('.add(%i, %i)', (a, b, expected) => {
+ expect(a + b).toBe(expected); // will not be ran
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+#### `` test.skip.each`table`(name, fn) ``
+
+```js
+test.skip.each`
+ a | b | expected
+ ${1} | ${1} | ${2}
+ ${1} | ${2} | ${3}
+ ${2} | ${1} | ${3}
+`('returns $expected when $a is added $b', ({a, b, expected}) => {
+ expect(a + b).toBe(expected); // will not be ran
+});
+
+test('will be ran', () => {
+ expect(1 / 0).toBe(Infinity);
+});
+```
+
+### `test.todo(name)`
+
+Also under the alias: `it.todo(name)`
+
+Use `test.todo` when you are planning on writing tests. These tests will be highlighted in the summary output at the end so you know how many tests you still need todo.
+
+_Note_: If you supply a test callback function then the `test.todo` will throw an error. If you have already implemented the test and it is broken and you do not want it to run, then use `test.skip` instead.
+
+#### API
+
+- `name`: `String` the title of the test plan.
+
+Example:
+
+```js
+const add = (a, b) => a + b;
+
+test.todo('add should be associative');
+```
diff --git a/website/versioned_docs/version-27.4/JestCommunity.md b/website/versioned_docs/version-27.4/JestCommunity.md
new file mode 100644
index 000000000000..af71f2e575ae
--- /dev/null
+++ b/website/versioned_docs/version-27.4/JestCommunity.md
@@ -0,0 +1,21 @@
+---
+title: Jest Community
+id: jest-community
+---
+
+The community around Jest is working hard to make the testing experience even greater.
+
+[jest-community](https://github.com/jest-community) is a new GitHub organization for high quality Jest additions curated by Jest maintainers and collaborators. It already features some of our favorite projects, to name a few:
+
+- [vscode-jest](https://github.com/jest-community/vscode-jest)
+- [jest-extended](https://github.com/jest-community/jest-extended)
+- [eslint-plugin-jest](https://github.com/jest-community/eslint-plugin-jest)
+- [awesome-jest](https://github.com/jest-community/awesome-jest)
+
+Community projects under one organisation are a great way for Jest to experiment with new ideas/techniques and approaches. Encourage contributions from the community and publish contributions independently at a faster pace.
+
+## Awesome Jest
+
+The jest-community org maintains an [awesome-jest](https://github.com/jest-community/awesome-jest) list of great projects and resources related to Jest.
+
+If you have something awesome to share, feel free to reach out to us! We'd love to share your project on the awesome-jest list ([send a PR here](https://github.com/jest-community/awesome-jest/pulls)) or if you would like to transfer your project to the jest-community org reach out to one of the owners of the org.
diff --git a/website/versioned_docs/version-27.4/JestObjectAPI.md b/website/versioned_docs/version-27.4/JestObjectAPI.md
new file mode 100644
index 000000000000..c4cd184b5661
--- /dev/null
+++ b/website/versioned_docs/version-27.4/JestObjectAPI.md
@@ -0,0 +1,730 @@
+---
+id: jest-object
+title: The Jest Object
+---
+
+The `jest` object is automatically in scope within every test file. The methods in the `jest` object help create mocks and let you control Jest's overall behavior. It can also be imported explicitly by via `import {jest} from '@jest/globals'`.
+
+## Methods
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Mock Modules
+
+### `jest.disableAutomock()`
+
+Disables automatic mocking in the module loader.
+
+> See `automock` section of [configuration](Configuration.md#automock-boolean) for more information
+
+After this method is called, all `require()`s will return the real versions of each module (rather than a mocked version).
+
+Jest configuration:
+
+```json
+{
+ "automock": true
+}
+```
+
+Example:
+
+```js title="utils.js"
+export default {
+ authorize: () => {
+ return 'token';
+ },
+};
+```
+
+```js title="__tests__/disableAutomocking.js"
+import utils from '../utils';
+
+jest.disableAutomock();
+
+test('original implementation', () => {
+ // now we have the original implementation,
+ // even if we set the automocking in a jest configuration
+ expect(utils.authorize()).toBe('token');
+});
+```
+
+This is usually useful when you have a scenario where the number of dependencies you want to mock is far less than the number of dependencies that you don't. For example, if you're writing a test for a module that uses a large number of dependencies that can be reasonably classified as "implementation details" of the module, then you likely do not want to mock them.
+
+Examples of dependencies that might be considered "implementation details" are things ranging from language built-ins (e.g. Array.prototype methods) to highly common utility methods (e.g. underscore/lo-dash, array utilities, etc) and entire libraries like React.js.
+
+Returns the `jest` object for chaining.
+
+_Note: this method was previously called `autoMockOff`. When using `babel-jest`, calls to `disableAutomock` will automatically be hoisted to the top of the code block. Use `autoMockOff` if you want to explicitly avoid this behavior._
+
+### `jest.enableAutomock()`
+
+Enables automatic mocking in the module loader.
+
+Returns the `jest` object for chaining.
+
+> See `automock` section of [configuration](Configuration.md#automock-boolean) for more information
+
+Example:
+
+```js title="utils.js"
+export default {
+ authorize: () => {
+ return 'token';
+ },
+ isAuthorized: secret => secret === 'wizard',
+};
+```
+
+```js title="__tests__/enableAutomocking.js"
+jest.enableAutomock();
+
+import utils from '../utils';
+
+test('original implementation', () => {
+ // now we have the mocked implementation,
+ expect(utils.authorize._isMockFunction).toBeTruthy();
+ expect(utils.isAuthorized._isMockFunction).toBeTruthy();
+});
+```
+
+_Note: this method was previously called `autoMockOn`. When using `babel-jest`, calls to `enableAutomock` will automatically be hoisted to the top of the code block. Use `autoMockOn` if you want to explicitly avoid this behavior._
+
+### `jest.createMockFromModule(moduleName)`
+
+##### renamed in Jest **26.0.0+**
+
+Also under the alias: `.genMockFromModule(moduleName)`
+
+Given the name of a module, use the automatic mocking system to generate a mocked version of the module for you.
+
+This is useful when you want to create a [manual mock](ManualMocks.md) that extends the automatic mock's behavior.
+
+Example:
+
+```js title="utils.js"
+export default {
+ authorize: () => {
+ return 'token';
+ },
+ isAuthorized: secret => secret === 'wizard',
+};
+```
+
+```js title="__tests__/createMockFromModule.test.js"
+const utils = jest.createMockFromModule('../utils').default;
+utils.isAuthorized = jest.fn(secret => secret === 'not wizard');
+
+test('implementation created by jest.createMockFromModule', () => {
+ expect(utils.authorize.mock).toBeTruthy();
+ expect(utils.isAuthorized('not wizard')).toEqual(true);
+});
+```
+
+This is how `createMockFromModule` will mock the following data types:
+
+#### `Function`
+
+Creates a new [mock function](mock-functions). The new function has no formal parameters and when called will return `undefined`. This functionality also applies to `async` functions.
+
+#### `Class`
+
+Creates a new class. The interface of the original class is maintained, all of the class member functions and properties will be mocked.
+
+#### `Object`
+
+Creates a new deeply cloned object. The object keys are maintained and their values are mocked.
+
+#### `Array`
+
+Creates a new empty array, ignoring the original.
+
+#### `Primitives`
+
+Creates a new property with the same primitive value as the original property.
+
+Example:
+
+```js title="example.js"
+module.exports = {
+ function: function square(a, b) {
+ return a * b;
+ },
+ asyncFunction: async function asyncSquare(a, b) {
+ const result = (await a) * b;
+ return result;
+ },
+ class: new (class Bar {
+ constructor() {
+ this.array = [1, 2, 3];
+ }
+ foo() {}
+ })(),
+ object: {
+ baz: 'foo',
+ bar: {
+ fiz: 1,
+ buzz: [1, 2, 3],
+ },
+ },
+ array: [1, 2, 3],
+ number: 123,
+ string: 'baz',
+ boolean: true,
+ symbol: Symbol.for('a.b.c'),
+};
+```
+
+```js title="__tests__/example.test.js"
+const example = jest.createMockFromModule('./example');
+
+test('should run example code', () => {
+ // creates a new mocked function with no formal arguments.
+ expect(example.function.name).toEqual('square');
+ expect(example.function.length).toEqual(0);
+
+ // async functions get the same treatment as standard synchronous functions.
+ expect(example.asyncFunction.name).toEqual('asyncSquare');
+ expect(example.asyncFunction.length).toEqual(0);
+
+ // creates a new class with the same interface, member functions and properties are mocked.
+ expect(example.class.constructor.name).toEqual('Bar');
+ expect(example.class.foo.name).toEqual('foo');
+ expect(example.class.array.length).toEqual(0);
+
+ // creates a deeply cloned version of the original object.
+ expect(example.object).toEqual({
+ baz: 'foo',
+ bar: {
+ fiz: 1,
+ buzz: [],
+ },
+ });
+
+ // creates a new empty array, ignoring the original array.
+ expect(example.array.length).toEqual(0);
+
+ // creates a new property with the same primitive value as the original property.
+ expect(example.number).toEqual(123);
+ expect(example.string).toEqual('baz');
+ expect(example.boolean).toEqual(true);
+ expect(example.symbol).toEqual(Symbol.for('a.b.c'));
+});
+```
+
+### `jest.mock(moduleName, factory, options)`
+
+Mocks a module with an auto-mocked version when it is being required. `factory` and `options` are optional. For example:
+
+```js title="banana.js"
+module.exports = () => 'banana';
+```
+
+```js title="__tests__/test.js"
+jest.mock('../banana');
+
+const banana = require('../banana'); // banana will be explicitly mocked.
+
+banana(); // will return 'undefined' because the function is auto-mocked.
+```
+
+The second argument can be used to specify an explicit module factory that is being run instead of using Jest's automocking feature:
+
+```js
+jest.mock('../moduleName', () => {
+ return jest.fn(() => 42);
+});
+
+// This runs the function specified as second argument to `jest.mock`.
+const moduleName = require('../moduleName');
+moduleName(); // Will return '42';
+```
+
+When using the `factory` parameter for an ES6 module with a default export, the `__esModule: true` property needs to be specified. This property is normally generated by Babel / TypeScript, but here it needs to be set manually. When importing a default export, it's an instruction to import the property named `default` from the export object:
+
+```js
+import moduleName, {foo} from '../moduleName';
+
+jest.mock('../moduleName', () => {
+ return {
+ __esModule: true,
+ default: jest.fn(() => 42),
+ foo: jest.fn(() => 43),
+ };
+});
+
+moduleName(); // Will return 42
+foo(); // Will return 43
+```
+
+The third argument can be used to create virtual mocks – mocks of modules that don't exist anywhere in the system:
+
+```js
+jest.mock(
+ '../moduleName',
+ () => {
+ /*
+ * Custom implementation of a module that doesn't exist in JS,
+ * like a generated module or a native module in react-native.
+ */
+ },
+ {virtual: true},
+);
+```
+
+> **Warning:** Importing a module in a setup file (as specified by `setupFilesAfterEnv`) will prevent mocking for the module in question, as well as all the modules that it imports.
+
+Modules that are mocked with `jest.mock` are mocked only for the file that calls `jest.mock`. Another file that imports the module will get the original implementation even if it runs after the test file that mocks the module.
+
+Returns the `jest` object for chaining.
+
+### `jest.unmock(moduleName)`
+
+Indicates that the module system should never return a mocked version of the specified module from `require()` (e.g. that it should always return the real module).
+
+The most common use of this API is for specifying the module a given test intends to be testing (and thus doesn't want automatically mocked).
+
+Returns the `jest` object for chaining.
+
+### `jest.doMock(moduleName, factory, options)`
+
+When using `babel-jest`, calls to `mock` will automatically be hoisted to the top of the code block. Use this method if you want to explicitly avoid this behavior.
+
+One example when this is useful is when you want to mock a module differently within the same file:
+
+```js
+beforeEach(() => {
+ jest.resetModules();
+});
+
+test('moduleName 1', () => {
+ jest.doMock('../moduleName', () => {
+ return jest.fn(() => 1);
+ });
+ const moduleName = require('../moduleName');
+ expect(moduleName()).toEqual(1);
+});
+
+test('moduleName 2', () => {
+ jest.doMock('../moduleName', () => {
+ return jest.fn(() => 2);
+ });
+ const moduleName = require('../moduleName');
+ expect(moduleName()).toEqual(2);
+});
+```
+
+Using `jest.doMock()` with ES6 imports requires additional steps. Follow these if you don't want to use `require` in your tests:
+
+- We have to specify the `__esModule: true` property (see the [`jest.mock()`](#jestmockmodulename-factory-options) API for more information).
+- Static ES6 module imports are hoisted to the top of the file, so instead we have to import them dynamically using `import()`.
+- Finally, we need an environment which supports dynamic importing. Please see [Using Babel](GettingStarted.md#using-babel) for the initial setup. Then add the plugin [babel-plugin-dynamic-import-node](https://www.npmjs.com/package/babel-plugin-dynamic-import-node), or an equivalent, to your Babel config to enable dynamic importing in Node.
+
+```js
+beforeEach(() => {
+ jest.resetModules();
+});
+
+test('moduleName 1', () => {
+ jest.doMock('../moduleName', () => {
+ return {
+ __esModule: true,
+ default: 'default1',
+ foo: 'foo1',
+ };
+ });
+ return import('../moduleName').then(moduleName => {
+ expect(moduleName.default).toEqual('default1');
+ expect(moduleName.foo).toEqual('foo1');
+ });
+});
+
+test('moduleName 2', () => {
+ jest.doMock('../moduleName', () => {
+ return {
+ __esModule: true,
+ default: 'default2',
+ foo: 'foo2',
+ };
+ });
+ return import('../moduleName').then(moduleName => {
+ expect(moduleName.default).toEqual('default2');
+ expect(moduleName.foo).toEqual('foo2');
+ });
+});
+```
+
+Returns the `jest` object for chaining.
+
+### `jest.dontMock(moduleName)`
+
+When using `babel-jest`, calls to `unmock` will automatically be hoisted to the top of the code block. Use this method if you want to explicitly avoid this behavior.
+
+Returns the `jest` object for chaining.
+
+### `jest.setMock(moduleName, moduleExports)`
+
+Explicitly supplies the mock object that the module system should return for the specified module.
+
+On occasion, there are times where the automatically generated mock the module system would normally provide you isn't adequate enough for your testing needs. Normally under those circumstances you should write a [manual mock](ManualMocks.md) that is more adequate for the module in question. However, on extremely rare occasions, even a manual mock isn't suitable for your purposes and you need to build the mock yourself inside your test.
+
+In these rare scenarios you can use this API to manually fill the slot in the module system's mock-module registry.
+
+Returns the `jest` object for chaining.
+
+_Note It is recommended to use [`jest.mock()`](#jestmockmodulename-factory-options) instead. The `jest.mock` API's second argument is a module factory instead of the expected exported module object._
+
+### `jest.requireActual(moduleName)`
+
+Returns the actual module instead of a mock, bypassing all checks on whether the module should receive a mock implementation or not.
+
+Example:
+
+```js
+jest.mock('../myModule', () => {
+ // Require the original module to not be mocked...
+ const originalModule = jest.requireActual('../myModule');
+
+ return {
+ __esModule: true, // Use it when dealing with esModules
+ ...originalModule,
+ getRandom: jest.fn().mockReturnValue(10),
+ };
+});
+
+const getRandom = require('../myModule').getRandom;
+
+getRandom(); // Always returns 10
+```
+
+### `jest.requireMock(moduleName)`
+
+Returns a mock module instead of the actual module, bypassing all checks on whether the module should be required normally or not.
+
+### `jest.resetModules()`
+
+Resets the module registry - the cache of all required modules. This is useful to isolate modules where local state might conflict between tests.
+
+Example:
+
+```js
+const sum1 = require('../sum');
+jest.resetModules();
+const sum2 = require('../sum');
+sum1 === sum2;
+// > false (Both sum modules are separate "instances" of the sum module.)
+```
+
+Example in a test:
+
+```js
+beforeEach(() => {
+ jest.resetModules();
+});
+
+test('works', () => {
+ const sum = require('../sum');
+});
+
+test('works too', () => {
+ const sum = require('../sum');
+ // sum is a different copy of the sum module from the previous test.
+});
+```
+
+Returns the `jest` object for chaining.
+
+### `jest.isolateModules(fn)`
+
+`jest.isolateModules(fn)` goes a step further than `jest.resetModules()` and creates a sandbox registry for the modules that are loaded inside the callback function. This is useful to isolate specific modules for every test so that local module state doesn't conflict between tests.
+
+```js
+let myModule;
+jest.isolateModules(() => {
+ myModule = require('myModule');
+});
+
+const otherCopyOfMyModule = require('myModule');
+```
+
+## Mock Functions
+
+### `jest.fn(implementation)`
+
+Returns a new, unused [mock function](MockFunctionAPI.md). Optionally takes a mock implementation.
+
+```js
+const mockFn = jest.fn();
+mockFn();
+expect(mockFn).toHaveBeenCalled();
+
+// With a mock implementation:
+const returnsTrue = jest.fn(() => true);
+console.log(returnsTrue()); // true;
+```
+
+### `jest.isMockFunction(fn)`
+
+Determines if the given function is a mocked function.
+
+### `jest.spyOn(object, methodName)`
+
+Creates a mock function similar to `jest.fn` but also tracks calls to `object[methodName]`. Returns a Jest [mock function](MockFunctionAPI.md).
+
+_Note: By default, `jest.spyOn` also calls the **spied** method. This is different behavior from most other test libraries. If you want to overwrite the original function, you can use `jest.spyOn(object, methodName).mockImplementation(() => customImplementation)` or `object[methodName] = jest.fn(() => customImplementation);`_
+
+Example:
+
+```js
+const video = {
+ play() {
+ return true;
+ },
+};
+
+module.exports = video;
+```
+
+Example test:
+
+```js
+const video = require('./video');
+
+test('plays video', () => {
+ const spy = jest.spyOn(video, 'play');
+ const isPlaying = video.play();
+
+ expect(spy).toHaveBeenCalled();
+ expect(isPlaying).toBe(true);
+
+ spy.mockRestore();
+});
+```
+
+### `jest.spyOn(object, methodName, accessType?)`
+
+Since Jest 22.1.0+, the `jest.spyOn` method takes an optional third argument of `accessType` that can be either `'get'` or `'set'`, which proves to be useful when you want to spy on a getter or a setter, respectively.
+
+Example:
+
+```js
+const video = {
+ // it's a getter!
+ get play() {
+ return true;
+ },
+};
+
+module.exports = video;
+
+const audio = {
+ _volume: false,
+ // it's a setter!
+ set volume(value) {
+ this._volume = value;
+ },
+ get volume() {
+ return this._volume;
+ },
+};
+
+module.exports = audio;
+```
+
+Example test:
+
+```js
+const audio = require('./audio');
+const video = require('./video');
+
+test('plays video', () => {
+ const spy = jest.spyOn(video, 'play', 'get'); // we pass 'get'
+ const isPlaying = video.play;
+
+ expect(spy).toHaveBeenCalled();
+ expect(isPlaying).toBe(true);
+
+ spy.mockRestore();
+});
+
+test('plays audio', () => {
+ const spy = jest.spyOn(audio, 'volume', 'set'); // we pass 'set'
+ audio.volume = 100;
+
+ expect(spy).toHaveBeenCalled();
+ expect(audio.volume).toBe(100);
+
+ spy.mockRestore();
+});
+```
+
+### `jest.clearAllMocks()`
+
+Clears the `mock.calls`, `mock.instances` and `mock.results` properties of all mocks. Equivalent to calling [`.mockClear()`](MockFunctionAPI.md#mockfnmockclear) on every mocked function.
+
+Returns the `jest` object for chaining.
+
+### `jest.resetAllMocks()`
+
+Resets the state of all mocks. Equivalent to calling [`.mockReset()`](MockFunctionAPI.md#mockfnmockreset) on every mocked function.
+
+Returns the `jest` object for chaining.
+
+### `jest.restoreAllMocks()`
+
+Restores all mocks back to their original value. Equivalent to calling [`.mockRestore()`](MockFunctionAPI.md#mockfnmockrestore) on every mocked function. Beware that `jest.restoreAllMocks()` only works when the mock was created with `jest.spyOn`; other mocks will require you to manually restore them.
+
+### `jest.mocked(item: T, deep = false)`
+
+The `mocked` test helper provides typings on your mocked modules and even their deep methods, based on the typing of its source. It makes use of the latest TypeScript feature, so you even have argument types completion in the IDE (as opposed to `jest.MockInstance`).
+
+_Note: while it needs to be a function so that input type is changed, the helper itself does nothing else than returning the given input value._
+
+Example:
+
+```ts
+// foo.ts
+export const foo = {
+ a: {
+ b: {
+ c: {
+ hello: (name: string) => `Hello, ${name}`,
+ },
+ },
+ },
+ name: () => 'foo',
+};
+```
+
+```ts
+// foo.spec.ts
+import {foo} from './foo';
+jest.mock('./foo');
+
+// here the whole foo var is mocked deeply
+const mockedFoo = jest.mocked(foo, true);
+
+test('deep', () => {
+ // there will be no TS error here, and you'll have completion in modern IDEs
+ mockedFoo.a.b.c.hello('me');
+ // same here
+ expect(mockedFoo.a.b.c.hello.mock.calls).toHaveLength(1);
+});
+
+test('direct', () => {
+ foo.name();
+ // here only foo.name is mocked (or its methods if it's an object)
+ expect(mocked(foo.name).mock.calls).toHaveLength(1);
+});
+```
+
+## Mock Timers
+
+### `jest.useFakeTimers(implementation?: 'modern' | 'legacy')`
+
+Instructs Jest to use fake versions of the standard timer functions (`setTimeout`, `setInterval`, `clearTimeout`, `clearInterval`, `nextTick`, `setImmediate` and `clearImmediate` as well as `Date`).
+
+If you pass `'legacy'` as an argument, Jest's legacy implementation will be used rather than one based on [`@sinonjs/fake-timers`](https://github.com/sinonjs/fake-timers).
+
+Returns the `jest` object for chaining.
+
+### `jest.useRealTimers()`
+
+Instructs Jest to use the real versions of the standard timer functions.
+
+Returns the `jest` object for chaining.
+
+### `jest.runAllTicks()`
+
+Exhausts the **micro**-task queue (usually interfaced in node via `process.nextTick`).
+
+When this API is called, all pending micro-tasks that have been queued via `process.nextTick` will be executed. Additionally, if those micro-tasks themselves schedule new micro-tasks, those will be continually exhausted until there are no more micro-tasks remaining in the queue.
+
+### `jest.runAllTimers()`
+
+Exhausts both the **macro**-task queue (i.e., all tasks queued by `setTimeout()`, `setInterval()`, and `setImmediate()`) and the **micro**-task queue (usually interfaced in node via `process.nextTick`).
+
+When this API is called, all pending macro-tasks and micro-tasks will be executed. If those tasks themselves schedule new tasks, those will be continually exhausted until there are no more tasks remaining in the queue.
+
+This is often useful for synchronously executing setTimeouts during a test in order to synchronously assert about some behavior that would only happen after the `setTimeout()` or `setInterval()` callbacks executed. See the [Timer mocks](TimerMocks.md) doc for more information.
+
+### `jest.runAllImmediates()`
+
+Exhausts all tasks queued by `setImmediate()`.
+
+> Note: This function is not available when using modern fake timers implementation
+
+### `jest.advanceTimersByTime(msToRun)`
+
+Executes only the macro task queue (i.e. all tasks queued by `setTimeout()` or `setInterval()` and `setImmediate()`).
+
+When this API is called, all timers are advanced by `msToRun` milliseconds. All pending "macro-tasks" that have been queued via `setTimeout()` or `setInterval()`, and would be executed within this time frame will be executed. Additionally, if those macro-tasks schedule new macro-tasks that would be executed within the same time frame, those will be executed until there are no more macro-tasks remaining in the queue, that should be run within `msToRun` milliseconds.
+
+### `jest.runOnlyPendingTimers()`
+
+Executes only the macro-tasks that are currently pending (i.e., only the tasks that have been queued by `setTimeout()` or `setInterval()` up to this point). If any of the currently pending macro-tasks schedule new macro-tasks, those new tasks will not be executed by this call.
+
+This is useful for scenarios such as one where the module being tested schedules a `setTimeout()` whose callback schedules another `setTimeout()` recursively (meaning the scheduling never stops). In these scenarios, it's useful to be able to run forward in time by a single step at a time.
+
+### `jest.advanceTimersToNextTimer(steps)`
+
+Advances all timers by the needed milliseconds so that only the next timeouts/intervals will run.
+
+Optionally, you can provide `steps`, so it will run `steps` amount of next timeouts/intervals.
+
+### `jest.clearAllTimers()`
+
+Removes any pending timers from the timer system.
+
+This means, if any timers have been scheduled (but have not yet executed), they will be cleared and will never have the opportunity to execute in the future.
+
+### `jest.getTimerCount()`
+
+Returns the number of fake timers still left to run.
+
+### `jest.setSystemTime(now?: number | Date)`
+
+Set the current system time used by fake timers. Simulates a user changing the system clock while your program is running. It affects the current time but it does not in itself cause e.g. timers to fire; they will fire exactly as they would have done without the call to `jest.setSystemTime()`.
+
+> Note: This function is only available when using modern fake timers implementation
+
+### `jest.getRealSystemTime()`
+
+When mocking time, `Date.now()` will also be mocked. If you for some reason need access to the real current time, you can invoke this function.
+
+> Note: This function is only available when using modern fake timers implementation
+
+## Misc
+
+### `jest.setTimeout(timeout)`
+
+Set the default timeout interval for tests and before/after hooks in milliseconds. This only affects the test file from which this function is called.
+
+_Note: The default timeout interval is 5 seconds if this method is not called._
+
+_Note: If you want to set the timeout for all test files, a good place to do this is in `setupFilesAfterEnv`._
+
+Example:
+
+```js
+jest.setTimeout(1000); // 1 second
+```
+
+### `jest.retryTimes()`
+
+Runs failed tests n-times until they pass or until the max number of retries is exhausted. This only works with the default [jest-circus](https://github.com/facebook/jest/tree/main/packages/jest-circus) runner!
+
+Example in a test:
+
+```js
+jest.retryTimes(3);
+test('will fail', () => {
+ expect(true).toBe(false);
+});
+```
+
+Returns the `jest` object for chaining.
diff --git a/website/versioned_docs/version-27.4/JestPlatform.md b/website/versioned_docs/version-27.4/JestPlatform.md
new file mode 100644
index 000000000000..7e638e040b63
--- /dev/null
+++ b/website/versioned_docs/version-27.4/JestPlatform.md
@@ -0,0 +1,170 @@
+---
+id: jest-platform
+title: Jest Platform
+---
+
+You can cherry pick specific features of Jest and use them as standalone packages. Here's a list of the available packages:
+
+## jest-changed-files
+
+Tool for identifying modified files in a git/hg repository. Exports two functions:
+
+- `getChangedFilesForRoots` returns a promise that resolves to an object with the changed files and repos.
+- `findRepos` returns a promise that resolves to a set of repositories contained in the specified path.
+
+### Example
+
+```javascript
+const {getChangedFilesForRoots} = require('jest-changed-files');
+
+// print the set of modified files since last commit in the current repo
+getChangedFilesForRoots(['./'], {
+ lastCommit: true,
+}).then(result => console.log(result.changedFiles));
+```
+
+You can read more about `jest-changed-files` in the [readme file](https://github.com/facebook/jest/blob/main/packages/jest-changed-files/README.md).
+
+## jest-diff
+
+Tool for visualizing changes in data. Exports a function that compares two values of any type and returns a "pretty-printed" string illustrating the difference between the two arguments.
+
+### Example
+
+```javascript
+const {diff} = require('jest-diff');
+
+const a = {a: {b: {c: 5}}};
+const b = {a: {b: {c: 6}}};
+
+const result = diff(a, b);
+
+// print diff
+console.log(result);
+```
+
+## jest-docblock
+
+Tool for extracting and parsing the comments at the top of a JavaScript file. Exports various functions to manipulate the data inside the comment block.
+
+### Example
+
+```javascript
+const {parseWithComments} = require('jest-docblock');
+
+const code = `
+/**
+ * This is a sample
+ *
+ * @flow
+ */
+
+ console.log('Hello World!');
+`;
+
+const parsed = parseWithComments(code);
+
+// prints an object with two attributes: comments and pragmas.
+console.log(parsed);
+```
+
+You can read more about `jest-docblock` in the [readme file](https://github.com/facebook/jest/blob/main/packages/jest-docblock/README.md).
+
+## jest-get-type
+
+Module that identifies the primitive type of any JavaScript value. Exports a function that returns a string with the type of the value passed as argument.
+
+### Example
+
+```javascript
+const {getType} = require('jest-get-type');
+
+const array = [1, 2, 3];
+const nullValue = null;
+const undefinedValue = undefined;
+
+// prints 'array'
+console.log(getType(array));
+// prints 'null'
+console.log(getType(nullValue));
+// prints 'undefined'
+console.log(getType(undefinedValue));
+```
+
+## jest-validate
+
+Tool for validating configurations submitted by users. Exports a function that takes two arguments: the user's configuration and an object containing an example configuration and other options. The return value is an object with two attributes:
+
+- `hasDeprecationWarnings`, a boolean indicating whether the submitted configuration has deprecation warnings,
+- `isValid`, a boolean indicating whether the configuration is correct or not.
+
+### Example
+
+```javascript
+const {validate} = require('jest-validate');
+
+const configByUser = {
+ transform: '/node_modules/my-custom-transform',
+};
+
+const result = validate(configByUser, {
+ comment: ' Documentation: http://custom-docs.com',
+ exampleConfig: {transform: '/node_modules/babel-jest'},
+});
+
+console.log(result);
+```
+
+You can read more about `jest-validate` in the [readme file](https://github.com/facebook/jest/blob/main/packages/jest-validate/README.md).
+
+## jest-worker
+
+Module used for parallelization of tasks. Exports a class `JestWorker` that takes the path of Node.js module and lets you call the module's exported methods as if they were class methods, returning a promise that resolves when the specified method finishes its execution in a forked process.
+
+### Example
+
+```javascript title="heavy-task.js"
+module.exports = {
+ myHeavyTask: args => {
+ // long running CPU intensive task.
+ },
+};
+```
+
+```javascript title="main.js"
+async function main() {
+ const worker = new Worker(require.resolve('./heavy-task.js'));
+
+ // run 2 tasks in parallel with different arguments
+ const results = await Promise.all([
+ worker.myHeavyTask({foo: 'bar'}),
+ worker.myHeavyTask({bar: 'foo'}),
+ ]);
+
+ console.log(results);
+}
+
+main();
+```
+
+You can read more about `jest-worker` in the [readme file](https://github.com/facebook/jest/blob/main/packages/jest-worker/README.md).
+
+## pretty-format
+
+Exports a function that converts any JavaScript value into a human-readable string. Supports all built-in JavaScript types out of the box and allows extension for application-specific types via user-defined plugins.
+
+### Example
+
+```javascript
+const {format: prettyFormat} = require('pretty-format');
+
+const val = {object: {}};
+val.circularReference = val;
+val[Symbol('foo')] = 'foo';
+val.map = new Map([['prop', 'value']]);
+val.array = [-0, Infinity, NaN];
+
+console.log(prettyFormat(val));
+```
+
+You can read more about `pretty-format` in the [readme file](https://github.com/facebook/jest/blob/main/packages/pretty-format/README.md).
diff --git a/website/versioned_docs/version-27.4/ManualMocks.md b/website/versioned_docs/version-27.4/ManualMocks.md
new file mode 100644
index 000000000000..178226d727f9
--- /dev/null
+++ b/website/versioned_docs/version-27.4/ManualMocks.md
@@ -0,0 +1,164 @@
+---
+id: manual-mocks
+title: Manual Mocks
+---
+
+Manual mocks are used to stub out functionality with mock data. For example, instead of accessing a remote resource like a website or a database, you might want to create a manual mock that allows you to use fake data. This ensures your tests will be fast and not flaky.
+
+## Mocking user modules
+
+Manual mocks are defined by writing a module in a `__mocks__/` subdirectory immediately adjacent to the module. For example, to mock a module called `user` in the `models` directory, create a file called `user.js` and put it in the `models/__mocks__` directory. Note that the `__mocks__` folder is case-sensitive, so naming the directory `__MOCKS__` will break on some systems.
+
+> When we require that module in our tests (meaning we want to use the manual mock instead of the real implementation), explicitly calling `jest.mock('./moduleName')` is **required**.
+
+## Mocking Node modules
+
+If the module you are mocking is a Node module (e.g.: `lodash`), the mock should be placed in the `__mocks__` directory adjacent to `node_modules` (unless you configured [`roots`](Configuration.md#roots-arraystring) to point to a folder other than the project root) and will be **automatically** mocked. There's no need to explicitly call `jest.mock('module_name')`.
+
+Scoped modules (also known as [scoped packages](https://docs.npmjs.com/cli/v6/using-npm/scope)) can be mocked by creating a file in a directory structure that matches the name of the scoped module. For example, to mock a scoped module called `@scope/project-name`, create a file at `__mocks__/@scope/project-name.js`, creating the `@scope/` directory accordingly.
+
+> Warning: If we want to mock Node's core modules (e.g.: `fs` or `path`), then explicitly calling e.g. `jest.mock('path')` is **required**, because core Node modules are not mocked by default.
+
+## Examples
+
+```bash
+.
+├── config
+├── __mocks__
+│ └── fs.js
+├── models
+│ ├── __mocks__
+│ │ └── user.js
+│ └── user.js
+├── node_modules
+└── views
+```
+
+When a manual mock exists for a given module, Jest's module system will use that module when explicitly calling `jest.mock('moduleName')`. However, when `automock` is set to `true`, the manual mock implementation will be used instead of the automatically created mock, even if `jest.mock('moduleName')` is not called. To opt out of this behavior you will need to explicitly call `jest.unmock('moduleName')` in tests that should use the actual module implementation.
+
+> Note: In order to mock properly, Jest needs `jest.mock('moduleName')` to be in the same scope as the `require/import` statement.
+
+Here's a contrived example where we have a module that provides a summary of all the files in a given directory. In this case, we use the core (built in) `fs` module.
+
+```javascript title="FileSummarizer.js"
+'use strict';
+
+const fs = require('fs');
+
+function summarizeFilesInDirectorySync(directory) {
+ return fs.readdirSync(directory).map(fileName => ({
+ directory,
+ fileName,
+ }));
+}
+
+exports.summarizeFilesInDirectorySync = summarizeFilesInDirectorySync;
+```
+
+Since we'd like our tests to avoid actually hitting the disk (that's pretty slow and fragile), we create a manual mock for the `fs` module by extending an automatic mock. Our manual mock will implement custom versions of the `fs` APIs that we can build on for our tests:
+
+```javascript title="__mocks__/fs.js"
+'use strict';
+
+const path = require('path');
+
+const fs = jest.createMockFromModule('fs');
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+function __setMockFiles(newMockFiles) {
+ mockFiles = Object.create(null);
+ for (const file in newMockFiles) {
+ const dir = path.dirname(file);
+
+ if (!mockFiles[dir]) {
+ mockFiles[dir] = [];
+ }
+ mockFiles[dir].push(path.basename(file));
+ }
+}
+
+// A custom version of `readdirSync` that reads from the special mocked out
+// file list set via __setMockFiles
+function readdirSync(directoryPath) {
+ return mockFiles[directoryPath] || [];
+}
+
+fs.__setMockFiles = __setMockFiles;
+fs.readdirSync = readdirSync;
+
+module.exports = fs;
+```
+
+Now we write our test. Note that we need to explicitly tell that we want to mock the `fs` module because it’s a core Node module:
+
+```javascript title="__tests__/FileSummarizer-test.js"
+'use strict';
+
+jest.mock('fs');
+
+describe('listFilesInDirectorySync', () => {
+ const MOCK_FILE_INFO = {
+ '/path/to/file1.js': 'console.log("file1 contents");',
+ '/path/to/file2.txt': 'file2 contents',
+ };
+
+ beforeEach(() => {
+ // Set up some mocked out file info before each test
+ require('fs').__setMockFiles(MOCK_FILE_INFO);
+ });
+
+ test('includes all files in the directory in the summary', () => {
+ const FileSummarizer = require('../FileSummarizer');
+ const fileSummary =
+ FileSummarizer.summarizeFilesInDirectorySync('/path/to');
+
+ expect(fileSummary.length).toBe(2);
+ });
+});
+```
+
+The example mock shown here uses [`jest.createMockFromModule`](JestObjectAPI.md#jestcreatemockfrommodulemodulename) to generate an automatic mock, and overrides its default behavior. This is the recommended approach, but is completely optional. If you do not want to use the automatic mock at all, you can export your own functions from the mock file. One downside to fully manual mocks is that they're manual – meaning you have to manually update them any time the module they are mocking changes. Because of this, it's best to use or extend the automatic mock when it works for your needs.
+
+To ensure that a manual mock and its real implementation stay in sync, it might be useful to require the real module using [`jest.requireActual(moduleName)`](JestObjectAPI.md#jestrequireactualmodulename) in your manual mock and amending it with mock functions before exporting it.
+
+The code for this example is available at [examples/manual-mocks](https://github.com/facebook/jest/tree/main/examples/manual-mocks).
+
+## Using with ES module imports
+
+If you're using [ES module imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) then you'll normally be inclined to put your `import` statements at the top of the test file. But often you need to instruct Jest to use a mock before modules use it. For this reason, Jest will automatically hoist `jest.mock` calls to the top of the module (before any imports). To learn more about this and see it in action, see [this repo](https://github.com/kentcdodds/how-jest-mocking-works).
+
+## Mocking methods which are not implemented in JSDOM
+
+If some code uses a method which JSDOM (the DOM implementation used by Jest) hasn't implemented yet, testing it is not easily possible. This is e.g. the case with `window.matchMedia()`. Jest returns `TypeError: window.matchMedia is not a function` and doesn't properly execute the test.
+
+In this case, mocking `matchMedia` in the test file should solve the issue:
+
+```js
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+});
+```
+
+This works if `window.matchMedia()` is used in a function (or method) which is invoked in the test. If `window.matchMedia()` is executed directly in the tested file, Jest reports the same error. In this case, the solution is to move the manual mock into a separate file and include this one in the test **before** the tested file:
+
+```js
+import './matchMedia.mock'; // Must be imported before the tested file
+import {myMethod} from './file-to-test';
+
+describe('myMethod()', () => {
+ // Test the method here...
+});
+```
diff --git a/website/versioned_docs/version-27.4/MigrationGuide.md b/website/versioned_docs/version-27.4/MigrationGuide.md
new file mode 100644
index 000000000000..13d0bed5674d
--- /dev/null
+++ b/website/versioned_docs/version-27.4/MigrationGuide.md
@@ -0,0 +1,22 @@
+---
+id: migration-guide
+title: Migrating to Jest
+---
+
+If you'd like to try out Jest with an existing codebase, there are a number of ways to convert to Jest:
+
+- If you are using Jasmine, or a Jasmine like API (for example [Mocha](https://mochajs.org)), Jest should be mostly compatible, which makes it less complicated to migrate to.
+- If you are using AVA, Expect.js (by Automattic), Jasmine, Mocha, proxyquire, Should.js or Tape you can automatically migrate with Jest Codemods (see below).
+- If you like [chai](http://chaijs.com/), you can upgrade to Jest and continue using chai. However, we recommend trying out Jest's assertions and their failure messages. Jest Codemods can migrate from chai (see below).
+
+## jest-codemods
+
+If you are using [AVA](https://github.com/avajs/ava), [Chai](https://github.com/chaijs/chai), [Expect.js (by Automattic)](https://github.com/Automattic/expect.js), [Jasmine](https://github.com/jasmine/jasmine), [Mocha](https://github.com/mochajs/mocha), [proxyquire](https://github.com/thlorenz/proxyquire), [Should.js](https://github.com/shouldjs/should.js) or [Tape](https://github.com/substack/tape) you can use the third-party [jest-codemods](https://github.com/skovhus/jest-codemods) to do most of the dirty migration work. It runs a code transformation on your codebase using [jscodeshift](https://github.com/facebook/jscodeshift).
+
+To transform your existing tests, navigate to the project containing the tests and run:
+
+```bash
+npx jest-codemods
+```
+
+More information can be found at [https://github.com/skovhus/jest-codemods](https://github.com/skovhus/jest-codemods).
diff --git a/website/versioned_docs/version-27.4/MockFunctionAPI.md b/website/versioned_docs/version-27.4/MockFunctionAPI.md
new file mode 100644
index 000000000000..859adfc21361
--- /dev/null
+++ b/website/versioned_docs/version-27.4/MockFunctionAPI.md
@@ -0,0 +1,448 @@
+---
+id: mock-function-api
+title: Mock Functions
+---
+
+Mock functions are also known as "spies", because they let you spy on the behavior of a function that is called indirectly by some other code, rather than only testing the output. You can create a mock function with `jest.fn()`. If no implementation is given, the mock function will return `undefined` when invoked.
+
+## Methods
+
+import TOCInline from "@theme/TOCInline"
+
+
+
+---
+
+## Reference
+
+### `mockFn.getMockName()`
+
+Returns the mock name string set by calling `mockFn.mockName(value)`.
+
+### `mockFn.mock.calls`
+
+An array containing the call arguments of all calls that have been made to this mock function. Each item in the array is an array of arguments that were passed during the call.
+
+For example: A mock function `f` that has been called twice, with the arguments `f('arg1', 'arg2')`, and then with the arguments `f('arg3', 'arg4')`, would have a `mock.calls` array that looks like this:
+
+```js
+[
+ ['arg1', 'arg2'],
+ ['arg3', 'arg4'],
+];
+```
+
+### `mockFn.mock.results`
+
+An array containing the results of all calls that have been made to this mock function. Each entry in this array is an object containing a `type` property, and a `value` property. `type` will be one of the following:
+
+- `'return'` - Indicates that the call completed by returning normally.
+- `'throw'` - Indicates that the call completed by throwing a value.
+- `'incomplete'` - Indicates that the call has not yet completed. This occurs if you test the result from within the mock function itself, or from within a function that was called by the mock.
+
+The `value` property contains the value that was thrown or returned. `value` is undefined when `type === 'incomplete'`.
+
+For example: A mock function `f` that has been called three times, returning `'result1'`, throwing an error, and then returning `'result2'`, would have a `mock.results` array that looks like this:
+
+```js
+[
+ {
+ type: 'return',
+ value: 'result1',
+ },
+ {
+ type: 'throw',
+ value: {
+ /* Error instance */
+ },
+ },
+ {
+ type: 'return',
+ value: 'result2',
+ },
+];
+```
+
+### `mockFn.mock.instances`
+
+An array that contains all the object instances that have been instantiated from this mock function using `new`.
+
+For example: A mock function that has been instantiated twice would have the following `mock.instances` array:
+
+```js
+const mockFn = jest.fn();
+
+const a = new mockFn();
+const b = new mockFn();
+
+mockFn.mock.instances[0] === a; // true
+mockFn.mock.instances[1] === b; // true
+```
+
+### `mockFn.mockClear()`
+
+Clears all information stored in the [`mockFn.mock.calls`](#mockfnmockcalls), [`mockFn.mock.instances`](#mockfnmockinstances) and [`mockFn.mock.results`](#mockfnmockresults) arrays. Often this is useful when you want to clean up a mocks usage data between two assertions.
+
+Beware that `mockClear` will replace `mockFn.mock`, not just these three properties! You should, therefore, avoid assigning `mockFn.mock` to other variables, temporary or not, to make sure you don't access stale data.
+
+The [`clearMocks`](configuration#clearmocks-boolean) configuration option is available to clear mocks automatically before each tests.
+
+### `mockFn.mockReset()`
+
+Does everything that [`mockFn.mockClear()`](#mockfnmockclear) does, and also removes any mocked return values or implementations.
+
+This is useful when you want to completely reset a _mock_ back to its initial state. (Note that resetting a _spy_ will result in a function with no return value).
+
+The [`mockReset`](configuration#resetmocks-boolean) configuration option is available to reset mocks automatically before each test.
+
+### `mockFn.mockRestore()`
+
+Does everything that [`mockFn.mockReset()`](#mockfnmockreset) does, and also restores the original (non-mocked) implementation.
+
+This is useful when you want to mock functions in certain test cases and restore the original implementation in others.
+
+Beware that `mockFn.mockRestore` only works when the mock was created with `jest.spyOn`. Thus you have to take care of restoration yourself when manually assigning `jest.fn()`.
+
+The [`restoreMocks`](configuration#restoremocks-boolean) configuration option is available to restore mocks automatically before each test.
+
+### `mockFn.mockImplementation(fn)`
+
+Accepts a function that should be used as the implementation of the mock. The mock itself will still record all calls that go into and instances that come from itself – the only difference is that the implementation will also be executed when the mock is called.
+
+_Note: `jest.fn(implementation)` is a shorthand for `jest.fn().mockImplementation(implementation)`._
+
+For example:
+
+```js
+const mockFn = jest.fn().mockImplementation(scalar => 42 + scalar);
+// or: jest.fn(scalar => 42 + scalar);
+
+const a = mockFn(0);
+const b = mockFn(1);
+
+a === 42; // true
+b === 43; // true
+
+mockFn.mock.calls[0][0] === 0; // true
+mockFn.mock.calls[1][0] === 1; // true
+```
+
+`mockImplementation` can also be used to mock class constructors:
+
+```js title="SomeClass.js"
+module.exports = class SomeClass {
+ m(a, b) {}
+};
+```
+
+```js title="OtherModule.test.js"
+jest.mock('./SomeClass'); // this happens automatically with automocking
+const SomeClass = require('./SomeClass');
+const mMock = jest.fn();
+SomeClass.mockImplementation(() => {
+ return {
+ m: mMock,
+ };
+});
+
+const some = new SomeClass();
+some.m('a', 'b');
+console.log('Calls to m: ', mMock.mock.calls);
+```
+
+### `mockFn.mockImplementationOnce(fn)`
+
+Accepts a function that will be used as an implementation of the mock for one call to the mocked function. Can be chained so that multiple function calls produce different results.
+
+```js
+const myMockFn = jest
+ .fn()
+ .mockImplementationOnce(cb => cb(null, true))
+ .mockImplementationOnce(cb => cb(null, false));
+
+myMockFn((err, val) => console.log(val)); // true
+
+myMockFn((err, val) => console.log(val)); // false
+```
+
+When the mocked function runs out of implementations defined with mockImplementationOnce, it will execute the default implementation set with `jest.fn(() => defaultValue)` or `.mockImplementation(() => defaultValue)` if they were called:
+
+```js
+const myMockFn = jest
+ .fn(() => 'default')
+ .mockImplementationOnce(() => 'first call')
+ .mockImplementationOnce(() => 'second call');
+
+// 'first call', 'second call', 'default', 'default'
+console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
+```
+
+### `mockFn.mockName(value)`
+
+Accepts a string to use in test result output in place of "jest.fn()" to indicate which mock function is being referenced.
+
+For example:
+
+```js
+const mockFn = jest.fn().mockName('mockedFunction');
+// mockFn();
+expect(mockFn).toHaveBeenCalled();
+```
+
+Will result in this error:
+
+```
+expect(mockedFunction).toHaveBeenCalled()
+
+Expected mock function "mockedFunction" to have been called, but it was not called.
+```
+
+### `mockFn.mockReturnThis()`
+
+Syntactic sugar function for:
+
+```js
+jest.fn(function () {
+ return this;
+});
+```
+
+### `mockFn.mockReturnValue(value)`
+
+Accepts a value that will be returned whenever the mock function is called.
+
+```js
+const mock = jest.fn();
+mock.mockReturnValue(42);
+mock(); // 42
+mock.mockReturnValue(43);
+mock(); // 43
+```
+
+### `mockFn.mockReturnValueOnce(value)`
+
+Accepts a value that will be returned for one call to the mock function. Can be chained so that successive calls to the mock function return different values. When there are no more `mockReturnValueOnce` values to use, calls will return a value specified by `mockReturnValue`.
+
+```js
+const myMockFn = jest
+ .fn()
+ .mockReturnValue('default')
+ .mockReturnValueOnce('first call')
+ .mockReturnValueOnce('second call');
+
+// 'first call', 'second call', 'default', 'default'
+console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
+```
+
+### `mockFn.mockResolvedValue(value)`
+
+Syntactic sugar function for:
+
+```js
+jest.fn().mockImplementation(() => Promise.resolve(value));
+```
+
+Useful to mock async functions in async tests:
+
+```js
+test('async test', async () => {
+ const asyncMock = jest.fn().mockResolvedValue(43);
+
+ await asyncMock(); // 43
+});
+```
+
+### `mockFn.mockResolvedValueOnce(value)`
+
+Syntactic sugar function for:
+
+```js
+jest.fn().mockImplementationOnce(() => Promise.resolve(value));
+```
+
+Useful to resolve different values over multiple async calls:
+
+```js
+test('async test', async () => {
+ const asyncMock = jest
+ .fn()
+ .mockResolvedValue('default')
+ .mockResolvedValueOnce('first call')
+ .mockResolvedValueOnce('second call');
+
+ await asyncMock(); // first call
+ await asyncMock(); // second call
+ await asyncMock(); // default
+ await asyncMock(); // default
+});
+```
+
+### `mockFn.mockRejectedValue(value)`
+
+Syntactic sugar function for:
+
+```js
+jest.fn().mockImplementation(() => Promise.reject(value));
+```
+
+Useful to create async mock functions that will always reject:
+
+```js
+test('async test', async () => {
+ const asyncMock = jest.fn().mockRejectedValue(new Error('Async error'));
+
+ await asyncMock(); // throws "Async error"
+});
+```
+
+### `mockFn.mockRejectedValueOnce(value)`
+
+Syntactic sugar function for:
+
+```js
+jest.fn().mockImplementationOnce(() => Promise.reject(value));
+```
+
+Example usage:
+
+```js
+test('async test', async () => {
+ const asyncMock = jest
+ .fn()
+ .mockResolvedValueOnce('first call')
+ .mockRejectedValueOnce(new Error('Async error'));
+
+ await asyncMock(); // first call
+ await asyncMock(); // throws "Async error"
+});
+```
+
+## TypeScript
+
+Jest itself is written in [TypeScript](https://www.typescriptlang.org).
+
+If you are using [Create React App](https://create-react-app.dev) then the [TypeScript template](https://create-react-app.dev/docs/adding-typescript/) has everything you need to start writing tests in TypeScript.
+
+Otherwise, please see our [Getting Started](GettingStarted.md#using-typescript) guide for to get setup with TypeScript.
+
+You can see an example of using Jest with TypeScript in our [GitHub repository](https://github.com/facebook/jest/tree/main/examples/typescript).
+
+### `jest.MockedFunction`
+
+> `jest.MockedFunction` is available in the `@types/jest` module from version `24.9.0`.
+
+The following examples will assume you have an understanding of how [Jest mock functions work with JavaScript](MockFunctions.md).
+
+You can use `jest.MockedFunction` to represent a function that has been replaced by a Jest mock.
+
+Example using [automatic `jest.mock`](JestObjectAPI.md#jestmockmodulename-factory-options):
+
+```ts
+// Assume `add` is imported and used within `calculate`.
+import add from './add';
+import calculate from './calc';
+
+jest.mock('./add');
+
+// Our mock of `add` is now fully typed
+const mockAdd = add as jest.MockedFunction;
+
+test('calculate calls add', () => {
+ calculate('Add', 1, 2);
+
+ expect(mockAdd).toBeCalledTimes(1);
+ expect(mockAdd).toBeCalledWith(1, 2);
+});
+```
+
+Example using [`jest.fn`](JestObjectAPI.md#jestfnimplementation):
+
+```ts
+// Here `add` is imported for its type
+import add from './add';
+import calculate from './calc';
+
+test('calculate calls add', () => {
+ // Create a new mock that can be used in place of `add`.
+ const mockAdd = jest.fn() as jest.MockedFunction;
+
+ // Note: You can use the `jest.fn` type directly like this if you want:
+ // const mockAdd = jest.fn, Parameters>();
+ // `jest.MockedFunction` is a more friendly shortcut.
+
+ // Now we can easily set up mock implementations.
+ // All the `.mock*` API can now give you proper types for `add`.
+ // https://jestjs.io/docs/mock-function-api
+
+ // `.mockImplementation` can now infer that `a` and `b` are `number`
+ // and that the returned value is a `number`.
+ mockAdd.mockImplementation((a, b) => {
+ // Yes, this mock is still adding two numbers but imagine this
+ // was a complex function we are mocking.
+ return a + b;
+ });
+
+ // `mockAdd` is properly typed and therefore accepted by
+ // anything requiring `add`.
+ calculate(mockAdd, 1, 2);
+
+ expect(mockAdd).toBeCalledTimes(1);
+ expect(mockAdd).toBeCalledWith(1, 2);
+});
+```
+
+### `jest.MockedClass`
+
+> `jest.MockedClass` is available in the `@types/jest` module from version `24.9.0`.
+
+The following examples will assume you have an understanding of how [Jest mock classes work with JavaScript](Es6ClassMocks.md).
+
+You can use `jest.MockedClass` to represent a class that has been replaced by a Jest mock.
+
+Converting the [ES6 Class automatic mock example](Es6ClassMocks.md#automatic-mock) would look like this:
+
+```ts
+import SoundPlayer from '../sound-player';
+import SoundPlayerConsumer from '../sound-player-consumer';
+
+jest.mock('../sound-player'); // SoundPlayer is now a mock constructor
+
+const SoundPlayerMock = SoundPlayer as jest.MockedClass;
+
+beforeEach(() => {
+ // Clear all instances and calls to constructor and all methods:
+ SoundPlayerMock.mockClear();
+});
+
+it('We can check if the consumer called the class constructor', () => {
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ expect(SoundPlayerMock).toHaveBeenCalledTimes(1);
+});
+
+it('We can check if the consumer called a method on the class instance', () => {
+ // Show that mockClear() is working:
+ expect(SoundPlayerMock).not.toHaveBeenCalled();
+
+ const soundPlayerConsumer = new SoundPlayerConsumer();
+ // Constructor should have been called again:
+ expect(SoundPlayerMock).toHaveBeenCalledTimes(1);
+
+ const coolSoundFileName = 'song.mp3';
+ soundPlayerConsumer.playSomethingCool();
+
+ // mock.instances is available with automatic mocks:
+ const mockSoundPlayerInstance = SoundPlayerMock.mock.instances[0];
+
+ // However, it will not allow access to `.mock` in TypeScript as it
+ // is returning `SoundPlayer`. Instead, you can check the calls to a
+ // method like this fully typed:
+ expect(SoundPlayerMock.prototype.playSoundFile.mock.calls[0][0]).toEqual(
+ coolSoundFileName,
+ );
+ // Equivalent to above check:
+ expect(SoundPlayerMock.prototype.playSoundFile).toHaveBeenCalledWith(
+ coolSoundFileName,
+ );
+ expect(SoundPlayerMock.prototype.playSoundFile).toHaveBeenCalledTimes(1);
+});
+```
diff --git a/website/versioned_docs/version-27.4/MockFunctions.md b/website/versioned_docs/version-27.4/MockFunctions.md
new file mode 100644
index 000000000000..2e686a92e837
--- /dev/null
+++ b/website/versioned_docs/version-27.4/MockFunctions.md
@@ -0,0 +1,315 @@
+---
+id: mock-functions
+title: Mock Functions
+---
+
+Mock functions allow you to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls), capturing instances of constructor functions when instantiated with `new`, and allowing test-time configuration of return values.
+
+There are two ways to mock functions: Either by creating a mock function to use in test code, or writing a [`manual mock`](ManualMocks.md) to override a module dependency.
+
+## Using a mock function
+
+Let's imagine we're testing an implementation of a function `forEach`, which invokes a callback for each item in a supplied array.
+
+```javascript
+function forEach(items, callback) {
+ for (let index = 0; index < items.length; index++) {
+ callback(items[index]);
+ }
+}
+```
+
+To test this function, we can use a mock function, and inspect the mock's state to ensure the callback is invoked as expected.
+
+```javascript
+const mockCallback = jest.fn(x => 42 + x);
+forEach([0, 1], mockCallback);
+
+// The mock function is called twice
+expect(mockCallback.mock.calls.length).toBe(2);
+
+// The first argument of the first call to the function was 0
+expect(mockCallback.mock.calls[0][0]).toBe(0);
+
+// The first argument of the second call to the function was 1
+expect(mockCallback.mock.calls[1][0]).toBe(1);
+
+// The return value of the first call to the function was 42
+expect(mockCallback.mock.results[0].value).toBe(42);
+```
+
+## `.mock` property
+
+All mock functions have this special `.mock` property, which is where data about how the function has been called and what the function returned is kept. The `.mock` property also tracks the value of `this` for each call, so it is possible to inspect this as well:
+
+```javascript
+const myMock = jest.fn();
+
+const a = new myMock();
+const b = {};
+const bound = myMock.bind(b);
+bound();
+
+console.log(myMock.mock.instances);
+// > [ , ]
+```
+
+These mock members are very useful in tests to assert how these functions get called, instantiated, or what they returned:
+
+```javascript
+// The function was called exactly once
+expect(someMockFunction.mock.calls.length).toBe(1);
+
+// The first arg of the first call to the function was 'first arg'
+expect(someMockFunction.mock.calls[0][0]).toBe('first arg');
+
+// The second arg of the first call to the function was 'second arg'
+expect(someMockFunction.mock.calls[0][1]).toBe('second arg');
+
+// The return value of the first call to the function was 'return value'
+expect(someMockFunction.mock.results[0].value).toBe('return value');
+
+// This function was instantiated exactly twice
+expect(someMockFunction.mock.instances.length).toBe(2);
+
+// The object returned by the first instantiation of this function
+// had a `name` property whose value was set to 'test'
+expect(someMockFunction.mock.instances[0].name).toEqual('test');
+```
+
+## Mock Return Values
+
+Mock functions can also be used to inject test values into your code during a test:
+
+```javascript
+const myMock = jest.fn();
+console.log(myMock());
+// > undefined
+
+myMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);
+
+console.log(myMock(), myMock(), myMock(), myMock());
+// > 10, 'x', true, true
+```
+
+Mock functions are also very effective in code that uses a functional continuation-passing style. Code written in this style helps avoid the need for complicated stubs that recreate the behavior of the real component they're standing in for, in favor of injecting values directly into the test right before they're used.
+
+```javascript
+const filterTestFn = jest.fn();
+
+// Make the mock return `true` for the first call,
+// and `false` for the second call
+filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);
+
+const result = [11, 12].filter(num => filterTestFn(num));
+
+console.log(result);
+// > [11]
+console.log(filterTestFn.mock.calls[0][0]); // 11
+console.log(filterTestFn.mock.calls[1][0]); // 12
+```
+
+Most real-world examples actually involve getting ahold of a mock function on a dependent component and configuring that, but the technique is the same. In these cases, try to avoid the temptation to implement logic inside of any function that's not directly being tested.
+
+## Mocking Modules
+
+Suppose we have a class that fetches users from our API. The class uses [axios](https://github.com/axios/axios) to call the API then returns the `data` attribute which contains all the users:
+
+```js title="users.js"
+import axios from 'axios';
+
+class Users {
+ static all() {
+ return axios.get('/users.json').then(resp => resp.data);
+ }
+}
+
+export default Users;
+```
+
+Now, in order to test this method without actually hitting the API (and thus creating slow and fragile tests), we can use the `jest.mock(...)` function to automatically mock the axios module.
+
+Once we mock the module we can provide a `mockResolvedValue` for `.get` that returns the data we want our test to assert against. In effect, we are saying that we want `axios.get('/users.json')` to return a fake response.
+
+```js title="users.test.js"
+import axios from 'axios';
+import Users from './users';
+
+jest.mock('axios');
+
+test('should fetch users', () => {
+ const users = [{name: 'Bob'}];
+ const resp = {data: users};
+ axios.get.mockResolvedValue(resp);
+
+ // or you could use the following depending on your use case:
+ // axios.get.mockImplementation(() => Promise.resolve(resp))
+
+ return Users.all().then(data => expect(data).toEqual(users));
+});
+```
+
+## Mocking Partials
+
+Subsets of a module can be mocked and the rest of the module can keep their actual implementation:
+
+```js title="foo-bar-baz.js"
+export const foo = 'foo';
+export const bar = () => 'bar';
+export default () => 'baz';
+```
+
+```js
+//test.js
+import defaultExport, {bar, foo} from '../foo-bar-baz';
+
+jest.mock('../foo-bar-baz', () => {
+ const originalModule = jest.requireActual('../foo-bar-baz');
+
+ //Mock the default export and named export 'foo'
+ return {
+ __esModule: true,
+ ...originalModule,
+ default: jest.fn(() => 'mocked baz'),
+ foo: 'mocked foo',
+ };
+});
+
+test('should do a partial mock', () => {
+ const defaultExportResult = defaultExport();
+ expect(defaultExportResult).toBe('mocked baz');
+ expect(defaultExport).toHaveBeenCalled();
+
+ expect(foo).toBe('mocked foo');
+ expect(bar()).toBe('bar');
+});
+```
+
+## Mock Implementations
+
+Still, there are cases where it's useful to go beyond the ability to specify return values and full-on replace the implementation of a mock function. This can be done with `jest.fn` or the `mockImplementationOnce` method on mock functions.
+
+```javascript
+const myMockFn = jest.fn(cb => cb(null, true));
+
+myMockFn((err, val) => console.log(val));
+// > true
+```
+
+The `mockImplementation` method is useful when you need to define the default implementation of a mock function that is created from another module:
+
+```js title="foo.js"
+module.exports = function () {
+ // some implementation;
+};
+```
+
+```js title="test.js"
+jest.mock('../foo'); // this happens automatically with automocking
+const foo = require('../foo');
+
+// foo is a mock function
+foo.mockImplementation(() => 42);
+foo();
+// > 42
+```
+
+When you need to recreate a complex behavior of a mock function such that multiple function calls produce different results, use the `mockImplementationOnce` method:
+
+```javascript
+const myMockFn = jest
+ .fn()
+ .mockImplementationOnce(cb => cb(null, true))
+ .mockImplementationOnce(cb => cb(null, false));
+
+myMockFn((err, val) => console.log(val));
+// > true
+
+myMockFn((err, val) => console.log(val));
+// > false
+```
+
+When the mocked function runs out of implementations defined with `mockImplementationOnce`, it will execute the default implementation set with `jest.fn` (if it is defined):
+
+```javascript
+const myMockFn = jest
+ .fn(() => 'default')
+ .mockImplementationOnce(() => 'first call')
+ .mockImplementationOnce(() => 'second call');
+
+console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
+// > 'first call', 'second call', 'default', 'default'
+```
+
+For cases where we have methods that are typically chained (and thus always need to return `this`), we have a sugary API to simplify this in the form of a `.mockReturnThis()` function that also sits on all mocks:
+
+```javascript
+const myObj = {
+ myMethod: jest.fn().mockReturnThis(),
+};
+
+// is the same as
+
+const otherObj = {
+ myMethod: jest.fn(function () {
+ return this;
+ }),
+};
+```
+
+## Mock Names
+
+You can optionally provide a name for your mock functions, which will be displayed instead of "jest.fn()" in the test error output. Use this if you want to be able to quickly identify the mock function reporting an error in your test output.
+
+```javascript
+const myMockFn = jest
+ .fn()
+ .mockReturnValue('default')
+ .mockImplementation(scalar => 42 + scalar)
+ .mockName('add42');
+```
+
+## Custom Matchers
+
+Finally, in order to make it less demanding to assert how mock functions have been called, we've added some custom matcher functions for you:
+
+```javascript
+// The mock function was called at least once
+expect(mockFunc).toHaveBeenCalled();
+
+// The mock function was called at least once with the specified args
+expect(mockFunc).toHaveBeenCalledWith(arg1, arg2);
+
+// The last call to the mock function was called with the specified args
+expect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);
+
+// All calls and the name of the mock is written as a snapshot
+expect(mockFunc).toMatchSnapshot();
+```
+
+These matchers are sugar for common forms of inspecting the `.mock` property. You can always do this manually yourself if that's more to your taste or if you need to do something more specific:
+
+```javascript
+// The mock function was called at least once
+expect(mockFunc.mock.calls.length).toBeGreaterThan(0);
+
+// The mock function was called at least once with the specified args
+expect(mockFunc.mock.calls).toContainEqual([arg1, arg2]);
+
+// The last call to the mock function was called with the specified args
+expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
+ arg1,
+ arg2,
+]);
+
+// The first arg of the last call to the mock function was `42`
+// (note that there is no sugar helper for this specific of an assertion)
+expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);
+
+// A snapshot will check that a mock was invoked the same number of times,
+// in the same order, with the same arguments. It will also assert on the name.
+expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
+expect(mockFunc.getMockName()).toBe('a mock name');
+```
+
+For a complete list of matchers, check out the [reference docs](ExpectAPI.md).
diff --git a/website/versioned_docs/version-27.4/MongoDB.md b/website/versioned_docs/version-27.4/MongoDB.md
new file mode 100644
index 000000000000..3610da622673
--- /dev/null
+++ b/website/versioned_docs/version-27.4/MongoDB.md
@@ -0,0 +1,61 @@
+---
+id: mongodb
+title: Using with MongoDB
+---
+
+With the [Global Setup/Teardown](Configuration.md#globalsetup-string) and [Async Test Environment](Configuration.md#testenvironment-string) APIs, Jest can work smoothly with [MongoDB](https://www.mongodb.com/).
+
+## Use jest-mongodb Preset
+
+[Jest MongoDB](https://github.com/shelfio/jest-mongodb) provides all required configuration to run your tests using MongoDB.
+
+1. First install `@shelf/jest-mongodb`
+
+```
+yarn add @shelf/jest-mongodb --dev
+```
+
+2. Specify preset in your Jest configuration:
+
+```json
+{
+ "preset": "@shelf/jest-mongodb"
+}
+```
+
+3. Write your test
+
+```js
+const {MongoClient} = require('mongodb');
+
+describe('insert', () => {
+ let connection;
+ let db;
+
+ beforeAll(async () => {
+ connection = await MongoClient.connect(global.__MONGO_URI__, {
+ useNewUrlParser: true,
+ });
+ db = await connection.db(global.__MONGO_DB_NAME__);
+ });
+
+ afterAll(async () => {
+ await connection.close();
+ await db.close();
+ });
+
+ it('should insert a doc into collection', async () => {
+ const users = db.collection('users');
+
+ const mockUser = {_id: 'some-user-id', name: 'John'};
+ await users.insertOne(mockUser);
+
+ const insertedUser = await users.findOne({_id: 'some-user-id'});
+ expect(insertedUser).toEqual(mockUser);
+ });
+});
+```
+
+There's no need to load any dependencies.
+
+See [documentation](https://github.com/shelfio/jest-mongodb) for details (configuring MongoDB version, etc).
diff --git a/website/versioned_docs/version-27.4/MoreResources.md b/website/versioned_docs/version-27.4/MoreResources.md
new file mode 100644
index 000000000000..e4509d53281f
--- /dev/null
+++ b/website/versioned_docs/version-27.4/MoreResources.md
@@ -0,0 +1,24 @@
+---
+id: more-resources
+title: More Resources
+---
+
+By now you should have a good idea of how Jest can help you test your applications. If you're interested in learning more, here's some related stuff you might want to check out.
+
+## Browse the docs
+
+- Learn about [Snapshot Testing](SnapshotTesting.md), [Mock Functions](MockFunctions.md), and more in our in-depth guides.
+- Migrate your existing tests to Jest by following our [migration guide](MigrationGuide.md).
+- Learn how to [configure Jest](Configuration.md).
+- Look at the full [API Reference](GlobalAPI.md).
+- [Troubleshoot](Troubleshooting.md) problems with Jest.
+
+## Learn by example
+
+You will find a number of example test cases in the [`examples`](https://github.com/facebook/jest/tree/main/examples) folder on GitHub. You can also learn from the excellent tests used by the [React](https://github.com/facebook/react/tree/main/packages/react/src/__tests__), [Relay](https://github.com/facebook/relay/tree/main/packages/react-relay/__tests__), and [React Native](https://github.com/facebook/react-native/tree/main/Libraries/Animated/src/__tests__) projects.
+
+## Join the community
+
+Ask questions and find answers from other Jest users like you. [Reactiflux](https://discord.gg/j6FKKQQrW9) is a Discord chat where a lot of Jest discussion happens. Check out the `#testing` channel.
+
+Follow the [Jest Twitter account](https://twitter.com/fbjest) and [blog](/blog/) to find out what's happening in the world of Jest.
diff --git a/website/versioned_docs/version-27.4/Puppeteer.md b/website/versioned_docs/version-27.4/Puppeteer.md
new file mode 100644
index 000000000000..16ab669a9ab2
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Puppeteer.md
@@ -0,0 +1,168 @@
+---
+id: puppeteer
+title: Using with puppeteer
+---
+
+With the [Global Setup/Teardown](Configuration.md#globalsetup-string) and [Async Test Environment](Configuration.md#testenvironment-string) APIs, Jest can work smoothly with [puppeteer](https://github.com/GoogleChrome/puppeteer).
+
+> Generating code coverage for test files using Puppeteer is currently not possible if your test uses `page.$eval`, `page.$$eval` or `page.evaluate` as the passed function is executed outside of Jest's scope. Check out [issue #7962](https://github.com/facebook/jest/issues/7962#issuecomment-495272339) on GitHub for a workaround.
+
+## Use jest-puppeteer Preset
+
+[Jest Puppeteer](https://github.com/smooth-code/jest-puppeteer) provides all required configuration to run your tests using Puppeteer.
+
+1. First, install `jest-puppeteer`
+
+```
+yarn add --dev jest-puppeteer
+```
+
+2. Specify preset in your [Jest configuration](Configuration.md):
+
+```json
+{
+ "preset": "jest-puppeteer"
+}
+```
+
+3. Write your test
+
+```js
+describe('Google', () => {
+ beforeAll(async () => {
+ await page.goto('https://google.com');
+ });
+
+ it('should be titled "Google"', async () => {
+ await expect(page.title()).resolves.toMatch('Google');
+ });
+});
+```
+
+There's no need to load any dependencies. Puppeteer's `page` and `browser` classes will automatically be exposed
+
+See [documentation](https://github.com/smooth-code/jest-puppeteer).
+
+## Custom example without jest-puppeteer preset
+
+You can also hook up puppeteer from scratch. The basic idea is to:
+
+1. launch & file the websocket endpoint of puppeteer with Global Setup
+2. connect to puppeteer from each Test Environment
+3. close puppeteer with Global Teardown
+
+Here's an example of the GlobalSetup script
+
+```js title="setup.js"
+const {mkdir, writeFile} = require('fs').promises;
+const os = require('os');
+const path = require('path');
+const puppeteer = require('puppeteer');
+
+const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
+
+module.exports = async function () {
+ const browser = await puppeteer.launch();
+ // store the browser instance so we can teardown it later
+ // this global is only available in the teardown but not in TestEnvironments
+ global.__BROWSER_GLOBAL__ = browser;
+
+ // use the file system to expose the wsEndpoint for TestEnvironments
+ await mkdir(DIR, {recursive: true});
+ await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
+};
+```
+
+Then we need a custom Test Environment for puppeteer
+
+```js title="puppeteer_environment.js"
+const {readFile} = require('fs').promises;
+const os = require('os');
+const path = require('path');
+const puppeteer = require('puppeteer');
+const NodeEnvironment = require('jest-environment-node');
+
+const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
+
+class PuppeteerEnvironment extends NodeEnvironment {
+ constructor(config) {
+ super(config);
+ }
+
+ async setup() {
+ await super.setup();
+ // get the wsEndpoint
+ const wsEndpoint = await readFile(path.join(DIR, 'wsEndpoint'), 'utf8');
+ if (!wsEndpoint) {
+ throw new Error('wsEndpoint not found');
+ }
+
+ // connect to puppeteer
+ this.global.__BROWSER__ = await puppeteer.connect({
+ browserWSEndpoint: wsEndpoint,
+ });
+ }
+
+ async teardown() {
+ await super.teardown();
+ }
+
+ getVmContext() {
+ return super.getVmContext();
+ }
+}
+
+module.exports = PuppeteerEnvironment;
+```
+
+Finally, we can close the puppeteer instance and clean-up the file
+
+```js title="teardown.js"
+const fs = require('fs').promises;
+const os = require('os');
+const path = require('path');
+
+const DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup');
+module.exports = async function () {
+ // close the browser instance
+ await global.__BROWSER_GLOBAL__.close();
+
+ // clean-up the wsEndpoint file
+ await fs.rm(DIR, {recursive: true, force: true});
+};
+```
+
+With all the things set up, we can now write our tests like this:
+
+```js title="test.js"
+const timeout = 5000;
+
+describe(
+ '/ (Home Page)',
+ () => {
+ let page;
+ beforeAll(async () => {
+ page = await global.__BROWSER__.newPage();
+ await page.goto('https://google.com');
+ }, timeout);
+
+ it('should load without error', async () => {
+ const text = await page.evaluate(() => document.body.textContent);
+ expect(text).toContain('google');
+ });
+ },
+ timeout,
+);
+```
+
+Finally, set `jest.config.js` to read from these files. (The `jest-puppeteer` preset does something like this under the hood.)
+
+```js
+module.exports = {
+ globalSetup: './setup.js',
+ globalTeardown: './teardown.js',
+ testEnvironment: './puppeteer_environment.js',
+};
+```
+
+Here's the code of [full working example](https://github.com/xfumihiro/jest-puppeteer-example).
diff --git a/website/versioned_docs/version-27.4/SetupAndTeardown.md b/website/versioned_docs/version-27.4/SetupAndTeardown.md
new file mode 100644
index 000000000000..131376d0de6f
--- /dev/null
+++ b/website/versioned_docs/version-27.4/SetupAndTeardown.md
@@ -0,0 +1,190 @@
+---
+id: setup-teardown
+title: Setup and Teardown
+---
+
+Often while writing tests you have some setup work that needs to happen before tests run, and you have some finishing work that needs to happen after tests run. Jest provides helper functions to handle this.
+
+## Repeating Setup For Many Tests
+
+If you have some work you need to do repeatedly for many tests, you can use `beforeEach` and `afterEach`.
+
+For example, let's say that several tests interact with a database of cities. You have a method `initializeCityDatabase()` that must be called before each of these tests, and a method `clearCityDatabase()` that must be called after each of these tests. You can do this with:
+
+```js
+beforeEach(() => {
+ initializeCityDatabase();
+});
+
+afterEach(() => {
+ clearCityDatabase();
+});
+
+test('city database has Vienna', () => {
+ expect(isCity('Vienna')).toBeTruthy();
+});
+
+test('city database has San Juan', () => {
+ expect(isCity('San Juan')).toBeTruthy();
+});
+```
+
+`beforeEach` and `afterEach` can handle asynchronous code in the same ways that [tests can handle asynchronous code](TestingAsyncCode.md) - they can either take a `done` parameter or return a promise. For example, if `initializeCityDatabase()` returned a promise that resolved when the database was initialized, we would want to return that promise:
+
+```js
+beforeEach(() => {
+ return initializeCityDatabase();
+});
+```
+
+## One-Time Setup
+
+In some cases, you only need to do setup once, at the beginning of a file. This can be especially bothersome when the setup is asynchronous, so you can't do it inline. Jest provides `beforeAll` and `afterAll` to handle this situation.
+
+For example, if both `initializeCityDatabase` and `clearCityDatabase` returned promises, and the city database could be reused between tests, we could change our test code to:
+
+```js
+beforeAll(() => {
+ return initializeCityDatabase();
+});
+
+afterAll(() => {
+ return clearCityDatabase();
+});
+
+test('city database has Vienna', () => {
+ expect(isCity('Vienna')).toBeTruthy();
+});
+
+test('city database has San Juan', () => {
+ expect(isCity('San Juan')).toBeTruthy();
+});
+```
+
+## Scoping
+
+By default, the `beforeAll` and `afterAll` blocks apply to every test in a file. You can also group tests together using a `describe` block. When they are inside a `describe` block, the `beforeAll` and `afterAll` blocks only apply to the tests within that `describe` block.
+
+For example, let's say we had not just a city database, but also a food database. We could do different setup for different tests:
+
+```js
+// Applies to all tests in this file
+beforeEach(() => {
+ return initializeCityDatabase();
+});
+
+test('city database has Vienna', () => {
+ expect(isCity('Vienna')).toBeTruthy();
+});
+
+test('city database has San Juan', () => {
+ expect(isCity('San Juan')).toBeTruthy();
+});
+
+describe('matching cities to foods', () => {
+ // Applies only to tests in this describe block
+ beforeEach(() => {
+ return initializeFoodDatabase();
+ });
+
+ test('Vienna <3 veal', () => {
+ expect(isValidCityFoodPair('Vienna', 'Wiener Schnitzel')).toBe(true);
+ });
+
+ test('San Juan <3 plantains', () => {
+ expect(isValidCityFoodPair('San Juan', 'Mofongo')).toBe(true);
+ });
+});
+```
+
+Note that the top-level `beforeEach` is executed before the `beforeEach` inside the `describe` block. It may help to illustrate the order of execution of all hooks.
+
+```js
+beforeAll(() => console.log('1 - beforeAll'));
+afterAll(() => console.log('1 - afterAll'));
+beforeEach(() => console.log('1 - beforeEach'));
+afterEach(() => console.log('1 - afterEach'));
+test('', () => console.log('1 - test'));
+describe('Scoped / Nested block', () => {
+ beforeAll(() => console.log('2 - beforeAll'));
+ afterAll(() => console.log('2 - afterAll'));
+ beforeEach(() => console.log('2 - beforeEach'));
+ afterEach(() => console.log('2 - afterEach'));
+ test('', () => console.log('2 - test'));
+});
+
+// 1 - beforeAll
+// 1 - beforeEach
+// 1 - test
+// 1 - afterEach
+// 2 - beforeAll
+// 1 - beforeEach
+// 2 - beforeEach
+// 2 - test
+// 2 - afterEach
+// 1 - afterEach
+// 2 - afterAll
+// 1 - afterAll
+```
+
+## Order of execution of describe and test blocks
+
+Jest executes all describe handlers in a test file _before_ it executes any of the actual tests. This is another reason to do setup and teardown inside `before*` and `after*` handlers rather than inside the describe blocks. Once the describe blocks are complete, by default Jest runs all the tests serially in the order they were encountered in the collection phase, waiting for each to finish and be tidied up before moving on.
+
+Consider the following illustrative test file and output:
+
+```js
+describe('outer', () => {
+ console.log('describe outer-a');
+
+ describe('describe inner 1', () => {
+ console.log('describe inner 1');
+ test('test 1', () => {
+ console.log('test for describe inner 1');
+ expect(true).toEqual(true);
+ });
+ });
+
+ console.log('describe outer-b');
+
+ test('test 1', () => {
+ console.log('test for describe outer');
+ expect(true).toEqual(true);
+ });
+
+ describe('describe inner 2', () => {
+ console.log('describe inner 2');
+ test('test for describe inner 2', () => {
+ console.log('test for describe inner 2');
+ expect(false).toEqual(false);
+ });
+ });
+
+ console.log('describe outer-c');
+});
+
+// describe outer-a
+// describe inner 1
+// describe outer-b
+// describe inner 2
+// describe outer-c
+// test for describe inner 1
+// test for describe outer
+// test for describe inner 2
+```
+
+## General Advice
+
+If a test is failing, one of the first things to check should be whether the test is failing when it's the only test that runs. To run only one test with Jest, temporarily change that `test` command to a `test.only`:
+
+```js
+test.only('this will be the only test that runs', () => {
+ expect(true).toBe(false);
+});
+
+test('this test will not run', () => {
+ expect('A').toBe('A');
+});
+```
+
+If you have a test that often fails when it's run as part of a larger suite, but doesn't fail when you run it alone, it's a good bet that something from a different test is interfering with this one. You can often fix this by clearing some shared state with `beforeEach`. If you're not sure whether some shared state is being modified, you can also try a `beforeEach` that logs data.
diff --git a/website/versioned_docs/version-27.4/SnapshotTesting.md b/website/versioned_docs/version-27.4/SnapshotTesting.md
new file mode 100644
index 000000000000..3a8e79ed9788
--- /dev/null
+++ b/website/versioned_docs/version-27.4/SnapshotTesting.md
@@ -0,0 +1,314 @@
+---
+id: snapshot-testing
+title: Snapshot Testing
+---
+
+Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
+
+A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.
+
+## Snapshot Testing with Jest
+
+A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js):
+
+```tsx
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Link from '../Link.react';
+
+it('renders correctly', () => {
+ const tree = renderer
+ .create(Facebook)
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+});
+```
+
+The first time this test is run, Jest creates a [snapshot file](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap) that looks like this:
+
+```javascript
+exports[`renders correctly 1`] = `
+
+ Facebook
+
+`;
+```
+
+The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses [pretty-format](https://github.com/facebook/jest/tree/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code (in the `` component in this case) that should be fixed, or the implementation has changed and the snapshot needs to be updated.
+
+> Note: The snapshot is directly scoped to the data you render – in our example the `` component with `page` prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. Also, Rendering the same component with different props in other snapshot tests will not affect the first one, as the tests don't know about each other.
+
+More information on how snapshot testing works and why we built it can be found on the [release blog post](/blog/2016/07/27/jest-14). We recommend reading [this blog post](http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/) to get a good sense of when you should use snapshot testing. We also recommend watching this [egghead video](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074) on Snapshot Testing with Jest.
+
+### Updating Snapshots
+
+It's straightforward to spot when a snapshot test fails after a bug has been introduced. When that happens, go ahead and fix the issue and make sure your snapshot tests are passing again. Now, let's talk about the case when a snapshot test is failing due to an intentional implementation change.
+
+One such situation can arise if we intentionally change the address the Link component in our example is pointing to.
+
+```tsx
+// Updated test case with a Link to a different address
+it('renders correctly', () => {
+ const tree = renderer
+ .create(Instagram)
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+});
+```
+
+In that case, Jest will print this output:
+
+
+
+Since we just updated our component to point to a different address, it's reasonable to expect changes in the snapshot for this component. Our snapshot test case is failing because the snapshot for our updated component no longer matches the snapshot artifact for this test case.
+
+To resolve this, we will need to update our snapshot artifacts. You can run Jest with a flag that will tell it to re-generate snapshots:
+
+```bash
+jest --updateSnapshot
+```
+
+Go ahead and accept the changes by running the above command. You may also use the equivalent single-character `-u` flag to re-generate snapshots if you prefer. This will re-generate snapshot artifacts for all failing snapshot tests. If we had any additional failing snapshot tests due to an unintentional bug, we would need to fix the bug before re-generating snapshots to avoid recording snapshots of the buggy behavior.
+
+If you'd like to limit which snapshot test cases get re-generated, you can pass an additional `--testNamePattern` flag to re-record snapshots only for those tests that match the pattern.
+
+You can try out this functionality by cloning the [snapshot example](https://github.com/facebook/jest/tree/main/examples/snapshot), modifying the `Link` component, and running Jest.
+
+### Interactive Snapshot Mode
+
+Failed snapshots can also be updated interactively in watch mode:
+
+
+
+Once you enter Interactive Snapshot Mode, Jest will step you through the failed snapshots one test at a time and give you the opportunity to review the failed output.
+
+From here you can choose to update that snapshot or skip to the next:
+
+
+
+Once you're finished, Jest will give you a summary before returning back to watch mode:
+
+
+
+### Inline Snapshots
+
+Inline snapshots behave identically to external snapshots (`.snap` files), except the snapshot values are written automatically back into the source code. This means you can get the benefits of automatically generated snapshots without having to switch to an external file to make sure the correct value was written.
+
+**Example:**
+
+First, you write a test, calling `.toMatchInlineSnapshot()` with no arguments:
+
+```tsx
+it('renders correctly', () => {
+ const tree = renderer
+ .create(Example Site)
+ .toJSON();
+ expect(tree).toMatchInlineSnapshot();
+});
+```
+
+The next time you run Jest, `tree` will be evaluated, and a snapshot will be written as an argument to `toMatchInlineSnapshot`:
+
+```tsx
+it('renders correctly', () => {
+ const tree = renderer
+ .create(Example Site)
+ .toJSON();
+ expect(tree).toMatchInlineSnapshot(`
+
+ Example Site
+
+`);
+});
+```
+
+That's all there is to it! You can even update the snapshots with `--updateSnapshot` or using the `u` key in `--watch` mode.
+
+### Property Matchers
+
+Often there are fields in the object you want to snapshot which are generated (like IDs and Dates). If you try to snapshot these objects, they will force the snapshot to fail on every run:
+
+```javascript
+it('will fail every time', () => {
+ const user = {
+ createdAt: new Date(),
+ id: Math.floor(Math.random() * 20),
+ name: 'LeBron James',
+ };
+
+ expect(user).toMatchSnapshot();
+});
+
+// Snapshot
+exports[`will fail every time 1`] = `
+Object {
+ "createdAt": 2018-05-19T23:36:09.816Z,
+ "id": 3,
+ "name": "LeBron James",
+}
+`;
+```
+
+For these cases, Jest allows providing an asymmetric matcher for any property. These matchers are checked before the snapshot is written or tested, and then saved to the snapshot file instead of the received value:
+
+```javascript
+it('will check the matchers and pass', () => {
+ const user = {
+ createdAt: new Date(),
+ id: Math.floor(Math.random() * 20),
+ name: 'LeBron James',
+ };
+
+ expect(user).toMatchSnapshot({
+ createdAt: expect.any(Date),
+ id: expect.any(Number),
+ });
+});
+
+// Snapshot
+exports[`will check the matchers and pass 1`] = `
+Object {
+ "createdAt": Any,
+ "id": Any,
+ "name": "LeBron James",
+}
+`;
+```
+
+Any given value that is not a matcher will be checked exactly and saved to the snapshot:
+
+```javascript
+it('will check the values and pass', () => {
+ const user = {
+ createdAt: new Date(),
+ name: 'Bond... James Bond',
+ };
+
+ expect(user).toMatchSnapshot({
+ createdAt: expect.any(Date),
+ name: 'Bond... James Bond',
+ });
+});
+
+// Snapshot
+exports[`will check the values and pass 1`] = `
+Object {
+ "createdAt": Any,
+ "name": 'Bond... James Bond',
+}
+`;
+```
+
+## Best Practices
+
+Snapshots are a fantastic tool for identifying unexpected interface changes within your application – whether that interface is an API response, UI, logs, or error messages. As with any testing strategy, there are some best-practices you should be aware of, and guidelines you should follow, in order to use them effectively.
+
+### 1. Treat snapshots as code
+
+Commit snapshots and review them as part of your regular code review process. This means treating snapshots as you would any other type of test or code in your project.
+
+Ensure that your snapshots are readable by keeping them focused, short, and by using tools that enforce these stylistic conventions.
+
+As mentioned previously, Jest uses [`pretty-format`](https://yarnpkg.com/en/package/pretty-format) to make snapshots human-readable, but you may find it useful to introduce additional tools, like [`eslint-plugin-jest`](https://yarnpkg.com/en/package/eslint-plugin-jest) with its [`no-large-snapshots`](https://github.com/jest-community/eslint-plugin-jest/blob/main/docs/rules/no-large-snapshots.md) option, or [`snapshot-diff`](https://yarnpkg.com/en/package/snapshot-diff) with its component snapshot comparison feature, to promote committing short, focused assertions.
+
+The goal is to make it easy to review snapshots in pull requests, and fight against the habit of regenerating snapshots when test suites fail instead of examining the root causes of their failure.
+
+### 2. Tests should be deterministic
+
+Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data.
+
+For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run:
+
+```js
+Date.now = jest.fn(() => 1482363367071);
+```
+
+Now, every time the snapshot test case runs, `Date.now()` will return `1482363367071` consistently. This will result in the same snapshot being generated for this component regardless of when the test is run.
+
+### 3. Use descriptive snapshot names
+
+Always strive to use descriptive test and/or snapshot names for snapshots. The best names describe the expected snapshot content. This makes it easier for reviewers to verify the snapshots during review, and for anyone to know whether or not an outdated snapshot is the correct behavior before updating.
+
+For example, compare:
+
+```js
+exports[` should handle some test case`] = `null`;
+
+exports[` should handle some other test case`] = `
+
+ Alan Turing
+
+`;
+```
+
+To:
+
+```js
+exports[` should render null`] = `null`;
+
+exports[` should render Alan Turing`] = `
+
+ Alan Turing
+
+`;
+```
+
+Since the later describes exactly what's expected in the output, it's more clear to see when it's wrong:
+
+```js
+exports[` should render null`] = `
+
+ Alan Turing
+
+`;
+
+exports[` should render Alan Turing`] = `null`;
+```
+
+## Frequently Asked Questions
+
+### Are snapshots written automatically on Continuous Integration (CI) systems?
+
+No, as of Jest 20, snapshots in Jest are not automatically written when Jest is run in a CI system without explicitly passing `--updateSnapshot`. It is expected that all snapshots are part of the code that is run on CI and since new snapshots automatically pass, they should not pass a test run on a CI system. It is recommended to always commit all snapshots and to keep them in version control.
+
+### Should snapshot files be committed?
+
+Yes, all snapshot files should be committed alongside the modules they are covering and their tests. They should be considered part of a test, similar to the value of any other assertion in Jest. In fact, snapshots represent the state of the source modules at any given point in time. In this way, when the source modules are modified, Jest can tell what changed from the previous version. It can also provide a lot of additional context during code review in which reviewers can study your changes better.
+
+### Does snapshot testing only work with React components?
+
+[React](TutorialReact.md) and [React Native](TutorialReactNative.md) components are a good use case for snapshot testing. However, snapshots can capture any serializable value and should be used anytime the goal is testing whether the output is correct. The Jest repository contains many examples of testing the output of Jest itself, the output of Jest's assertion library as well as log messages from various parts of the Jest codebase. See an example of [snapshotting CLI output](https://github.com/facebook/jest/blob/main/e2e/__tests__/console.test.ts) in the Jest repo.
+
+### What's the difference between snapshot testing and visual regression testing?
+
+Snapshot testing and visual regression testing are two distinct ways of testing UIs, and they serve different purposes. Visual regression testing tools take screenshots of web pages and compare the resulting images pixel by pixel. With Snapshot testing values are serialized, stored within text files, and compared using a diff algorithm. There are different trade-offs to consider and we listed the reasons why snapshot testing was built in the [Jest blog](/blog/2016/07/27/jest-14#why-snapshot-testing).
+
+### Does snapshot testing replace unit testing?
+
+Snapshot testing is only one of more than 20 assertions that ship with Jest. The aim of snapshot testing is not to replace existing unit tests, but to provide additional value and make testing painless. In some scenarios, snapshot testing can potentially remove the need for unit testing for a particular set of functionalities (e.g. React components), but they can work together as well.
+
+### What is the performance of snapshot testing regarding speed and size of the generated files?
+
+Jest has been rewritten with performance in mind, and snapshot testing is not an exception. Since snapshots are stored within text files, this way of testing is fast and reliable. Jest generates a new file for each test file that invokes the `toMatchSnapshot` matcher. The size of the snapshots is pretty small: For reference, the size of all snapshot files in the Jest codebase itself is less than 300 KB.
+
+### How do I resolve conflicts within snapshot files?
+
+Snapshot files must always represent the current state of the modules they are covering. Therefore, if you are merging two branches and encounter a conflict in the snapshot files, you can either resolve the conflict manually or update the snapshot file by running Jest and inspecting the result.
+
+### Is it possible to apply test-driven development principles with snapshot testing?
+
+Although it is possible to write snapshot files manually, that is usually not approachable. Snapshots help to figure out whether the output of the modules covered by tests is changed, rather than giving guidance to design the code in the first place.
+
+### Does code coverage work with snapshot testing?
+
+Yes, as well as with any other test.
diff --git a/website/versioned_docs/version-27.4/TestingAsyncCode.md b/website/versioned_docs/version-27.4/TestingAsyncCode.md
new file mode 100644
index 000000000000..2352de9a38c3
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TestingAsyncCode.md
@@ -0,0 +1,129 @@
+---
+id: asynchronous
+title: Testing Asynchronous Code
+---
+
+It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this.
+
+## Callbacks
+
+The most common asynchronous pattern is callbacks.
+
+For example, let's say that you have a `fetchData(callback)` function that fetches some data and calls `callback(data)` when it is complete. You want to test that this returned data is the string `'peanut butter'`.
+
+By default, Jest tests complete once they reach the end of their execution. That means this test will _not_ work as intended:
+
+```js
+// Don't do this!
+test('the data is peanut butter', () => {
+ function callback(data) {
+ expect(data).toBe('peanut butter');
+ }
+
+ fetchData(callback);
+});
+```
+
+The problem is that the test will complete as soon as `fetchData` completes, before ever calling the callback.
+
+There is an alternate form of `test` that fixes this. Instead of putting the test in a function with an empty argument, use a single argument called `done`. Jest will wait until the `done` callback is called before finishing the test.
+
+```js
+test('the data is peanut butter', done => {
+ function callback(data) {
+ try {
+ expect(data).toBe('peanut butter');
+ done();
+ } catch (error) {
+ done(error);
+ }
+ }
+
+ fetchData(callback);
+});
+```
+
+If `done()` is never called, the test will fail (with timeout error), which is what you want to happen.
+
+If the `expect` statement fails, it throws an error and `done()` is not called. If we want to see in the test log why it failed, we have to wrap `expect` in a `try` block and pass the error in the `catch` block to `done`. Otherwise, we end up with an opaque timeout error that doesn't show what value was received by `expect(data)`.
+
+## Promises
+
+If your code uses promises, there is a more straightforward way to handle asynchronous tests. Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.
+
+For example, let's say that `fetchData`, instead of using a callback, returns a promise that is supposed to resolve to the string `'peanut butter'`. We could test it with:
+
+```js
+test('the data is peanut butter', () => {
+ return fetchData().then(data => {
+ expect(data).toBe('peanut butter');
+ });
+});
+```
+
+Be sure to return the promise - if you omit this `return` statement, your test will complete before the promise returned from `fetchData` resolves and then() has a chance to execute the callback.
+
+If you expect a promise to be rejected, use the `.catch` method. Make sure to add `expect.assertions` to verify that a certain number of assertions are called. Otherwise, a fulfilled promise would not fail the test.
+
+```js
+test('the fetch fails with an error', () => {
+ expect.assertions(1);
+ return fetchData().catch(e => expect(e).toMatch('error'));
+});
+```
+
+## `.resolves` / `.rejects`
+
+You can also use the `.resolves` matcher in your expect statement, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.
+
+```js
+test('the data is peanut butter', () => {
+ return expect(fetchData()).resolves.toBe('peanut butter');
+});
+```
+
+Be sure to return the assertion—if you omit this `return` statement, your test will complete before the promise returned from `fetchData` is resolved and then() has a chance to execute the callback.
+
+If you expect a promise to be rejected, use the `.rejects` matcher. It works analogically to the `.resolves` matcher. If the promise is fulfilled, the test will automatically fail.
+
+```js
+test('the fetch fails with an error', () => {
+ return expect(fetchData()).rejects.toMatch('error');
+});
+```
+
+## Async/Await
+
+Alternatively, you can use `async` and `await` in your tests. To write an async test, use the `async` keyword in front of the function passed to `test`. For example, the same `fetchData` scenario can be tested with:
+
+```js
+test('the data is peanut butter', async () => {
+ const data = await fetchData();
+ expect(data).toBe('peanut butter');
+});
+
+test('the fetch fails with an error', async () => {
+ expect.assertions(1);
+ try {
+ await fetchData();
+ } catch (e) {
+ expect(e).toMatch('error');
+ }
+});
+```
+
+You can combine `async` and `await` with `.resolves` or `.rejects`.
+
+```js
+test('the data is peanut butter', async () => {
+ await expect(fetchData()).resolves.toBe('peanut butter');
+});
+
+test('the fetch fails with an error', async () => {
+ await expect(fetchData()).rejects.toMatch('error');
+});
+```
+
+In these cases, `async` and `await` are effectively syntactic sugar for the same logic as the promises example uses.
+
+None of these forms is particularly superior to the others, and you can mix and match them across a codebase or even in a single file. It just depends on which style you feel makes your tests simpler.
diff --git a/website/versioned_docs/version-27.4/TestingFrameworks.md b/website/versioned_docs/version-27.4/TestingFrameworks.md
new file mode 100644
index 000000000000..5b085c8658a3
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TestingFrameworks.md
@@ -0,0 +1,45 @@
+---
+id: testing-frameworks
+title: Testing Web Frameworks
+---
+
+Jest is a universal testing platform, with the ability to adapt to any JavaScript library or framework. In this section, we'd like to link to community posts and articles about integrating Jest into popular JS libraries.
+
+## React
+
+- [Testing ReactJS components with Jest](https://testing-library.com/docs/react-testing-library/example-intro) by Kent C. Dodds ([@kentcdodds](https://twitter.com/kentcdodds))
+
+## Vue.js
+
+- [Testing Vue.js components with Jest](https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/) by Alex Jover Morales ([@alexjoverm](https://twitter.com/alexjoverm))
+- [Jest for all: Episode 1 — Vue.js](https://medium.com/@kentaromiura_the_js_guy/jest-for-all-episode-1-vue-js-d616bccbe186#.d573vrce2) by Cristian Carlesso ([@kentaromiura](https://twitter.com/kentaromiura))
+
+## AngularJS
+
+- [Testing an AngularJS app with Jest](https://medium.com/aya-experience/testing-an-angularjs-app-with-jest-3029a613251) by Matthieu Lux ([@Swiip](https://twitter.com/Swiip))
+- [Running AngularJS Tests with Jest](https://engineering.talentpair.com/running-angularjs-tests-with-jest-49d0cc9c6d26) by Ben Brandt ([@benjaminbrandt](https://twitter.com/benjaminbrandt))
+- [AngularJS Unit Tests with Jest Actions (Traditional Chinese)](https://dwatow.github.io/2019/08-14-angularjs/angular-jest/?fbclid=IwAR2SrqYg_o6uvCQ79FdNPeOxs86dUqB6pPKgd9BgnHt1kuIDRyRM-ch11xg) by Chris Wang ([@dwatow](https://github.com/dwatow))
+
+## Angular
+
+- [Testing Angular faster with Jest](https://www.xfive.co/blog/testing-angular-faster-jest/) by Michał Pierzchała ([@thymikee](https://twitter.com/thymikee))
+
+## MobX
+
+- [How to Test React and MobX with Jest](https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest) by Will Stern ([@willsterndev](https://twitter.com/willsterndev))
+
+## Redux
+
+- [Writing Tests](https://redux.js.org/recipes/writing-tests) by Redux docs
+
+## Express.js
+
+- [How to test Express.js with Jest and Supertest](http://www.albertgao.xyz/2017/05/24/how-to-test-expressjs-with-jest-and-supertest/) by Albert Gao ([@albertgao](https://twitter.com/albertgao))
+
+## GatsbyJS
+
+- [Unit Testing](https://www.gatsbyjs.org/docs/unit-testing/) by GatsbyJS docs
+
+## Hapi.js
+
+- [Testing Hapi.js With Jest](http://niralar.com/testing-hapi-js-with-jest/) by Niralar ([Sivasankar](http://sivasankar.in/))
diff --git a/website/versioned_docs/version-27.4/TimerMocks.md b/website/versioned_docs/version-27.4/TimerMocks.md
new file mode 100644
index 000000000000..b053c1dbdfc9
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TimerMocks.md
@@ -0,0 +1,174 @@
+---
+id: timer-mocks
+title: Timer Mocks
+---
+
+The native timer functions (i.e., `setTimeout`, `setInterval`, `clearTimeout`, `clearInterval`) are less than ideal for a testing environment since they depend on real time to elapse. Jest can swap out timers with functions that allow you to control the passage of time. [Great Scott!](https://www.youtube.com/watch?v=QZoJ2Pt27BY)
+
+```javascript title="timerGame.js"
+'use strict';
+
+function timerGame(callback) {
+ console.log('Ready....go!');
+ setTimeout(() => {
+ console.log("Time's up -- stop!");
+ callback && callback();
+ }, 1000);
+}
+
+module.exports = timerGame;
+```
+
+```javascript title="__tests__/timerGame-test.js"
+'use strict';
+
+jest.useFakeTimers();
+jest.spyOn(global, 'setTimeout');
+
+test('waits 1 second before ending the game', () => {
+ const timerGame = require('../timerGame');
+ timerGame();
+
+ expect(setTimeout).toHaveBeenCalledTimes(1);
+ expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
+});
+```
+
+Here we enable fake timers by calling `jest.useFakeTimers()`. This mocks out `setTimeout` and other timer functions with mock functions. Timers can be restored to their normal behavior with `jest.useRealTimers()`.
+
+While you can call `jest.useFakeTimers()` or `jest.useRealTimers()` from anywhere (top level, inside an `it` block, etc.), it is a **global operation** and will affect other tests within the same file. Additionally, you need to call `jest.useFakeTimers()` to reset internal counters before each test. If you plan to not use fake timers in all your tests, you will want to clean up manually, as otherwise the faked timers will leak across tests:
+
+```javascript
+afterEach(() => {
+ jest.useRealTimers();
+});
+
+test('do something with fake timers', () => {
+ jest.useFakeTimers();
+ // ...
+});
+
+test('do something with real timers', () => {
+ // ...
+});
+```
+
+## Run All Timers
+
+Another test we might want to write for this module is one that asserts that the callback is called after 1 second. To do this, we're going to use Jest's timer control APIs to fast-forward time right in the middle of the test:
+
+```javascript
+test('calls the callback after 1 second', () => {
+ const timerGame = require('../timerGame');
+ const callback = jest.fn();
+
+ timerGame(callback);
+
+ // At this point in time, the callback should not have been called yet
+ expect(callback).not.toBeCalled();
+
+ // Fast-forward until all timers have been executed
+ jest.runAllTimers();
+
+ // Now our callback should have been called!
+ expect(callback).toBeCalled();
+ expect(callback).toHaveBeenCalledTimes(1);
+});
+```
+
+## Run Pending Timers
+
+There are also scenarios where you might have a recursive timer -- that is a timer that sets a new timer in its own callback. For these, running all the timers would be an endless loop… so something like `jest.runAllTimers()` is not desirable. For these cases you might use `jest.runOnlyPendingTimers()`:
+
+```javascript title="infiniteTimerGame.js"
+'use strict';
+
+function infiniteTimerGame(callback) {
+ console.log('Ready....go!');
+
+ setTimeout(() => {
+ console.log("Time's up! 10 seconds before the next game starts...");
+ callback && callback();
+
+ // Schedule the next game in 10 seconds
+ setTimeout(() => {
+ infiniteTimerGame(callback);
+ }, 10000);
+ }, 1000);
+}
+
+module.exports = infiniteTimerGame;
+```
+
+```javascript title="__tests__/infiniteTimerGame-test.js"
+'use strict';
+
+jest.useFakeTimers();
+
+describe('infiniteTimerGame', () => {
+ test('schedules a 10-second timer after 1 second', () => {
+ const infiniteTimerGame = require('../infiniteTimerGame');
+ const callback = jest.fn();
+
+ infiniteTimerGame(callback);
+
+ // At this point in time, there should have been a single call to
+ // setTimeout to schedule the end of the game in 1 second.
+ expect(setTimeout).toHaveBeenCalledTimes(1);
+ expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
+
+ // Fast forward and exhaust only currently pending timers
+ // (but not any new timers that get created during that process)
+ jest.runOnlyPendingTimers();
+
+ // At this point, our 1-second timer should have fired its callback
+ expect(callback).toBeCalled();
+
+ // And it should have created a new timer to start the game over in
+ // 10 seconds
+ expect(setTimeout).toHaveBeenCalledTimes(2);
+ expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 10000);
+ });
+});
+```
+
+## Advance Timers by Time
+
+Another possibility is use `jest.advanceTimersByTime(msToRun)`. When this API is called, all timers are advanced by `msToRun` milliseconds. All pending "macro-tasks" that have been queued via setTimeout() or setInterval(), and would be executed during this time frame, will be executed. Additionally, if those macro-tasks schedule new macro-tasks that would be executed within the same time frame, those will be executed until there are no more macro-tasks remaining in the queue that should be run within msToRun milliseconds.
+
+```javascript title="timerGame.js"
+'use strict';
+
+function timerGame(callback) {
+ console.log('Ready....go!');
+ setTimeout(() => {
+ console.log("Time's up -- stop!");
+ callback && callback();
+ }, 1000);
+}
+
+module.exports = timerGame;
+```
+
+```javascript
+it('calls the callback after 1 second via advanceTimersByTime', () => {
+ const timerGame = require('../timerGame');
+ const callback = jest.fn();
+
+ timerGame(callback);
+
+ // At this point in time, the callback should not have been called yet
+ expect(callback).not.toBeCalled();
+
+ // Fast-forward until all timers have been executed
+ jest.advanceTimersByTime(1000);
+
+ // Now our callback should have been called!
+ expect(callback).toBeCalled();
+ expect(callback).toHaveBeenCalledTimes(1);
+});
+```
+
+Lastly, it may occasionally be useful in some tests to be able to clear all of the pending timers. For this, we have `jest.clearAllTimers()`.
+
+The code for this example is available at [examples/timer](https://github.com/facebook/jest/tree/main/examples/timer).
diff --git a/website/versioned_docs/version-27.4/Troubleshooting.md b/website/versioned_docs/version-27.4/Troubleshooting.md
new file mode 100644
index 000000000000..52ca0f3358e4
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Troubleshooting.md
@@ -0,0 +1,210 @@
+---
+id: troubleshooting
+title: Troubleshooting
+---
+
+Uh oh, something went wrong? Use this guide to resolve issues with Jest.
+
+## Tests are Failing and You Don't Know Why
+
+Try using the debugging support built into Node. Note: This will only work in Node.js 8+.
+
+Place a `debugger;` statement in any of your tests, and then, in your project's directory, run:
+
+```bash
+node --inspect-brk node_modules/.bin/jest --runInBand [any other arguments here]
+or on Windows
+node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand [any other arguments here]
+```
+
+This will run Jest in a Node process that an external debugger can connect to. Note that the process will pause until the debugger has connected to it.
+
+To debug in Google Chrome (or any Chromium-based browser), open your browser and go to `chrome://inspect` and click on "Open Dedicated DevTools for Node", which will give you a list of available node instances you can connect to. Click on the address displayed in the terminal (usually something like `localhost:9229`) after running the above command, and you will be able to debug Jest using Chrome's DevTools.
+
+The Chrome Developer Tools will be displayed, and a breakpoint will be set at the first line of the Jest CLI script (this is done to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the `debugger` statement, execution will pause and you can examine the current scope and call stack.
+
+> Note: the `--runInBand` cli option makes sure Jest runs the test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
+
+## Debugging in VS Code
+
+There are multiple ways to debug Jest tests with [Visual Studio Code's](https://code.visualstudio.com) built-in [debugger](https://code.visualstudio.com/docs/nodejs/nodejs-debugging).
+
+To attach the built-in debugger, run your tests as aforementioned:
+
+```bash
+node --inspect-brk node_modules/.bin/jest --runInBand [any other arguments here]
+or on Windows
+node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand [any other arguments here]
+```
+
+Then attach VS Code's debugger using the following `launch.json` config:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "attach",
+ "name": "Attach",
+ "port": 9229
+ }
+ ]
+}
+```
+
+To automatically launch and attach to a process running your tests, use the following configuration:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug Jest Tests",
+ "type": "node",
+ "request": "launch",
+ "runtimeArgs": [
+ "--inspect-brk",
+ "${workspaceRoot}/node_modules/.bin/jest",
+ "--runInBand"
+ ],
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen",
+ "port": 9229
+ }
+ ]
+}
+```
+
+or the following for Windows:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug Jest Tests",
+ "type": "node",
+ "request": "launch",
+ "runtimeArgs": [
+ "--inspect-brk",
+ "${workspaceRoot}/node_modules/jest/bin/jest.js",
+ "--runInBand"
+ ],
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen",
+ "port": 9229
+ }
+ ]
+}
+```
+
+If you are using Facebook's [`create-react-app`](https://github.com/facebookincubator/create-react-app), you can debug your Jest tests with the following configuration:
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Debug CRA Tests",
+ "type": "node",
+ "request": "launch",
+ "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+ "args": ["test", "--runInBand", "--no-cache", "--env=jsdom"],
+ "cwd": "${workspaceRoot}",
+ "protocol": "inspector",
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen"
+ }
+ ]
+}
+```
+
+More information on Node debugging can be found [here](https://nodejs.org/api/debugger.html).
+
+## Debugging in WebStorm
+
+The easiest way to debug Jest tests in [WebStorm](https://www.jetbrains.com/webstorm/) is using `Jest run/debug configuration`. It will launch tests and automatically attach debugger.
+
+In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `Jest`. Optionally specify the Jest configuration file, additional options, and environment variables. Save the configuration, put the breakpoints in the code, then click the green debug icon to start debugging.
+
+If you are using Facebook's [`create-react-app`](https://github.com/facebookincubator/create-react-app), in the Jest run/debug configuration specify the path to the `react-scripts` package in the Jest package field and add `--env=jsdom` to the Jest options field.
+
+## Caching Issues
+
+The transform script was changed or Babel was updated and the changes aren't being recognized by Jest?
+
+Retry with [`--no-cache`](CLI.md#--cache). Jest caches transformed module files to speed up test execution. If you are using your own custom transformer, consider adding a `getCacheKey` function to it: [getCacheKey in Relay](https://github.com/facebook/relay/blob/58cf36c73769690f0bbf90562707eadb062b029d/scripts/jest/preprocessor.js#L56-L61).
+
+## Unresolved Promises
+
+If a promise doesn't resolve at all, this error might be thrown:
+
+```bash
+- Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.`
+```
+
+Most commonly this is being caused by conflicting Promise implementations. Consider replacing the global promise implementation with your own, for example `global.Promise = jest.requireActual('promise');` and/or consolidate the used Promise libraries to a single one.
+
+If your test is long running, you may want to consider to increase the timeout by calling `jest.setTimeout`
+
+```js
+jest.setTimeout(10000); // 10 second timeout
+```
+
+## Watchman Issues
+
+Try running Jest with [`--no-watchman`](CLI.md#--watchman) or set the `watchman` configuration option to `false`.
+
+Also see [watchman troubleshooting](https://facebook.github.io/watchman/docs/troubleshooting).
+
+## Tests are Extremely Slow on Docker and/or Continuous Integration (CI) server.
+
+While Jest is most of the time extremely fast on modern multi-core computers with fast SSDs, it may be slow on certain setups as our users [have](https://github.com/facebook/jest/issues/1395) [discovered](https://github.com/facebook/jest/issues/1524#issuecomment-260246008).
+
+Based on the [findings](https://github.com/facebook/jest/issues/1524#issuecomment-262366820), one way to mitigate this issue and improve the speed by up to 50% is to run tests sequentially.
+
+In order to do this you can run tests in the same thread using [`--runInBand`](CLI.md#--runinband):
+
+```bash
+# Using Jest CLI
+jest --runInBand
+
+# Using yarn test (e.g. with create-react-app)
+yarn test --runInBand
+```
+
+Another alternative to expediting test execution time on Continuous Integration Servers such as Travis-CI is to set the max worker pool to ~_4_. Specifically on Travis-CI, this can reduce test execution time in half. Note: The Travis CI _free_ plan available for open source projects only includes 2 CPU cores.
+
+```bash
+# Using Jest CLI
+jest --maxWorkers=4
+
+# Using yarn test (e.g. with create-react-app)
+yarn test --maxWorkers=4
+```
+
+## `coveragePathIgnorePatterns` seems to not have any effect.
+
+Make sure you are not using the `babel-plugin-istanbul` plugin. Jest wraps Istanbul, and therefore also tells Istanbul what files to instrument with coverage collection. When using `babel-plugin-istanbul`, every file that is processed by Babel will have coverage collection code, hence it is not being ignored by `coveragePathIgnorePatterns`.
+
+## Defining Tests
+
+Tests must be defined synchronously for Jest to be able to collect your tests.
+
+As an example to show why this is the case, imagine we wrote a test like so:
+
+```js
+// Don't do this it will not work
+setTimeout(() => {
+ it('passes', () => expect(1).toBe(1));
+}, 0);
+```
+
+When Jest runs your test to collect the `test`s it will not find any because we have set the definition to happen asynchronously on the next tick of the event loop.
+
+_Note:_ This means when you are using `test.each` you cannot set the table asynchronously within a `beforeEach` / `beforeAll`.
+
+## Still unresolved?
+
+See [Help](/help).
diff --git a/website/versioned_docs/version-27.4/TutorialAsync.md b/website/versioned_docs/version-27.4/TutorialAsync.md
new file mode 100644
index 000000000000..9c283074cabd
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TutorialAsync.md
@@ -0,0 +1,161 @@
+---
+id: tutorial-async
+title: An Async Example
+---
+
+First, enable Babel support in Jest as documented in the [Getting Started](GettingStarted.md#using-babel) guide.
+
+Let's implement a module that fetches user data from an API and returns the user name.
+
+```js title="user.js"
+import request from './request';
+
+export function getUserName(userID) {
+ return request('/users/' + userID).then(user => user.name);
+}
+```
+
+In the above implementation, we expect the `request.js` module to return a promise. We chain a call to `then` to receive the user name.
+
+Now imagine an implementation of `request.js` that goes to the network and fetches some user data:
+
+```js title="request.js"
+const http = require('http');
+
+export default function request(url) {
+ return new Promise(resolve => {
+ // This is an example of an http request, for example to fetch
+ // user data from an API.
+ // This module is being mocked in __mocks__/request.js
+ http.get({path: url}, response => {
+ let data = '';
+ response.on('data', _data => (data += _data));
+ response.on('end', () => resolve(data));
+ });
+ });
+}
+```
+
+Because we don't want to go to the network in our test, we are going to create a manual mock for our `request.js` module in the `__mocks__` folder (the folder is case-sensitive, `__MOCKS__` will not work). It could look something like this:
+
+```js title="__mocks__/request.js"
+const users = {
+ 4: {name: 'Mark'},
+ 5: {name: 'Paul'},
+};
+
+export default function request(url) {
+ return new Promise((resolve, reject) => {
+ const userID = parseInt(url.substr('/users/'.length), 10);
+ process.nextTick(() =>
+ users[userID]
+ ? resolve(users[userID])
+ : reject({
+ error: 'User with ' + userID + ' not found.',
+ }),
+ );
+ });
+}
+```
+
+Now let's write a test for our async functionality.
+
+```js title="__tests__/user-test.js"
+jest.mock('../request');
+
+import * as user from '../user';
+
+// The assertion for a promise must be returned.
+it('works with promises', () => {
+ expect.assertions(1);
+ return user.getUserName(4).then(data => expect(data).toEqual('Mark'));
+});
+```
+
+We call `jest.mock('../request')` to tell Jest to use our manual mock. `it` expects the return value to be a Promise that is going to be resolved. You can chain as many Promises as you like and call `expect` at any time, as long as you return a Promise at the end.
+
+## `.resolves`
+
+There is a less verbose way using `resolves` to unwrap the value of a fulfilled promise together with any other matcher. If the promise is rejected, the assertion will fail.
+
+```js
+it('works with resolves', () => {
+ expect.assertions(1);
+ return expect(user.getUserName(5)).resolves.toEqual('Paul');
+});
+```
+
+## `async`/`await`
+
+Writing tests using the `async`/`await` syntax is also possible. Here is how you'd write the same examples from before:
+
+```js
+// async/await can be used.
+it('works with async/await', async () => {
+ expect.assertions(1);
+ const data = await user.getUserName(4);
+ expect(data).toEqual('Mark');
+});
+
+// async/await can also be used with `.resolves`.
+it('works with async/await and resolves', async () => {
+ expect.assertions(1);
+ await expect(user.getUserName(5)).resolves.toEqual('Paul');
+});
+```
+
+To enable async/await in your project, install [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) and enable the feature in your `babel.config.js` file.
+
+## Error handling
+
+Errors can be handled using the `.catch` method. Make sure to add `expect.assertions` to verify that a certain number of assertions are called. Otherwise a fulfilled promise would not fail the test:
+
+```js
+// Testing for async errors using Promise.catch.
+it('tests error with promises', () => {
+ expect.assertions(1);
+ return user.getUserName(2).catch(e =>
+ expect(e).toEqual({
+ error: 'User with 2 not found.',
+ }),
+ );
+});
+
+// Or using async/await.
+it('tests error with async/await', async () => {
+ expect.assertions(1);
+ try {
+ await user.getUserName(1);
+ } catch (e) {
+ expect(e).toEqual({
+ error: 'User with 1 not found.',
+ });
+ }
+});
+```
+
+## `.rejects`
+
+The`.rejects` helper works like the `.resolves` helper. If the promise is fulfilled, the test will automatically fail. `expect.assertions(number)` is not required but recommended to verify that a certain number of [assertions](expect#expectassertionsnumber) are called during a test. It is otherwise easy to forget to `return`/`await` the `.resolves` assertions.
+
+```js
+// Testing for async errors using `.rejects`.
+it('tests error with rejects', () => {
+ expect.assertions(1);
+ return expect(user.getUserName(3)).rejects.toEqual({
+ error: 'User with 3 not found.',
+ });
+});
+
+// Or using async/await with `.rejects`.
+it('tests error with async/await and rejects', async () => {
+ expect.assertions(1);
+ await expect(user.getUserName(3)).rejects.toEqual({
+ error: 'User with 3 not found.',
+ });
+});
+```
+
+The code for this example is available at [examples/async](https://github.com/facebook/jest/tree/main/examples/async).
+
+If you'd like to test timers, like `setTimeout`, take a look at the [Timer mocks](TimerMocks.md) documentation.
diff --git a/website/versioned_docs/version-27.4/TutorialReact.md b/website/versioned_docs/version-27.4/TutorialReact.md
new file mode 100644
index 000000000000..5fcfa52a098b
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TutorialReact.md
@@ -0,0 +1,313 @@
+---
+id: tutorial-react
+title: Testing React Apps
+---
+
+At Facebook, we use Jest to test [React](https://reactjs.org/) applications.
+
+## Setup
+
+### Setup with Create React App
+
+If you are new to React, we recommend using [Create React App](https://create-react-app.dev/). It is ready to use and [ships with Jest](https://create-react-app.dev/docs/running-tests/#docsNav)! You will only need to add `react-test-renderer` for rendering snapshots.
+
+Run
+
+```bash
+yarn add --dev react-test-renderer
+```
+
+### Setup without Create React App
+
+If you have an existing application you'll need to install a few packages to make everything work well together. We are using the `babel-jest` package and the `react` babel preset to transform our code inside of the test environment. Also see [using babel](GettingStarted.md#using-babel).
+
+Run
+
+```bash
+yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
+```
+
+Your `package.json` should look something like this (where `` is the actual latest version number for the package). Please add the scripts and jest configuration entries:
+
+```json
+ "dependencies": {
+ "react": "",
+ "react-dom": ""
+ },
+ "devDependencies": {
+ "@babel/preset-env": "",
+ "@babel/preset-react": "",
+ "babel-jest": "",
+ "jest": "",
+ "react-test-renderer": ""
+ },
+ "scripts": {
+ "test": "jest"
+ }
+```
+
+```js title="babel.config.js"
+module.exports = {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+};
+```
+
+**And you're good to go!**
+
+### Snapshot Testing
+
+Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks:
+
+```tsx title="Link.react.js"
+import React, {useState} from 'react';
+
+const STATUS = {
+ HOVERED: 'hovered',
+ NORMAL: 'normal',
+};
+
+const Link = ({page, children}) => {
+ const [status, setStatus] = useState(STATUS.NORMAL);
+
+ const onMouseEnter = () => {
+ setStatus(STATUS.HOVERED);
+ };
+
+ const onMouseLeave = () => {
+ setStatus(STATUS.NORMAL);
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Link;
+```
+
+> Note: Examples are using Function components, but Class components can be tested in the same way. See [React: Function and Class Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components). **Reminders** that with Class components, we expect Jest to be used to test props and not methods directly.
+
+Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
+
+```tsx title="Link.react.test.js"
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Link from '../Link.react';
+
+test('Link changes the class when hovered', () => {
+ const component = renderer.create(
+ Facebook,
+ );
+ let tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+
+ // manually trigger the callback
+ tree.props.onMouseEnter();
+ // re-rendering
+ tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+
+ // manually trigger the callback
+ tree.props.onMouseLeave();
+ // re-rendering
+ tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+});
+```
+
+When you run `yarn test` or `jest`, this will produce an output file like this:
+
+```javascript title="__tests__/__snapshots__/Link.react.test.js.snap"
+exports[`Link changes the class when hovered 1`] = `
+
+ Facebook
+
+`;
+
+exports[`Link changes the class when hovered 2`] = `
+
+ Facebook
+
+`;
+
+exports[`Link changes the class when hovered 3`] = `
+
+ Facebook
+
+`;
+```
+
+The next time you run the tests, the rendered output will be compared to the previously created snapshot. The snapshot should be committed along with code changes. When a snapshot test fails, you need to inspect whether it is an intended or unintended change. If the change is expected you can invoke Jest with `jest -u` to overwrite the existing snapshot.
+
+The code for this example is available at [examples/snapshot](https://github.com/facebook/jest/tree/main/examples/snapshot).
+
+#### Snapshot Testing with Mocks, Enzyme and React 16
+
+There's a caveat around snapshot testing when using Enzyme and React 16+. If you mock out a module using the following style:
+
+```js
+jest.mock('../SomeDirectory/SomeComponent', () => 'SomeComponent');
+```
+
+Then you will see warnings in the console:
+
+```bash
+Warning: is using uppercase HTML. Always use lowercase HTML tags in React.
+
+# Or:
+Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
+```
+
+React 16 triggers these warnings due to how it checks element types, and the mocked module fails these checks. Your options are:
+
+1. Render as text. This way you won't see the props passed to the mock component in the snapshot, but it's straightforward:
+ ```js
+ jest.mock('./SomeComponent', () => () => 'SomeComponent');
+ ```
+2. Render as a custom element. DOM "custom elements" aren't checked for anything and shouldn't fire warnings. They are lowercase and have a dash in the name.
+ ```tsx
+ jest.mock('./Widget', () => () => );
+ ```
+3. Use `react-test-renderer`. The test renderer doesn't care about element types and will happily accept e.g. `SomeComponent`. You could check snapshots using the test renderer, and check component behavior separately using Enzyme.
+4. Disable warnings all together (should be done in your jest setup file):
+ ```js
+ jest.mock('fbjs/lib/warning', () => require('fbjs/lib/emptyFunction'));
+ ```
+ This shouldn't normally be your option of choice as useful warnings could be lost. However, in some cases, for example when testing react-native's components we are rendering react-native tags into the DOM and many warnings are irrelevant. Another option is to swizzle the console.warn and suppress specific warnings.
+
+### DOM Testing
+
+If you'd like to assert, and manipulate your rendered components you can use [react-testing-library](https://github.com/kentcdodds/react-testing-library), [Enzyme](http://airbnb.io/enzyme/), or React's [TestUtils](https://reactjs.org/docs/test-utils.html). The following two examples use react-testing-library and Enzyme.
+
+#### react-testing-library
+
+You have to run `yarn add --dev @testing-library/react` to use react-testing-library.
+
+Let's implement a checkbox which swaps between two labels:
+
+```tsx title="CheckboxWithLabel.js"
+import React, {useState} from 'react';
+
+const CheckboxWithLabel = ({labelOn, labelOff}) => {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const onChange = () => {
+ setIsChecked(!isChecked);
+ };
+
+ return (
+
+ );
+};
+
+export default CheckboxWithLabel;
+```
+
+```tsx title="__tests__/CheckboxWithLabel-test.js"
+import React from 'react';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import CheckboxWithLabel from '../CheckboxWithLabel';
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup);
+
+it('CheckboxWithLabel changes the text after click', () => {
+ const {queryByLabelText, getByLabelText} = render(
+ ,
+ );
+
+ expect(queryByLabelText(/off/i)).toBeTruthy();
+
+ fireEvent.click(getByLabelText(/off/i));
+
+ expect(queryByLabelText(/on/i)).toBeTruthy();
+});
+```
+
+The code for this example is available at [examples/react-testing-library](https://github.com/facebook/jest/tree/main/examples/react-testing-library).
+
+#### Enzyme
+
+You have to run `yarn add --dev enzyme` to use Enzyme. If you are using a React version below 15.5.0, you will also need to install `react-addons-test-utils`.
+
+Let's rewrite the test from above using Enzyme instead of react-testing-library. We use Enzyme's [shallow renderer](http://airbnb.io/enzyme/docs/api/shallow.html) in this example.
+
+```tsx title="__tests__/CheckboxWithLabel-test.js"
+import React from 'react';
+import {shallow} from 'enzyme';
+import CheckboxWithLabel from '../CheckboxWithLabel';
+
+test('CheckboxWithLabel changes the text after click', () => {
+ // Render a checkbox with label in the document
+ const checkbox = shallow();
+
+ expect(checkbox.text()).toEqual('Off');
+
+ checkbox.find('input').simulate('change');
+
+ expect(checkbox.text()).toEqual('On');
+});
+```
+
+The code for this example is available at [examples/enzyme](https://github.com/facebook/jest/tree/main/examples/enzyme).
+
+### Custom transformers
+
+If you need more advanced functionality, you can also build your own transformer. Instead of using `babel-jest`, here is an example of using `@babel/core`:
+
+```javascript title="custom-transformer.js"
+'use strict';
+
+const {transform} = require('@babel/core');
+const jestPreset = require('babel-preset-jest');
+
+module.exports = {
+ process(src, filename) {
+ const result = transform(src, {
+ filename,
+ presets: [jestPreset],
+ });
+
+ return result || src;
+ },
+};
+```
+
+Don't forget to install the `@babel/core` and `babel-preset-jest` packages for this example to work.
+
+To make this work with Jest you need to update your Jest configuration with this: `"transform": {"\\.js$": "path/to/custom-transformer.js"}`.
+
+If you'd like to build a transformer with babel support, you can also use `babel-jest` to compose one and pass in your custom configuration options:
+
+```javascript
+const babelJest = require('babel-jest');
+
+module.exports = babelJest.createTransformer({
+ presets: ['my-custom-preset'],
+});
+```
+
+See [dedicated docs](CodeTransformation.md#writing-custom-transformers) for more details.
diff --git a/website/versioned_docs/version-27.4/TutorialReactNative.md b/website/versioned_docs/version-27.4/TutorialReactNative.md
new file mode 100644
index 000000000000..ddb60b230c31
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TutorialReactNative.md
@@ -0,0 +1,215 @@
+---
+id: tutorial-react-native
+title: Testing React Native Apps
+---
+
+At Facebook, we use Jest to test [React Native](https://reactnative.dev/) applications.
+
+Get a deeper insight into testing a working React Native app example by reading the following series: [Part 1: Jest – Snapshot come into play](https://callstack.com/blog/testing-react-native-with-the-new-jest-part-1-snapshots-come-into-play/) and [Part 2: Jest – Redux Snapshots for your Actions and Reducers](https://callstack.com/blog/testing-react-native-with-the-new-jest-part-2-redux-snapshots-for-your-actions-and-reducers/).
+
+## Setup
+
+Starting from react-native version 0.38, a Jest setup is included by default when running `react-native init`. The following configuration should be automatically added to your package.json file:
+
+```json
+{
+ "scripts": {
+ "test": "jest"
+ },
+ "jest": {
+ "preset": "react-native"
+ }
+}
+```
+
+_Note: If you are upgrading your react-native application and previously used the `jest-react-native` preset, remove the dependency from your `package.json` file and change the preset to `react-native` instead._
+
+Run `yarn test` to run tests with Jest.
+
+## Snapshot Test
+
+Let's create a [snapshot test](SnapshotTesting.md) for a small intro component with a few views and text components and some styles:
+
+```tsx title="Intro.js"
+import React, {Component} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+class Intro extends Component {
+ render() {
+ return (
+
+ Welcome to React Native!
+
+ This is a React Native snapshot test.
+
+
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ flex: 1,
+ justifyContent: 'center',
+ },
+ instructions: {
+ color: '#333333',
+ marginBottom: 5,
+ textAlign: 'center',
+ },
+ welcome: {
+ fontSize: 20,
+ margin: 10,
+ textAlign: 'center',
+ },
+});
+
+export default Intro;
+```
+
+Now let's use React's test renderer and Jest's snapshot feature to interact with the component and capture the rendered output and create a snapshot file:
+
+```tsx title="__tests__/Intro-test.js"
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Intro from '../Intro';
+
+test('renders correctly', () => {
+ const tree = renderer.create().toJSON();
+ expect(tree).toMatchSnapshot();
+});
+```
+
+When you run `yarn test` or `jest`, this will produce an output file like this:
+
+```javascript title="__tests__/__snapshots__/Intro-test.js.snap"
+exports[`Intro renders correctly 1`] = `
+
+
+ Welcome to React Native!
+
+
+ This is a React Native snapshot test.
+
+
+`;
+```
+
+The next time you run the tests, the rendered output will be compared to the previously created snapshot. The snapshot should be committed along with code changes. When a snapshot test fails, you need to inspect whether it is an intended or unintended change. If the change is expected you can invoke Jest with `jest -u` to overwrite the existing snapshot.
+
+The code for this example is available at [examples/react-native](https://github.com/facebook/jest/tree/main/examples/react-native).
+
+## Preset configuration
+
+The preset sets up the environment and is very opinionated and based on what we found to be useful at Facebook. All of the configuration options can be overwritten just as they can be customized when no preset is used.
+
+### Environment
+
+`react-native` ships with a Jest preset, so the `jest.preset` field of your `package.json` should point to `react-native`. The preset is a node environment that mimics the environment of a React Native app. Because it doesn't load any DOM or browser APIs, it greatly improves Jest's startup time.
+
+### transformIgnorePatterns customization
+
+The [`transformIgnorePatterns`](configuration#transformignorepatterns-arraystring) option can be used to specify which files shall be transformed by Babel. Many `react-native` npm modules unfortunately don't pre-compile their source code before publishing.
+
+By default the `jest-react-native` preset only processes the project's own source files and `react-native`. If you have npm dependencies that have to be transformed you can customize this configuration option by including modules other than `react-native` by grouping them and separating them with the `|` operator:
+
+```json
+{
+ "transformIgnorePatterns": [
+ "node_modules/(?!(react-native|my-project|react-native-button)/)"
+ ]
+}
+```
+
+You can test which paths would match (and thus be excluded from transformation) with a tool [like this](https://regex101.com/r/JsLIDM/1).
+
+`transformIgnorePatterns` will exclude a file from transformation if the path matches against **any** pattern provided. Splitting into multiple patterns could therefore have unintended results if you are not careful. In the example below, the exclusion (also known as a negative lookahead assertion) for `foo` and `bar` cancel each other out:
+
+```json
+{
+ "transformIgnorePatterns": ["node_modules/(?!foo/)", "node_modules/(?!bar/)"] // not what you want
+}
+```
+
+### setupFiles
+
+If you'd like to provide additional configuration for every test file, the [`setupFiles` configuration option](configuration#setupfiles-array) can be used to specify setup scripts.
+
+### moduleNameMapper
+
+The [`moduleNameMapper`](configuration#modulenamemapper-objectstring-string--arraystring) can be used to map a module path to a different module. By default the preset maps all images to an image stub module but if a module cannot be found this configuration option can help:
+
+```json
+{
+ "moduleNameMapper": {
+ "my-module.js": "/path/to/my-module.js"
+ }
+}
+```
+
+## Tips
+
+### Mock native modules using jest.mock
+
+The Jest preset built into `react-native` comes with a few default mocks that are applied on a react-native repository. However, some react-native components or third party components rely on native code to be rendered. In such cases, Jest's manual mocking system can help to mock out the underlying implementation.
+
+For example, if your code depends on a third party native video component called `react-native-video` you might want to stub it out with a manual mock like this:
+
+```js
+jest.mock('react-native-video', () => 'Video');
+```
+
+This will render the component as `` with all of its props in the snapshot output. See also [caveats around Enzyme and React 16](tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16).
+
+Sometimes you need to provide a more complex manual mock. For example if you'd like to forward the prop types or static fields of a native component to a mock, you can return a different React component from a mock through this helper from jest-react-native:
+
+```js
+jest.mock('path/to/MyNativeComponent', () => {
+ const mockComponent = require('react-native/jest/mockComponent');
+ return mockComponent('path/to/MyNativeComponent');
+});
+```
+
+Or if you'd like to create your own manual mock, you can do something like this:
+
+```js
+jest.mock('Text', () => {
+ const RealComponent = jest.requireActual('Text');
+ const React = require('react');
+ class Text extends React.Component {
+ render() {
+ return React.createElement('Text', this.props, this.props.children);
+ }
+ }
+ Text.propTypes = RealComponent.propTypes;
+ return Text;
+});
+```
+
+In other cases you may want to mock a native module that isn't a React component. The same technique can be applied. We recommend inspecting the native module's source code and logging the module when running a react native app on a real device and then modeling a manual mock after the real module.
+
+If you end up mocking the same modules over and over it is recommended to define these mocks in a separate file and add it to the list of `setupFiles`.
diff --git a/website/versioned_docs/version-27.4/TutorialjQuery.md b/website/versioned_docs/version-27.4/TutorialjQuery.md
new file mode 100644
index 000000000000..13a309ec4763
--- /dev/null
+++ b/website/versioned_docs/version-27.4/TutorialjQuery.md
@@ -0,0 +1,66 @@
+---
+id: tutorial-jquery
+title: DOM Manipulation
+---
+
+Another class of functions that is often considered difficult to test is code that directly manipulates the DOM. Let's see how we can test the following snippet of jQuery code that listens to a click event, fetches some data asynchronously and sets the content of a span.
+
+```javascript title="displayUser.js"
+'use strict';
+
+const $ = require('jquery');
+const fetchCurrentUser = require('./fetchCurrentUser.js');
+
+$('#button').click(() => {
+ fetchCurrentUser(user => {
+ const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
+ $('#username').text(user.fullName + ' - ' + loggedText);
+ });
+});
+```
+
+Again, we create a test file in the `__tests__/` folder:
+
+```javascript title="__tests__/displayUser-test.js"
+'use strict';
+
+jest.mock('../fetchCurrentUser');
+
+test('displays a user after a click', () => {
+ // Set up our document body
+ document.body.innerHTML =
+ '
' +
+ ' ' +
+ ' ' +
+ '
';
+
+ // This module has a side-effect
+ require('../displayUser');
+
+ const $ = require('jquery');
+ const fetchCurrentUser = require('../fetchCurrentUser');
+
+ // Tell the fetchCurrentUser mock function to automatically invoke
+ // its callback with some data
+ fetchCurrentUser.mockImplementation(cb => {
+ cb({
+ fullName: 'Johnny Cash',
+ loggedIn: true,
+ });
+ });
+
+ // Use jquery to emulate a click on our button
+ $('#button').click();
+
+ // Assert that the fetchCurrentUser function was called, and that the
+ // #username span's inner text was updated as we'd expect it to.
+ expect(fetchCurrentUser).toBeCalled();
+ expect($('#username').text()).toEqual('Johnny Cash - Logged In');
+});
+```
+
+The function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. Jest ships with `jsdom` which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!
+
+We are mocking `fetchCurrentUser.js` so that our test doesn't make a real network request but instead resolves to mock data locally. This ensures that our test can complete in milliseconds rather than seconds and guarantees a fast unit test iteration speed.
+
+The code for this example is available at [examples/jquery](https://github.com/facebook/jest/tree/main/examples/jquery).
diff --git a/website/versioned_docs/version-27.4/UsingMatchers.md b/website/versioned_docs/version-27.4/UsingMatchers.md
new file mode 100644
index 000000000000..11a01dcd189d
--- /dev/null
+++ b/website/versioned_docs/version-27.4/UsingMatchers.md
@@ -0,0 +1,164 @@
+---
+id: using-matchers
+title: Using Matchers
+---
+
+Jest uses "matchers" to let you test values in different ways. This document will introduce some commonly used matchers. For the full list, see the [`expect` API doc](ExpectAPI.md).
+
+## Common Matchers
+
+The simplest way to test a value is with exact equality.
+
+```js
+test('two plus two is four', () => {
+ expect(2 + 2).toBe(4);
+});
+```
+
+In this code, `expect(2 + 2)` returns an "expectation" object. You typically won't do much with these expectation objects except call matchers on them. In this code, `.toBe(4)` is the matcher. When Jest runs, it tracks all the failing matchers so that it can print out nice error messages for you.
+
+`toBe` uses `Object.is` to test exact equality. If you want to check the value of an object, use `toEqual` instead:
+
+```js
+test('object assignment', () => {
+ const data = {one: 1};
+ data['two'] = 2;
+ expect(data).toEqual({one: 1, two: 2});
+});
+```
+
+`toEqual` recursively checks every field of an object or array.
+
+You can also test for the opposite of a matcher:
+
+```js
+test('adding positive numbers is not zero', () => {
+ for (let a = 1; a < 10; a++) {
+ for (let b = 1; b < 10; b++) {
+ expect(a + b).not.toBe(0);
+ }
+ }
+});
+```
+
+## Truthiness
+
+In tests, you sometimes need to distinguish between `undefined`, `null`, and `false`, but you sometimes do not want to treat these differently. Jest contains helpers that let you be explicit about what you want.
+
+- `toBeNull` matches only `null`
+- `toBeUndefined` matches only `undefined`
+- `toBeDefined` is the opposite of `toBeUndefined`
+- `toBeTruthy` matches anything that an `if` statement treats as true
+- `toBeFalsy` matches anything that an `if` statement treats as false
+
+For example:
+
+```js
+test('null', () => {
+ const n = null;
+ expect(n).toBeNull();
+ expect(n).toBeDefined();
+ expect(n).not.toBeUndefined();
+ expect(n).not.toBeTruthy();
+ expect(n).toBeFalsy();
+});
+
+test('zero', () => {
+ const z = 0;
+ expect(z).not.toBeNull();
+ expect(z).toBeDefined();
+ expect(z).not.toBeUndefined();
+ expect(z).not.toBeTruthy();
+ expect(z).toBeFalsy();
+});
+```
+
+You should use the matcher that most precisely corresponds to what you want your code to be doing.
+
+## Numbers
+
+Most ways of comparing numbers have matcher equivalents.
+
+```js
+test('two plus two', () => {
+ const value = 2 + 2;
+ expect(value).toBeGreaterThan(3);
+ expect(value).toBeGreaterThanOrEqual(3.5);
+ expect(value).toBeLessThan(5);
+ expect(value).toBeLessThanOrEqual(4.5);
+
+ // toBe and toEqual are equivalent for numbers
+ expect(value).toBe(4);
+ expect(value).toEqual(4);
+});
+```
+
+For floating point equality, use `toBeCloseTo` instead of `toEqual`, because you don't want a test to depend on a tiny rounding error.
+
+```js
+test('adding floating point numbers', () => {
+ const value = 0.1 + 0.2;
+ //expect(value).toBe(0.3); This won't work because of rounding error
+ expect(value).toBeCloseTo(0.3); // This works.
+});
+```
+
+## Strings
+
+You can check strings against regular expressions with `toMatch`:
+
+```js
+test('there is no I in team', () => {
+ expect('team').not.toMatch(/I/);
+});
+
+test('but there is a "stop" in Christoph', () => {
+ expect('Christoph').toMatch(/stop/);
+});
+```
+
+## Arrays and iterables
+
+You can check if an array or iterable contains a particular item using `toContain`:
+
+```js
+const shoppingList = [
+ 'diapers',
+ 'kleenex',
+ 'trash bags',
+ 'paper towels',
+ 'milk',
+];
+
+test('the shopping list has milk on it', () => {
+ expect(shoppingList).toContain('milk');
+ expect(new Set(shoppingList)).toContain('milk');
+});
+```
+
+## Exceptions
+
+If you want to test whether a particular function throws an error when it's called, use `toThrow`.
+
+```js
+function compileAndroidCode() {
+ throw new Error('you are using the wrong JDK');
+}
+
+test('compiling android goes as expected', () => {
+ expect(() => compileAndroidCode()).toThrow();
+ expect(() => compileAndroidCode()).toThrow(Error);
+
+ // You can also use the exact error message or a regexp
+ expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');
+ expect(() => compileAndroidCode()).toThrow(/JDK/);
+});
+```
+
+> Note: the function that throws an exception needs to be invoked within a wrapping function otherwise the `toThrow` assertion will fail.
+
+## And More
+
+This is just a taste. For a complete list of matchers, check out the [reference docs](ExpectAPI.md).
+
+Once you've learned about the matchers that are available, a good next step is to check out how Jest lets you [test asynchronous code](TestingAsyncCode.md).
diff --git a/website/versioned_docs/version-27.4/WatchPlugins.md b/website/versioned_docs/version-27.4/WatchPlugins.md
new file mode 100644
index 000000000000..bcf2991083f1
--- /dev/null
+++ b/website/versioned_docs/version-27.4/WatchPlugins.md
@@ -0,0 +1,229 @@
+---
+id: watch-plugins
+title: Watch Plugins
+---
+
+The Jest watch plugin system provides a way to hook into specific parts of Jest and to define watch mode menu prompts that execute code on key press. Combined, these features allow you to develop interactive experiences custom for your workflow.
+
+## Watch Plugin Interface
+
+```javascript
+class MyWatchPlugin {
+ // Add hooks to Jest lifecycle events
+ apply(jestHooks) {}
+
+ // Get the prompt information for interactive plugins
+ getUsageInfo(globalConfig) {}
+
+ // Executed when the key from `getUsageInfo` is input
+ run(globalConfig, updateConfigAndRun) {}
+}
+```
+
+## Hooking into Jest
+
+To connect your watch plugin to Jest, add its path under `watchPlugins` in your Jest configuration:
+
+```javascript title="jest.config.js"
+module.exports = {
+ // ...
+ watchPlugins: ['path/to/yourWatchPlugin'],
+};
+```
+
+Custom watch plugins can add hooks to Jest events. These hooks can be added either with or without having an interactive key in the watch mode menu.
+
+### `apply(jestHooks)`
+
+Jest hooks can be attached by implementing the `apply` method. This method receives a `jestHooks` argument that allows the plugin to hook into specific parts of the lifecycle of a test run.
+
+```javascript
+class MyWatchPlugin {
+ apply(jestHooks) {}
+}
+```
+
+Below are the hooks available in Jest.
+
+#### `jestHooks.shouldRunTestSuite(testSuiteInfo)`
+
+Returns a boolean (or `Promise` for handling asynchronous operations) to specify if a test should be run or not.
+
+For example:
+
+```javascript
+class MyWatchPlugin {
+ apply(jestHooks) {
+ jestHooks.shouldRunTestSuite(testSuiteInfo => {
+ return testSuiteInfo.testPath.includes('my-keyword');
+ });
+
+ // or a promise
+ jestHooks.shouldRunTestSuite(testSuiteInfo => {
+ return Promise.resolve(testSuiteInfo.testPath.includes('my-keyword'));
+ });
+ }
+}
+```
+
+#### `jestHooks.onTestRunComplete(results)`
+
+Gets called at the end of every test run. It has the test results as an argument.
+
+For example:
+
+```javascript
+class MyWatchPlugin {
+ apply(jestHooks) {
+ jestHooks.onTestRunComplete(results => {
+ this._hasSnapshotFailure = results.snapshot.failure;
+ });
+ }
+}
+```
+
+#### `jestHooks.onFileChange({projects})`
+
+Gets called whenever there is a change in the file system
+
+- `projects: Array`: Includes all the test paths that Jest is watching.
+
+For example:
+
+```javascript
+class MyWatchPlugin {
+ apply(jestHooks) {
+ jestHooks.onFileChange(({projects}) => {
+ this._projects = projects;
+ });
+ }
+}
+```
+
+## Watch Menu Integration
+
+Custom watch plugins can also add or override functionality to the watch menu by specifying a key/prompt pair in `getUsageInfo` method and a `run` method for the execution of the key.
+
+### `getUsageInfo(globalConfig)`
+
+To add a key to the watch menu, implement the `getUsageInfo` method, returning a key and the prompt:
+
+```javascript
+class MyWatchPlugin {
+ getUsageInfo(globalConfig) {
+ return {
+ key: 's',
+ prompt: 'do something',
+ };
+ }
+}
+```
+
+This will add a line in the watch mode menu _(`› Press s to do something.`)_
+
+```text
+Watch Usage
+ › Press p to filter by a filename regex pattern.
+ › Press t to filter by a test name regex pattern.
+ › Press q to quit watch mode.
+ › Press s to do something. // <-- This is our plugin
+ › Press Enter to trigger a test run.
+```
+
+**Note**: If the key for your plugin already exists as a default key, your plugin will override that key.
+
+### `run(globalConfig, updateConfigAndRun)`
+
+To handle key press events from the key returned by `getUsageInfo`, you can implement the `run` method. This method returns a `Promise` that can be resolved when the plugin wants to return control to Jest. The `boolean` specifies if Jest should rerun the tests after it gets the control back.
+
+- `globalConfig`: A representation of Jest's current global configuration
+- `updateConfigAndRun`: Allows you to trigger a test run while the interactive plugin is running.
+
+```javascript
+class MyWatchPlugin {
+ run(globalConfig, updateConfigAndRun) {
+ // do something.
+ }
+}
+```
+
+**Note**: If you do call `updateConfigAndRun`, your `run` method should not resolve to a truthy value, as that would trigger a double-run.
+
+#### Authorized configuration keys
+
+For stability and safety reasons, only part of the global configuration keys can be updated with `updateConfigAndRun`. The current white list is as follows:
+
+- [`bail`](configuration#bail-number--boolean)
+- [`changedSince`](cli#--changedsince)
+- [`collectCoverage`](configuration#collectcoverage-boolean)
+- [`collectCoverageFrom`](configuration#collectcoveragefrom-array)
+- [`collectCoverageOnlyFrom`](configuration#collectcoverageonlyfrom-array)
+- [`coverageDirectory`](configuration#coveragedirectory-string)
+- [`coverageReporters`](configuration#coveragereporters-arraystring)
+- [`notify`](configuration#notify-boolean)
+- [`notifyMode`](configuration#notifymode-string)
+- [`onlyFailures`](configuration#onlyfailures-boolean)
+- [`reporters`](configuration#reporters-arraymodulename--modulename-options)
+- [`testNamePattern`](cli#--testnamepatternregex)
+- [`testPathPattern`](cli#--testpathpatternregex)
+- [`updateSnapshot`](cli#--updatesnapshot)
+- [`verbose`](configuration#verbose-boolean)
+
+## Customization
+
+Plugins can be customized via your Jest configuration.
+
+```javascript title="jest.config.js"
+module.exports = {
+ // ...
+ watchPlugins: [
+ [
+ 'path/to/yourWatchPlugin',
+ {
+ key: 'k', // <- your custom key
+ prompt: 'show a custom prompt',
+ },
+ ],
+ ],
+};
+```
+
+Recommended config names:
+
+- `key`: Modifies the plugin key.
+- `prompt`: Allows user to customize the text in the plugin prompt.
+
+If the user provided a custom configuration, it will be passed as an argument to the plugin constructor.
+
+```javascript
+class MyWatchPlugin {
+ constructor({config}) {}
+}
+```
+
+## Choosing a good key
+
+Jest allows third-party plugins to override some of its built-in feature keys, but not all. Specifically, the following keys are **not overwritable** :
+
+- `c` (clears filter patterns)
+- `i` (updates non-matching snapshots interactively)
+- `q` (quits)
+- `u` (updates all non-matching snapshots)
+- `w` (displays watch mode usage / available actions)
+
+The following keys for built-in functionality **can be overwritten** :
+
+- `p` (test filename pattern)
+- `t` (test name pattern)
+
+Any key not used by built-in functionality can be claimed, as you would expect. Try to avoid using keys that are difficult to obtain on various keyboards (e.g. `é`, `€`), or not visible by default (e.g. many Mac keyboards do not have visual hints for characters such as `|`, `\`, `[`, etc.)
+
+### When a conflict happens
+
+Should your plugin attempt to overwrite a reserved key, Jest will error out with a descriptive message, something like:
+
+> Watch plugin YourFaultyPlugin attempted to register key `q`, that is reserved internally for quitting watch mode. Please change the configuration key for this plugin.
+
+Third-party plugins are also forbidden to overwrite a key reserved already by another third-party plugin present earlier in the configured plugins list (`watchPlugins` array setting). When this happens, you’ll also get an error message that tries to help you fix that:
+
+> Watch plugins YourFaultyPlugin and TheirFaultyPlugin both attempted to register key `x`. Please change the key configuration for one of the conflicting plugins to avoid overlap.
diff --git a/website/versioned_docs/version-27.4/Webpack.md b/website/versioned_docs/version-27.4/Webpack.md
new file mode 100644
index 000000000000..842c046f8b1c
--- /dev/null
+++ b/website/versioned_docs/version-27.4/Webpack.md
@@ -0,0 +1,221 @@
+---
+id: webpack
+title: Using with webpack
+---
+
+Jest can be used in projects that use [webpack](https://webpack.js.org/) to manage assets, styles, and compilation. webpack _does_ offer some unique challenges over other tools because it integrates directly with your application to allow managing stylesheets, assets like images and fonts, along with the expansive ecosystem of compile-to-JavaScript languages and tools.
+
+## A webpack example
+
+Let's start with a common sort of webpack config file and translate it to a Jest setup.
+
+```js title="webpack.config.js"
+module.exports = {
+ module: {
+ loaders: [
+ {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
+ {loader: 'style-loader!css-loader', test: /\.css$/},
+ {loader: 'url-loader', test: /\.gif$/},
+ {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
+ ],
+ },
+ resolve: {
+ alias: {
+ config$: './configs/app-config.js',
+ react: './vendor/react-master',
+ },
+ extensions: ['', 'js', 'jsx'],
+ modules: [
+ 'node_modules',
+ 'bower_components',
+ 'shared',
+ '/shared/vendor/modules',
+ ],
+ },
+};
+```
+
+If you have JavaScript files that are transformed by Babel, you can [enable support for Babel](GettingStarted.md#using-babel) by installing the `babel-jest` plugin. Non-Babel JavaScript transformations can be handled with Jest's [`transform`](Configuration.md#transform-objectstring-pathtotransformer--pathtotransformer-object) config option.
+
+### Handling Static Assets
+
+Next, let's configure Jest to gracefully handle asset files such as stylesheets and images. Usually, these files aren't particularly useful in tests so we can safely mock them out. However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.
+
+```json title="package.json"
+{
+ "jest": {
+ "moduleNameMapper": {
+ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
+ "\\.(css|less)$": "/__mocks__/styleMock.js"
+ }
+ }
+}
+```
+
+And the mock files themselves:
+
+```js title="__mocks__/styleMock.js"
+module.exports = {};
+```
+
+```js title="__mocks__/fileMock.js"
+module.exports = 'test-file-stub';
+```
+
+### Mocking CSS Modules
+
+You can use an [ES6 Proxy](https://github.com/keyanzhang/identity-obj-proxy) to mock [CSS Modules](https://github.com/css-modules/css-modules):
+
+```bash
+yarn add --dev identity-obj-proxy
+```
+
+Then all your className lookups on the styles object will be returned as-is (e.g., `styles.foobar === 'foobar'`). This is pretty handy for React [Snapshot Testing](SnapshotTesting.md).
+
+```json title="package.json (for CSS Modules)"
+{
+ "jest": {
+ "moduleNameMapper": {
+ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
+ "\\.(css|less)$": "identity-obj-proxy"
+ }
+ }
+}
+```
+
+> Notice that Proxy is enabled in Node 6 by default. If you are not on Node 6 yet, make sure you invoke Jest using `node --harmony_proxies node_modules/.bin/jest`.
+
+If `moduleNameMapper` cannot fulfill your requirements, you can use Jest's [`transform`](Configuration.md#transform-objectstring-pathtotransformer--pathtotransformer-object) config option to specify how assets are transformed. For example, a transformer that returns the basename of a file (such that `require('logo.jpg');` returns `'logo'`) can be written as:
+
+```js title="fileTransformer.js"
+const path = require('path');
+
+module.exports = {
+ process(src, filename, config, options) {
+ return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+ },
+};
+```
+
+```json title="package.json (for custom transformers and CSS Modules)"
+{
+ "jest": {
+ "moduleNameMapper": {
+ "\\.(css|less)$": "identity-obj-proxy"
+ },
+ "transform": {
+ "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/fileTransformer.js"
+ }
+ }
+}
+```
+
+We've told Jest to ignore files matching a stylesheet or image extension, and instead, require our mock files. You can adjust the regular expression to match the file types your webpack config handles.
+
+_Note: if you are using babel-jest with additional code preprocessors, you have to explicitly define babel-jest as a transformer for your JavaScript code to map `.js` files to the babel-jest module._
+
+```json
+"transform": {
+ "\\.js$": "babel-jest",
+ "\\.css$": "custom-transformer",
+ ...
+}
+```
+
+### Configuring Jest to find our files
+
+Now that Jest knows how to process our files, we need to tell it how to _find_ them. For webpack's `modulesDirectories`, and `extensions` options there are direct analogs in Jest's `moduleDirectories` and `moduleFileExtensions` options.
+
+```json title="package.json"
+{
+ "jest": {
+ "moduleFileExtensions": ["js", "jsx"],
+ "moduleDirectories": ["node_modules", "bower_components", "shared"],
+
+ "moduleNameMapper": {
+ "\\.(css|less)$": "/__mocks__/styleMock.js",
+ "\\.(gif|ttf|eot|svg)$": "/__mocks__/fileMock.js"
+ }
+ }
+}
+```
+
+> Note: `` is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your `package.json` is located unless you specify a custom `rootDir` option in your configuration.
+
+Similarly, webpack's `resolve.root` option functions like setting the `NODE_PATH` env variable, which you can set, or make use of the `modulePaths` option.
+
+```json title="package.json"
+{
+ "jest": {
+ "modulePaths": ["/shared/vendor/modules"],
+ "moduleFileExtensions": ["js", "jsx"],
+ "moduleDirectories": ["node_modules", "bower_components", "shared"],
+ "moduleNameMapper": {
+ "\\.(css|less)$": "/__mocks__/styleMock.js",
+ "\\.(gif|ttf|eot|svg)$": "/__mocks__/fileMock.js"
+ }
+ }
+}
+```
+
+And finally, we have to handle the webpack `alias`. For that, we can make use of the `moduleNameMapper` option again.
+
+```json title="package.json"
+{
+ "jest": {
+ "modulePaths": ["/shared/vendor/modules"],
+ "moduleFileExtensions": ["js", "jsx"],
+ "moduleDirectories": ["node_modules", "bower_components", "shared"],
+
+ "moduleNameMapper": {
+ "\\.(css|less)$": "/__mocks__/styleMock.js",
+ "\\.(gif|ttf|eot|svg)$": "/__mocks__/fileMock.js",
+
+ "^react(.*)$": "/vendor/react-master$1",
+ "^config$": "/configs/app-config.js"
+ }
+ }
+}
+```
+
+That's it! webpack is a complex and flexible tool, so you may have to make some adjustments to handle your specific application's needs. Luckily for most projects, Jest should be more than flexible enough to handle your webpack config.
+
+> Note: For more complex webpack configurations, you may also want to investigate projects such as: [babel-plugin-webpack-loaders](https://github.com/istarkov/babel-plugin-webpack-loaders).
+
+## Using with webpack 2
+
+webpack 2 offers native support for ES modules. However, Jest runs in Node, and thus requires ES modules to be transpiled to CommonJS modules. As such, if you are using webpack 2, you most likely will want to configure Babel to transpile ES modules to CommonJS modules only in the `test` environment.
+
+```json
+// .babelrc
+{
+ "presets": [["env", {"modules": false}]],
+
+ "env": {
+ "test": {
+ "plugins": ["transform-es2015-modules-commonjs"]
+ }
+ }
+}
+```
+
+> Note: Jest caches files to speed up test execution. If you updated .babelrc and Jest is still not working, try running Jest with `--no-cache`.
+
+If you use dynamic imports (`import('some-file.js').then(module => ...)`), you need to enable the `dynamic-import-node` plugin.
+
+```json
+// .babelrc
+{
+ "presets": [["env", {"modules": false}]],
+
+ "plugins": ["syntax-dynamic-import"],
+
+ "env": {
+ "test": {
+ "plugins": ["dynamic-import-node"]
+ }
+ }
+}
+```
+
+For an example of how to use Jest with Webpack with React, Redux, and Node, you can view one [here](https://github.com/jenniferabowd/jest_react_redux_node_webpack_complex_example).
diff --git a/website/versioned_sidebars/version-27.4-sidebars.json b/website/versioned_sidebars/version-27.4-sidebars.json
new file mode 100644
index 000000000000..d40f62713a60
--- /dev/null
+++ b/website/versioned_sidebars/version-27.4-sidebars.json
@@ -0,0 +1,47 @@
+{
+ "docs": {
+ "Introduction": [
+ "getting-started",
+ "using-matchers",
+ "asynchronous",
+ "setup-teardown",
+ "mock-functions",
+ "jest-platform",
+ "jest-community",
+ "more-resources"
+ ],
+ "Guides": [
+ "snapshot-testing",
+ "tutorial-async",
+ "timer-mocks",
+ "manual-mocks",
+ "es6-class-mocks",
+ "bypassing-module-mocks",
+ "ecmascript-modules",
+ "webpack",
+ "puppeteer",
+ "mongodb",
+ "dynamodb",
+ "tutorial-jquery",
+ "watch-plugins",
+ "migration-guide",
+ "troubleshooting",
+ "architecture"
+ ],
+ "Framework Guides": [
+ "tutorial-react",
+ "tutorial-react-native",
+ "testing-frameworks"
+ ]
+ },
+ "api": [
+ "api",
+ "expect",
+ "mock-function-api",
+ "jest-object",
+ "configuration",
+ "cli",
+ "environment-variables",
+ "code-transformation"
+ ]
+}
diff --git a/website/versions.json b/website/versions.json
index 56caffdb0125..84b911cfdab2 100644
--- a/website/versions.json
+++ b/website/versions.json
@@ -1,4 +1,5 @@
[
+ "27.4",
"27.2",
"27.1",
"27.0",