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

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

Merged
merged 1 commit into from
Oct 26, 2020
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'}],
Expand Down Expand Up @@ -223,7 +222,7 @@ module.exports = {
},
},
],
parser: 'babel-eslint',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we get rid of babel-eslint then?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not without peer dep warnings (facebook/fbjs#405)

parser: '@typescript-eslint/parser',
plugins: ['markdown', 'import', 'prettier', 'eslint-comments'],
rules: {
'arrow-body-style': 'error',
Expand Down
8 changes: 4 additions & 4 deletions docs/SnapshotTesting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>)
Expand All @@ -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>)
Expand Down
12 changes: 6 additions & 6 deletions docs/TutorialReact.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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.
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
21 changes: 13 additions & 8 deletions docs/TutorialReactNative.md
Original file line number Diff line number Diff line change
Expand Up @@ -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._
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand All @@ -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"
}
}
```

Expand Down
2 changes: 1 addition & 1 deletion e2e/babel-plugin-jest-hoist/__tests__/integration.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
1 change: 1 addition & 0 deletions fixtures/parser_tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
49 changes: 26 additions & 23 deletions packages/jest-validate/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions website/versioned_docs/version-22.x/SnapshotTesting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions website/versioned_docs/version-22.x/TutorialReact.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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.
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
21 changes: 13 additions & 8 deletions website/versioned_docs/version-22.x/TutorialReactNative.md
Original file line number Diff line number Diff line change
Expand Up @@ -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._
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand All @@ -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"
}
}
```

Expand Down
Loading