Skip to content

Commit

Permalink
chore: use typescript-eslint to parse all files (#10722)
Browse files Browse the repository at this point in the history
  • Loading branch information
SimenB committed Oct 26, 2020
1 parent 92f74cd commit 08c8fca
Show file tree
Hide file tree
Showing 14 changed files with 102 additions and 84 deletions.
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',
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

0 comments on commit 08c8fca

Please sign in to comment.