From 4a95c76c783b05b6e86be4f7bc12d468b25260d4 Mon Sep 17 00:00:00 2001
From: Ahn <anhpnnd@gmail.com>
Date: Sun, 18 Jul 2021 11:30:10 +0200
Subject: [PATCH] docs(devs-infra): update documentation for `react-native`
 (#2754)

---
 website/docs/guides/react-native.md           | 29 +++++++++++------
 .../version-26.5/guides/react-native.md       | 31 ++++++++++++-------
 .../version-27.0/guides/react-native.md       | 31 ++++++++++++-------
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/website/docs/guides/react-native.md b/website/docs/guides/react-native.md
index 3e173b53be..bc6eeb0111 100644
--- a/website/docs/guides/react-native.md
+++ b/website/docs/guides/react-native.md
@@ -18,6 +18,20 @@ module.exports = {
 }
 ```
 
+### TypeScript Configuration
+
+Create a new `tsconfig.spec.json` at the root of your project with the following content
+
+```json
+// tsconfig.spec.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
+```
+
 ### Jest config
 
 In the same way that you moved Babel config, move Jest config from `jest` key of `package.json` to `jest.config.js`. It should look like this:
@@ -27,19 +41,16 @@ In the same way that you moved Babel config, move Jest config from `jest` key of
 const { defaults: tsjPreset } = require('ts-jest/presets')
 
 module.exports = {
-  ...tsjPreset,
   preset: 'react-native',
-  transform: {
-    ...tsjPreset.transform,
-    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
   globals: {
     'ts-jest': {
-      babelConfig: true,
+      tsconfig: 'tsconfig.spec.json',
     },
   },
-  // This is the only part which you can keep
-  // from the above linked tutorial's config:
-  cacheDirectory: '.jest/cache',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 }
 ```
diff --git a/website/versioned_docs/version-26.5/guides/react-native.md b/website/versioned_docs/version-26.5/guides/react-native.md
index 3e173b53be..500e4e4373 100644
--- a/website/versioned_docs/version-26.5/guides/react-native.md
+++ b/website/versioned_docs/version-26.5/guides/react-native.md
@@ -18,28 +18,37 @@ module.exports = {
 }
 ```
 
+### TypeScript Configuration
+
+Create a new `tsconfig.spec.json` at the root of your project with the following content
+
+```json
+// tsconfig.spec.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
+```
+
 ### Jest config
 
 In the same way that you moved Babel config, move Jest config from `jest` key of `package.json` to `jest.config.js`. It should look like this:
 
 ```js
 // jest.config.js
-const { defaults: tsjPreset } = require('ts-jest/presets')
-
 module.exports = {
-  ...tsjPreset,
   preset: 'react-native',
-  transform: {
-    ...tsjPreset.transform,
-    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
   globals: {
     'ts-jest': {
-      babelConfig: true,
+      tsconfig: 'tsconfig.spec.json',
     },
   },
-  // This is the only part which you can keep
-  // from the above linked tutorial's config:
-  cacheDirectory: '.jest/cache',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 }
 ```
diff --git a/website/versioned_docs/version-27.0/guides/react-native.md b/website/versioned_docs/version-27.0/guides/react-native.md
index 3e173b53be..500e4e4373 100644
--- a/website/versioned_docs/version-27.0/guides/react-native.md
+++ b/website/versioned_docs/version-27.0/guides/react-native.md
@@ -18,28 +18,37 @@ module.exports = {
 }
 ```
 
+### TypeScript Configuration
+
+Create a new `tsconfig.spec.json` at the root of your project with the following content
+
+```json
+// tsconfig.spec.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
+```
+
 ### Jest config
 
 In the same way that you moved Babel config, move Jest config from `jest` key of `package.json` to `jest.config.js`. It should look like this:
 
 ```js
 // jest.config.js
-const { defaults: tsjPreset } = require('ts-jest/presets')
-
 module.exports = {
-  ...tsjPreset,
   preset: 'react-native',
-  transform: {
-    ...tsjPreset.transform,
-    '\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
   globals: {
     'ts-jest': {
-      babelConfig: true,
+      tsconfig: 'tsconfig.spec.json',
     },
   },
-  // This is the only part which you can keep
-  // from the above linked tutorial's config:
-  cacheDirectory: '.jest/cache',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 }
 ```