chore: use typescript-eslint to parse all files (#10722)

Author: SimenB

.eslintrc.js

@@ -18,7 +18,6 @@ module.exports = {
     {
       extends: ['plugin:@typescript-eslint/eslint-recommended'],
       files: ['*.ts', '*.tsx'],
-      parser: '@typescript-eslint/parser',
       plugins: ['@typescript-eslint/eslint-plugin', 'local'],
       rules: {
         '@typescript-eslint/array-type': ['error', {default: 'generic'}],
@@ -223,7 +222,7 @@ module.exports = {
       },
     },
   ],
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   plugins: ['markdown', 'import', 'prettier', 'eslint-comments'],
   rules: {
     'arrow-body-style': 'error',

docs/SnapshotTesting.md

@@ -11,7 +11,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp
 
 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/master/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/master/examples/snapshot/Link.react.js):
 
-```javascript
+```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Link from '../Link.react';
@@ -51,7 +51,7 @@ It's straightforward to spot when a snapshot test fails after a bug has been int
 
 One such situation can arise if we intentionally change the address the Link component in our example is pointing to.
 
-```javascript
+```tsx
 // Updated test case with a Link to a different address
 it('renders correctly', () => {
   const tree = renderer
@@ -107,7 +107,7 @@ Inline snapshots behave identically to external snapshots (`.snap` files), excep
 
 First, you write a test, calling `.toMatchInlineSnapshot()` with no arguments:
 
-```javascript
+```tsx
 it('renders correctly', () => {
   const tree = renderer
     .create(<Link page="https://prettier.io">Prettier</Link>)
@@ -118,7 +118,7 @@ it('renders correctly', () => {
 
 The next time you run Jest, `tree` will be evaluated, and a snapshot will be written as an argument to `toMatchInlineSnapshot`:
 
-```javascript
+```tsx
 it('renders correctly', () => {
   const tree = renderer
     .create(<Link page="https://prettier.io">Prettier</Link>)

docs/TutorialReact.md

@@ -60,7 +60,7 @@ module.exports = {
 
 Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks:
 
-```javascript
+```tsx
 // Link.react.js
 import React from 'react';
 
@@ -106,7 +106,7 @@ export default class Link extends React.Component {
 
 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:
 
-```javascript
+```tsx
 // Link.react.test.js
 import React from 'react';
 import renderer from 'react-test-renderer';
@@ -196,7 +196,7 @@ React 16 triggers these warnings due to how it checks element types, and the moc
     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.
-    ```js
+    ```tsx
     jest.mock('./Widget', () => () => <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.
@@ -216,7 +216,7 @@ You have to run `yarn add --dev @testing-library/react` to use react-testing-lib
 
 Let's implement a checkbox which swaps between two labels:
 
-```javascript
+```tsx
 // CheckboxWithLabel.js
 
 import React from 'react';
@@ -250,7 +250,7 @@ export default class CheckboxWithLabel extends React.Component {
 }
 ```
 
-```javascript
+```tsx
 // __tests__/CheckboxWithLabel-test.js
 import React from 'react';
 import {cleanup, fireEvent, render} from '@testing-library/react';
@@ -281,7 +281,7 @@ You have to run `yarn add --dev enzyme` to use Enzyme. If you are using a React
 
 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.
 
-```javascript
+```tsx
 // __tests__/CheckboxWithLabel-test.js
 
 import React from 'react';

docs/TutorialReactNative.md

@@ -12,13 +12,14 @@ Get a deeper insight into testing a working React Native app example by reading
 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
-// package.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._
@@ -29,7 +30,7 @@ Run `yarn test` to run tests with Jest.
 
 Let's create a [snapshot test](SnapshotTesting.md) for a small intro component with a few views and text components and some styles:
 
-```javascript
+```tsx
 // Intro.js
 import React, {Component} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
@@ -69,7 +70,7 @@ export default class Intro extends Component {
 
 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:
 
-```javascript
+```tsx
 // __tests__/Intro-test.js
 import React from 'react';
 import renderer from 'react-test-renderer';
@@ -138,9 +139,11 @@ The [`transformIgnorePatterns`](configuration.html#transformignorepatterns-array
 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:
 
 ```json
-"transformIgnorePatterns": [
-  "node_modules/(?!(react-native|my-project|react-native-button)/)"
-]
+{
+  "transformIgnorePatterns": [
+    "node_modules/(?!(react-native|my-project|react-native-button)/)"
+  ]
+}
 ```
 
 ### setupFiles
@@ -152,8 +155,10 @@ If you'd like to provide additional configuration for every test file, the [`set
 The [`moduleNameMapper`](configuration.html#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": "<rootDir>/path/to/my-module.js"
+{
+  "moduleNameMapper": {
+    "my-module.js": "<rootDir>/path/to/my-module.js"
+  }
 }
 ```
 

e2e/babel-plugin-jest-hoist/__tests__/integration.test.js

@@ -54,7 +54,7 @@ jest.mock('../__test_modules__/f', () => {
 jest.mock(`../__test_modules__/jestBackticks`);
 jest.mock('virtual-module', () => 'kiwi', {virtual: true});
 // This has types that should be ignored by the out-of-scope variables check.
-jest.mock('has-flow-types', () => (props: {children: mixed}) => 3, {
+jest.mock('has-flow-types', () => (props: {children: unknown}) => 3, {
   virtual: true,
 });
 

fixtures/parser_tests.js

@@ -7,6 +7,7 @@
 
 const fixtures = __dirname;
 
+// eslint-disable-next-line no-undef
 function parserTests(parse: (file: string) => BabylonParserResult) {
   describe('File parsing without throwing', () => {
     it('Should not throw', () => {

packages/jest-validate/README.md

@@ -11,45 +11,48 @@ npm install --save jest-validate
 ```js
 import {validate} from 'jest-validate';
 
-validate((config: Object), (options: ValidationOptions)); // => {hasDeprecationWarnings: boolean, isValid: boolean}
+validate(config, validationOptions); // => {hasDeprecationWarnings: boolean, isValid: boolean}
 ```
 
 Where `ValidationOptions` are:
 
-```js
+```ts
 type ValidationOptions = {
-  blacklist?: Array<string>,
-  comment?: string,
-  condition?: (option: any, validOption: any) => boolean,
+  comment?: string;
+  condition?: (option: unknown, validOption: unknown) => boolean;
   deprecate?: (
-    config: Object,
+    config: Record<string, unknown>,
     option: string,
-    deprecatedOptions: Object,
+    deprecatedOptions: DeprecatedOptions,
     options: ValidationOptions,
-  ) => true,
-  deprecatedConfig?: {[key: string]: Function},
+  ) => boolean;
+  deprecatedConfig?: DeprecatedOptions;
   error?: (
     option: string,
-    received: any,
-    defaultValue: any,
+    received: unknown,
+    defaultValue: unknown,
     options: ValidationOptions,
-  ) => void,
-  exampleConfig: Object,
-  recursive?: boolean,
-  title?: Title,
+    path?: Array<string>,
+  ) => void;
+  exampleConfig: Record<string, unknown>;
+  recursive?: boolean;
+  recursiveBlacklist?: Array<string>;
+  recursiveDenylist?: Array<string>;
+  title?: Title;
   unknown?: (
-    config: Object,
-    exampleConfig: Object,
+    config: Record<string, unknown>,
+    exampleConfig: Record<string, unknown>,
     option: string,
     options: ValidationOptions,
-  ) => void,
+    path?: Array<string>,
+  ) => void;
 };
 
-type Title = {|
-  deprecation?: string,
-  error?: string,
-  warning?: string,
-|};
+type Title = {
+  deprecation?: string;
+  error?: string;
+  warning?: string;
+};
 ```
 
 `exampleConfig` is the only option required.

website/versioned_docs/version-22.x/SnapshotTesting.md

@@ -12,7 +12,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp
 
 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/master/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/master/examples/snapshot/Link.react.js):
 
-```javascript
+```tsx
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Link from '../Link.react';
@@ -52,7 +52,7 @@ It's straightforward to spot when a snapshot test fails after a bug has been int
 
 One such situation can arise if we intentionally change the address the Link component in our example is pointing to.
 
-```javascript
+```tsx
 // Updated test case with a Link to a different address
 it('renders correctly', () => {
   const tree = renderer

website/versioned_docs/version-22.x/TutorialReact.md

@@ -61,7 +61,7 @@ Your `package.json` should look something like this (where `<current-version>` i
 
 Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks:
 
-```javascript
+```tsx
 // Link.react.js
 import React from 'react';
 
@@ -107,7 +107,7 @@ export default class Link extends React.Component {
 
 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:
 
-```javascript
+```tsx
 // Link.react.test.js
 import React from 'react';
 import renderer from 'react-test-renderer';
@@ -197,7 +197,7 @@ React 16 triggers these warnings due to how it checks element types, and the moc
     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.
-    ```js
+    ```tsx
     jest.mock('./Widget', () => () => <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.
@@ -217,7 +217,7 @@ You have to run `yarn add --dev @testing-library/react` to use react-testing-lib
 
 Let's implement a checkbox which swaps between two labels:
 
-```javascript
+```tsx
 // CheckboxWithLabel.js
 
 import React from 'react';
@@ -251,7 +251,7 @@ export default class CheckboxWithLabel extends React.Component {
 }
 ```
 
-```javascript
+```tsx
 // __tests__/CheckboxWithLabel-test.js
 import React from 'react';
 import {cleanup, fireEvent, render} from '@testing-library/react';
@@ -282,7 +282,7 @@ You have to run `yarn add --dev enzyme` to use Enzyme. If you are using a React
 
 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.
 
-```javascript
+```tsx
 // __tests__/CheckboxWithLabel-test.js
 
 import React from 'react';

website/versioned_docs/version-22.x/TutorialReactNative.md

@@ -13,13 +13,14 @@ Get a deeper insight into testing a working React Native app example by reading
 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
-// package.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._
@@ -30,7 +31,7 @@ Run `yarn test` to run tests with Jest.
 
 Let's create a [snapshot test](SnapshotTesting.md) for a small intro component with a few views and text components and some styles:
 
-```javascript
+```tsx
 // Intro.js
 import React, {Component} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
@@ -70,7 +71,7 @@ export default class Intro extends Component {
 
 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:
 
-```javascript
+```tsx
 // __tests__/Intro-test.js
 import React from 'react';
 import renderer from 'react-test-renderer';
@@ -139,9 +140,11 @@ The [`transformIgnorePatterns`](configuration.html#transformignorepatterns-array
 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:
 
 ```json
-"transformIgnorePatterns": [
-  "node_modules/(?!(react-native|my-project|react-native-button)/)"
-]
+{
+  "transformIgnorePatterns": [
+    "node_modules/(?!(react-native|my-project|react-native-button)/)"
+  ]
+}
 ```
 
 ### setupFiles
@@ -153,8 +156,10 @@ If you'd like to provide additional configuration for every test file, the [`set
 The [`moduleNameMapper`](configuration.html#modulenamemapper-objectstring-string) 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": "<rootDir>/path/to/my-module.js"
+{
+  "moduleNameMapper": {
+    "my-module.js": "<rootDir>/path/to/my-module.js"
+  }
 }
 ```