docs: improve TypeScript Usage documentation with few additional notes (#13601)

Author: mrazauskas

docs/GettingStarted.md

@@ -168,7 +168,13 @@ In order for Jest to transpile TypeScript with `ts-jest`, you may also need to c
 
 There are two ways to have [Jest global APIs](GlobalAPI.md) typed for test files written in TypeScript.
 
-You can use type definitions which ships with Jest and will update each time you update Jest. Simply import the APIs from `@jest/globals` package:
+You can use type definitions which ships with Jest and will update each time you update Jest. Install the `@jest/globals` package:
+
+```bash npm2yarn
+npm install --save-dev @jest/globals
+```
+
+And import the APIs from it:
 
 ```ts title="sum.test.ts"
 import {describe, expect, test} from '@jest/globals';

docs/GlobalAPI.md

@@ -973,6 +973,8 @@ test.todo('add should be associative');
 
 ## TypeScript Usage
 
+<TypeScriptExamplesNote />
+
 ### `.each`
 
 The `.each` modifier offers few different ways to define a table of the test cases. Some of the APIs have caveats related with the type inference of the arguments which are passed to `describe` or `test` callback functions. Let's take a look at each of them.

docs/MockFunctionAPI.md

@@ -517,11 +517,7 @@ test('async test', async () => {
 
 ## TypeScript Usage
 
-:::tip
-
-Please consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
-
-:::
+<TypeScriptExamplesNote />
 
 ### `jest.fn(implementation?)`
 

docs/_TypeScriptExamplesNote.md

@@ -6,4 +6,6 @@ The TypeScript examples from this page will only work as documented if you expli
 import {expect, jest, test} from '@jest/globals';
 ```
 
+Consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
+
 :::

website/versioned_docs/version-29.0/GettingStarted.md

@@ -164,7 +164,13 @@ In order for Jest to transpile TypeScript with `ts-jest`, you may also need to c
 
 There are two ways to have [Jest global APIs](GlobalAPI.md) typed for test files written in TypeScript.
 
-You can use type definitions which ships with Jest and will update each time you update Jest. Simply import the APIs from `@jest/globals` package:
+You can use type definitions which ships with Jest and will update each time you update Jest. Install the `@jest/globals` package:
+
+```bash npm2yarn
+npm install --save-dev @jest/globals
+```
+
+And import the APIs from it:
 
 ```ts title="sum.test.ts"
 import {describe, expect, test} from '@jest/globals';

website/versioned_docs/version-29.0/GlobalAPI.md

@@ -973,6 +973,8 @@ test.todo('add should be associative');
 
 ## TypeScript Usage
 
+<TypeScriptExamplesNote />
+
 ### `.each`
 
 The `.each` modifier offers few different ways to define a table of the test cases. Some of the APIs have caveats related with the type inference of the arguments which are passed to `describe` or `test` callback functions. Let's take a look at each of them.

website/versioned_docs/version-29.0/MockFunctionAPI.md

@@ -480,11 +480,7 @@ test('async test', async () => {
 
 ## TypeScript Usage
 
-:::tip
-
-Please consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
-
-:::
+<TypeScriptExamplesNote />
 
 ### `jest.fn(implementation?)`
 

website/versioned_docs/version-29.0/_TypeScriptExamplesNote.md

@@ -6,4 +6,6 @@ The TypeScript examples from this page will only work as documented if you expli
 import {expect, jest, test} from '@jest/globals';
 ```
 
+Consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
+
 :::

website/versioned_docs/version-29.1/GettingStarted.md

@@ -168,7 +168,13 @@ In order for Jest to transpile TypeScript with `ts-jest`, you may also need to c
 
 There are two ways to have [Jest global APIs](GlobalAPI.md) typed for test files written in TypeScript.
 
-You can use type definitions which ships with Jest and will update each time you update Jest. Simply import the APIs from `@jest/globals` package:
+You can use type definitions which ships with Jest and will update each time you update Jest. Install the `@jest/globals` package:
+
+```bash npm2yarn
+npm install --save-dev @jest/globals
+```
+
+And import the testing APIs from it:
 
 ```ts title="sum.test.ts"
 import {describe, expect, test} from '@jest/globals';

website/versioned_docs/version-29.1/GlobalAPI.md

@@ -973,6 +973,8 @@ test.todo('add should be associative');
 
 ## TypeScript Usage
 
+<TypeScriptExamplesNote />
+
 ### `.each`
 
 The `.each` modifier offers few different ways to define a table of the test cases. Some of the APIs have caveats related with the type inference of the arguments which are passed to `describe` or `test` callback functions. Let's take a look at each of them.

website/versioned_docs/version-29.1/MockFunctionAPI.md

@@ -517,11 +517,7 @@ test('async test', async () => {
 
 ## TypeScript Usage
 
-:::tip
-
-Please consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
-
-:::
+<TypeScriptExamplesNote />
 
 ### `jest.fn(implementation?)`
 

website/versioned_docs/version-29.1/_TypeScriptExamplesNote.md

@@ -6,4 +6,6 @@ The TypeScript examples from this page will only work as documented if you expli
 import {expect, jest, test} from '@jest/globals';
 ```
 
+Consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
+
 :::

website/versioned_docs/version-29.2/GettingStarted.md

@@ -168,7 +168,13 @@ In order for Jest to transpile TypeScript with `ts-jest`, you may also need to c
 
 There are two ways to have [Jest global APIs](GlobalAPI.md) typed for test files written in TypeScript.
 
-You can use type definitions which ships with Jest and will update each time you update Jest. Simply import the APIs from `@jest/globals` package:
+You can use type definitions which ships with Jest and will update each time you update Jest. Install the `@jest/globals` package:
+
+```bash npm2yarn
+npm install --save-dev @jest/globals
+```
+
+And import the testing APIs from it:
 
 ```ts title="sum.test.ts"
 import {describe, expect, test} from '@jest/globals';

website/versioned_docs/version-29.2/GlobalAPI.md

@@ -973,6 +973,8 @@ test.todo('add should be associative');
 
 ## TypeScript Usage
 
+<TypeScriptExamplesNote />
+
 ### `.each`
 
 The `.each` modifier offers few different ways to define a table of the test cases. Some of the APIs have caveats related with the type inference of the arguments which are passed to `describe` or `test` callback functions. Let's take a look at each of them.

website/versioned_docs/version-29.2/MockFunctionAPI.md

@@ -517,11 +517,7 @@ test('async test', async () => {
 
 ## TypeScript Usage
 
-:::tip
-
-Please consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
-
-:::
+<TypeScriptExamplesNote />
 
 ### `jest.fn(implementation?)`
 

website/versioned_docs/version-29.2/_TypeScriptExamplesNote.md

@@ -6,4 +6,6 @@ The TypeScript examples from this page will only work as documented if you expli
 import {expect, jest, test} from '@jest/globals';
 ```
 
+Consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
+
 :::

website/versioned_docs/version-29.3/GettingStarted.md

@@ -168,7 +168,13 @@ In order for Jest to transpile TypeScript with `ts-jest`, you may also need to c
 
 There are two ways to have [Jest global APIs](GlobalAPI.md) typed for test files written in TypeScript.
 
-You can use type definitions which ships with Jest and will update each time you update Jest. Simply import the APIs from `@jest/globals` package:
+You can use type definitions which ships with Jest and will update each time you update Jest. Install the `@jest/globals` package:
+
+```bash npm2yarn
+npm install --save-dev @jest/globals
+```
+
+And import the testing APIs from it:
 
 ```ts title="sum.test.ts"
 import {describe, expect, test} from '@jest/globals';

website/versioned_docs/version-29.3/GlobalAPI.md

@@ -973,6 +973,8 @@ test.todo('add should be associative');
 
 ## TypeScript Usage
 
+<TypeScriptExamplesNote />
+
 ### `.each`
 
 The `.each` modifier offers few different ways to define a table of the test cases. Some of the APIs have caveats related with the type inference of the arguments which are passed to `describe` or `test` callback functions. Let's take a look at each of them.

website/versioned_docs/version-29.3/MockFunctionAPI.md

@@ -517,11 +517,7 @@ test('async test', async () => {
 
 ## TypeScript Usage
 
-:::tip
-
-Please consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
-
-:::
+<TypeScriptExamplesNote />
 
 ### `jest.fn(implementation?)`
 

website/versioned_docs/version-29.3/_TypeScriptExamplesNote.md

@@ -6,4 +6,6 @@ The TypeScript examples from this page will only work as documented if you expli
 import {expect, jest, test} from '@jest/globals';
 ```
 
+Consult the [Getting Started](GettingStarted.md#using-typescript) guide for details on how to setup Jest with TypeScript.
+
 :::