From 91a28024369e2039f51c8f726f8a3532c885a9bf Mon Sep 17 00:00:00 2001 From: ahnpnl Date: Fri, 12 Jul 2024 10:39:51 +0200 Subject: [PATCH] docs: use create preset utils in doc --- website/docs/getting-started/options.md | 45 ++------------ website/docs/getting-started/presets.md | 25 +++----- website/docs/guides/esm-support.md | 58 ++++--------------- website/docs/guides/react-native.md | 35 +++++------ .../version-29.2/getting-started/options.md | 45 ++------------ .../version-29.2/getting-started/presets.md | 25 +++----- .../version-29.2/guides/esm-support.md | 58 ++++--------------- .../version-29.2/guides/react-native.md | 35 +++++------ 8 files changed, 76 insertions(+), 250 deletions(-) diff --git a/website/docs/getting-started/options.md b/website/docs/getting-started/options.md index 65b8f12311..cb07b2977e 100644 --- a/website/docs/getting-started/options.md +++ b/website/docs/getting-started/options.md @@ -16,57 +16,22 @@ or through a `jest.config.js`, or `jest.config.ts` file. ```js tab // jest.config.js +const { createDefaultPreset } = require('ts-jest') + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - // ts-jest configuration goes here - }, - ], - }, + ...createDefaultPreset(), } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { createDefaultPreset, JestConfigWithTsJest } from 'ts-jest' const jestConfig: JestConfigWithTsJest = { // [...] - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - // ts-jest configuration goes here - }, - ], - }, -} -``` - -```JSON tab -// package.json -{ - // [...] - "jest": { - "transform": { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - "^.+\\.tsx?$": [ - "ts-jest", - { - // ts-jest configuration goes here - } - ] - } - } + ...createDefaultPreset(), } ``` diff --git a/website/docs/getting-started/presets.md b/website/docs/getting-started/presets.md index 1c42fb2844..20911659bd 100644 --- a/website/docs/getting-started/presets.md +++ b/website/docs/getting-started/presets.md @@ -41,42 +41,35 @@ using TypeScript with Jest (assuming you added `ts-jest` to your `devDependencie ```js tab // jest.config.js +const { createDefaultPreset } = require('ts-jest') + +const defaultPreset = createDefaultPreset() + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] // Replace `ts-jest` with the preset you want to use // from the above list - preset: 'ts-jest', + ...defaultPreset, } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { type JestConfigWithTsJest, createDefaultPreset } from 'ts-jest' + +const defaultPreset = createDefaultPreset() const jestConfig: JestConfigWithTsJest = { // [...] // Replace `ts-jest` with the preset you want to use // from the above list - preset: 'ts-jest', + ...defaultPreset, } export default jestConfig ``` -```JSON tab -// package.json - -{ - // [...] - "jest": { - // Replace `ts-jest` with the preset you want to use - // from the above list - "preset": "ts-jest" - } -} -``` - **Note:** presets use `testMatch`, like Jest does in its defaults. If you want to use `testRegex` instead in your configuration, you MUST set `testMatch` to `null` or Jest will bail. ### Advanced diff --git a/website/docs/guides/esm-support.md b/website/docs/guides/esm-support.md index b155442dd1..0726688741 100644 --- a/website/docs/guides/esm-support.md +++ b/website/docs/guides/esm-support.md @@ -104,74 +104,37 @@ Starting from **v28.0.0**, `ts-jest` will gradually switch to `esbuild`/`swc` to ```js tab // jest.config.js +const { createDefaultEsmPreset } = require('ts-jest') + +const defaultEsmPreset = createDefaultEsmPreset() + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] - preset: 'ts-jest/presets/default-esm', // or other ESM presets + ...defaultEsmPreset, moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1', }, - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - useESM: true, - }, - ], - }, } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest' + +const defaultEsmPreset = createDefaultEsmPreset() const jestConfig: JestConfigWithTsJest = { // [...] - preset: 'ts-jest/presets/default-esm', // or other ESM presets + ...defaultEsmPreset, moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1', }, - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - useESM: true, - }, - ], - }, } export default jestConfig ``` -```JSON tab -// package.json -{ - // [...] - "jest": { - "preset": "ts-jest/presets/default-esm", // or other ESM presets, - "moduleNameMapper": { - "^(\\.{1,2}/.*)\\.js$": "$1" - }, - "transform": { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - "^.+\\.tsx?$": [ - "ts-jest", - { - "useESM": true - } - ] - } - } -} -``` - #### Support `.mts` extension To work with `.mts` extension, besides the requirement to run Jest and `ts-jest` in ESM mode, there are a few extra requirements to be met: @@ -184,9 +147,8 @@ To work with `.mts` extension, besides the requirement to run Jest and `ts-jest` // tsconfig.spec.json { "compilerOptions": { - "module": "Node16", // or "NodeNext" + "module": "ESNext", // or ES2015/ES2020/ES2022 "target": "ESNext", - "moduleResolution": "Node16", // or "NodeNext" "esModuleInterop": true } } diff --git a/website/docs/guides/react-native.md b/website/docs/guides/react-native.md index 5814a93cfb..f0fb372415 100644 --- a/website/docs/guides/react-native.md +++ b/website/docs/guides/react-native.md @@ -50,40 +50,33 @@ In the same way that you moved Babel config, move Jest config from `jest` key of ```js tab // jest.config.js -const { defaults: tsjPreset } = require('ts-jest/presets') +const { createJsWithBabelPreset } = require('ts-jest') + +const jsWithBabelPreset = createJsWithBabelPreset({ + tsconfig: 'tsconfig.spec.json', + babelConfig: true, +}) /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { preset: 'react-native', - transform: { - '^.+\\.jsx$': 'babel-jest', - '^.+\\.tsx?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.spec.json', - }, - ], - }, + transform: jsWithBabelPreset.transform, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } ``` ```ts tab // jest.config.ts -import { defaults as tsjPreset } from 'ts-jest/presets' -import type { JestConfigWithTsJest } from 'ts-jest' +import { createJsWithBabelPreset, JestConfigWithTsJest } from 'ts-jest' + +const jsWithBabelPreset = createJsWithBabelPreset({ + tsconfig: 'tsconfig.spec.json', + babelConfig: true, +}) const jestConfig: JestConfigWithTsJest = { preset: 'react-native', - transform: { - '^.+\\.jsx$': 'babel-jest', - '^.+\\.tsx?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.spec.json', - }, - ], - }, + transform: jsWithBabelPreset.transform, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } diff --git a/website/versioned_docs/version-29.2/getting-started/options.md b/website/versioned_docs/version-29.2/getting-started/options.md index 65b8f12311..cb07b2977e 100644 --- a/website/versioned_docs/version-29.2/getting-started/options.md +++ b/website/versioned_docs/version-29.2/getting-started/options.md @@ -16,57 +16,22 @@ or through a `jest.config.js`, or `jest.config.ts` file. ```js tab // jest.config.js +const { createDefaultPreset } = require('ts-jest') + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - // ts-jest configuration goes here - }, - ], - }, + ...createDefaultPreset(), } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { createDefaultPreset, JestConfigWithTsJest } from 'ts-jest' const jestConfig: JestConfigWithTsJest = { // [...] - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - // ts-jest configuration goes here - }, - ], - }, -} -``` - -```JSON tab -// package.json -{ - // [...] - "jest": { - "transform": { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - "^.+\\.tsx?$": [ - "ts-jest", - { - // ts-jest configuration goes here - } - ] - } - } + ...createDefaultPreset(), } ``` diff --git a/website/versioned_docs/version-29.2/getting-started/presets.md b/website/versioned_docs/version-29.2/getting-started/presets.md index 1c42fb2844..20911659bd 100644 --- a/website/versioned_docs/version-29.2/getting-started/presets.md +++ b/website/versioned_docs/version-29.2/getting-started/presets.md @@ -41,42 +41,35 @@ using TypeScript with Jest (assuming you added `ts-jest` to your `devDependencie ```js tab // jest.config.js +const { createDefaultPreset } = require('ts-jest') + +const defaultPreset = createDefaultPreset() + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] // Replace `ts-jest` with the preset you want to use // from the above list - preset: 'ts-jest', + ...defaultPreset, } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { type JestConfigWithTsJest, createDefaultPreset } from 'ts-jest' + +const defaultPreset = createDefaultPreset() const jestConfig: JestConfigWithTsJest = { // [...] // Replace `ts-jest` with the preset you want to use // from the above list - preset: 'ts-jest', + ...defaultPreset, } export default jestConfig ``` -```JSON tab -// package.json - -{ - // [...] - "jest": { - // Replace `ts-jest` with the preset you want to use - // from the above list - "preset": "ts-jest" - } -} -``` - **Note:** presets use `testMatch`, like Jest does in its defaults. If you want to use `testRegex` instead in your configuration, you MUST set `testMatch` to `null` or Jest will bail. ### Advanced diff --git a/website/versioned_docs/version-29.2/guides/esm-support.md b/website/versioned_docs/version-29.2/guides/esm-support.md index b155442dd1..0726688741 100644 --- a/website/versioned_docs/version-29.2/guides/esm-support.md +++ b/website/versioned_docs/version-29.2/guides/esm-support.md @@ -104,74 +104,37 @@ Starting from **v28.0.0**, `ts-jest` will gradually switch to `esbuild`/`swc` to ```js tab // jest.config.js +const { createDefaultEsmPreset } = require('ts-jest') + +const defaultEsmPreset = createDefaultEsmPreset() + /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { // [...] - preset: 'ts-jest/presets/default-esm', // or other ESM presets + ...defaultEsmPreset, moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1', }, - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - useESM: true, - }, - ], - }, } ``` ```ts tab // jest.config.ts -import type { JestConfigWithTsJest } from 'ts-jest' +import { createDefaultEsmPreset, type JestConfigWithTsJest } from 'ts-jest' + +const defaultEsmPreset = createDefaultEsmPreset() const jestConfig: JestConfigWithTsJest = { // [...] - preset: 'ts-jest/presets/default-esm', // or other ESM presets + ...defaultEsmPreset, moduleNameMapper: { '^(\\.{1,2}/.*)\\.js$': '$1', }, - transform: { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - '^.+\\.tsx?$': [ - 'ts-jest', - { - useESM: true, - }, - ], - }, } export default jestConfig ``` -```JSON tab -// package.json -{ - // [...] - "jest": { - "preset": "ts-jest/presets/default-esm", // or other ESM presets, - "moduleNameMapper": { - "^(\\.{1,2}/.*)\\.js$": "$1" - }, - "transform": { - // '^.+\\.[tj]sx?$' to process ts,js,tsx,jsx with `ts-jest` - // '^.+\\.m?[tj]sx?$' to process ts,js,tsx,jsx,mts,mjs,mtsx,mjsx with `ts-jest` - "^.+\\.tsx?$": [ - "ts-jest", - { - "useESM": true - } - ] - } - } -} -``` - #### Support `.mts` extension To work with `.mts` extension, besides the requirement to run Jest and `ts-jest` in ESM mode, there are a few extra requirements to be met: @@ -184,9 +147,8 @@ To work with `.mts` extension, besides the requirement to run Jest and `ts-jest` // tsconfig.spec.json { "compilerOptions": { - "module": "Node16", // or "NodeNext" + "module": "ESNext", // or ES2015/ES2020/ES2022 "target": "ESNext", - "moduleResolution": "Node16", // or "NodeNext" "esModuleInterop": true } } diff --git a/website/versioned_docs/version-29.2/guides/react-native.md b/website/versioned_docs/version-29.2/guides/react-native.md index 5814a93cfb..f0fb372415 100644 --- a/website/versioned_docs/version-29.2/guides/react-native.md +++ b/website/versioned_docs/version-29.2/guides/react-native.md @@ -50,40 +50,33 @@ In the same way that you moved Babel config, move Jest config from `jest` key of ```js tab // jest.config.js -const { defaults: tsjPreset } = require('ts-jest/presets') +const { createJsWithBabelPreset } = require('ts-jest') + +const jsWithBabelPreset = createJsWithBabelPreset({ + tsconfig: 'tsconfig.spec.json', + babelConfig: true, +}) /** @type {import('ts-jest').JestConfigWithTsJest} */ module.exports = { preset: 'react-native', - transform: { - '^.+\\.jsx$': 'babel-jest', - '^.+\\.tsx?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.spec.json', - }, - ], - }, + transform: jsWithBabelPreset.transform, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], } ``` ```ts tab // jest.config.ts -import { defaults as tsjPreset } from 'ts-jest/presets' -import type { JestConfigWithTsJest } from 'ts-jest' +import { createJsWithBabelPreset, JestConfigWithTsJest } from 'ts-jest' + +const jsWithBabelPreset = createJsWithBabelPreset({ + tsconfig: 'tsconfig.spec.json', + babelConfig: true, +}) const jestConfig: JestConfigWithTsJest = { preset: 'react-native', - transform: { - '^.+\\.jsx$': 'babel-jest', - '^.+\\.tsx?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.spec.json', - }, - ], - }, + transform: jsWithBabelPreset.transform, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }