Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(devs-infra): add tabs for js/ts and shell #3807

Merged
merged 1 commit into from Sep 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 2 additions & 6 deletions website/docs/debugging.md
Expand Up @@ -17,14 +17,10 @@ export TS_JEST_LOG=ts-jest.log

**Windows**

Command Prompt (cmd)

```
```Command Prompt tab
set TS_JEST_LOG=ts-jest.log
```

PowerShell

```
```PowerShell tab
$env:TS_JEST_LOG = 'ts-jest.log'
```
18 changes: 3 additions & 15 deletions website/docs/getting-started/installation.md
Expand Up @@ -7,18 +7,10 @@ title: Installation

You can install `ts-jest` and dependencies all at once with one of the following commands.

#### NPM

```sh
```bash npm2yarn
npm install --save-dev jest typescript ts-jest @types/jest
```

#### Yarn

```sh
yarn add --dev jest typescript ts-jest @types/jest
```

:::tip

Tip: If you get an error with the following `npm` commands such as `npx: command not found`, you can replace `npx XXX` with `node node_modules/.bin/XXX` from the root of your project.
Expand All @@ -34,15 +26,11 @@ To make it transpile TypeScript with `ts-jest`, we will need to create a configu

`ts-jest` can create the configuration file for you automatically:

#### NPM

```sh
```npm tab
npx ts-jest config:init
```

#### Yarn

```sh
```Yarn tab
yarn ts-jest config:init
```

Expand Down
65 changes: 19 additions & 46 deletions website/docs/getting-started/options.md
Expand Up @@ -8,27 +8,8 @@ title: Options
All `ts-jest` specific options can be defined in Jest `transform` config object in the `package.json` file of your project,
or through a `jest.config.js`, or `jest.config.ts` file.

```json
// package.json
{
// [...]
"jest": {
"transform": {
"<regex_match_files>": [
"ts-jest",
{
// ts-jest configuration goes here
}
]
}
}
}
```

Or through JavaScript:

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -42,44 +23,36 @@ module.exports = {
}
```

:::tip
```ts tab
import type { JestConfigWithTsJest } from './types'

To utilize IDE suggestions, you can use `JSDoc` comments to provide suggested `ts-jest` configs for your Jest config:

```js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = config = {
const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
// ts-jest configuration goes here and your IDE will suggest which configs when typing
// ts-jest configuration goes here
},
],
},
}
```

:::

Or through TypeScript (if `ts-node` is installed):

```ts
// jest.config.ts
import type { JestConfigWithTsJest } from 'ts-jest'

const config: JestConfigWithTsJest = {
transform: {
'<regex_match_files>': [
'ts-jest',
{
// ts-jest configuration goes here
},
],
},
```JSON tab
{
// [...]
"jest": {
"transform": {
"<regex_match_files>": [
"ts-jest",
{
// ts-jest configuration goes here
}
]
}
}
}
export default config
```

:::important
Expand Down
59 changes: 51 additions & 8 deletions website/docs/getting-started/options/astTransformers.md
Expand Up @@ -16,8 +16,8 @@ The option is `astTransformers` and it allows ones to specify which 3 types of T

#### Basic Transformers

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -33,8 +33,27 @@ module.exports = {
}
```

```json
// OR package.json
```ts tab
import type { JestConfigWithTsJest } from './types'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
astTransformers: {
before: ['my-custom-transformer'],
},
},
],
},
}

export default jestConfig
```

```JSON tab
{
// [...]
"jest": {
Expand All @@ -54,8 +73,8 @@ module.exports = {

#### Configuring transformers with options

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -76,8 +95,32 @@ module.exports = {
}
```

```json
// OR package.json
```ts tab
import type { JestConfigWithTsJest } from './types'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
astTransformers: {
before: [
{
path: 'my-custom-transformer-that-needs-extra-opts',
options: {}, // extra options to pass to transformers here
},
],
},
},
],
},
}

export default jestConfig
```

```JSON tab
{
// [...]
"jest": {
Expand Down
106 changes: 91 additions & 15 deletions website/docs/getting-started/options/babelConfig.md
Expand Up @@ -14,8 +14,8 @@ The option is `babelConfig` and it works pretty much as the `tsconfig` option, e

#### Use default `babelrc` file

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -29,7 +29,25 @@ module.exports = {
}
```

```json
```ts tab
import type { JestConfigWithTsJest } from './types'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
babelConfig: true,
},
],
},
}

export default jestConfig
```

```JSON tab
// OR package.json
{
// [...]
Expand All @@ -50,8 +68,8 @@ module.exports = {

The path should be relative to the current working directory where you start Jest from. You can also use `\<rootDir>` in the path, or use an absolute path (this last one is strongly not recommended).

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -65,23 +83,25 @@ module.exports = {
}
```

```js
// OR jest.config.js with require for babelrc
module.exports = {
```ts tab
import type { JestConfigWithTsJest } from './types'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
babelConfig: require('./babelrc.test.js'),
babelConfig: 'babelrc.test.js',
},
],
},
}

export default jestConfig
```

```json
// OR package.json
```JSON tab
{
// [...]
"jest": {
Expand All @@ -97,12 +117,48 @@ module.exports = {
}
```

or importing directly the config file:

```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
babelConfig: require('./babelrc.test.js'),
},
],
},
}
```

```ts tab
import type { JestConfigWithTsJest } from './types'
import babelConfig from './babelrc.test.js'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
babelConfig,
},
],
},
}

export default jestConfig
```

#### Inline compiler options

Refer to the [Babel options](https://babeljs.io/docs/en/next/options) to know what can be used there.

```js
// jest.config.js
```js tab
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
// [...]
transform: {
Expand All @@ -119,8 +175,28 @@ module.exports = {
}
```

```json
// OR package.json
```ts tab
import type { JestConfigWithTsJest } from './types'

const jestConfig: JestConfigWithTsJest = {
// [...]
transform: {
'<regex_match_files>': [
'ts-jest',
{
babelConfig: {
comments: false,
plugins: ['@babel/plugin-transform-for-of'],
},
},
],
},
}

export default jestConfig
```

```JSON tab
{
// [...]
"jest": {
Expand Down