Add eslint-plugin-jest

Author: tkrotoff

.eslintrc.js

@@ -5,28 +5,19 @@ const config = {
   parser: '@typescript-eslint/parser',
   parserOptions: {},
   extends: [
-    // /!\ Order seems to matter
-
+    // /!\ Order matters: the next one overrides rules from the previous one
+    'plugin:jest/recommended',
     'airbnb',
+    // Already done by Airbnb
+    //'plugin:react/recommended'
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'prettier/@typescript-eslint',
     'prettier/react'
-
-    // Already done by Airbnb
-    //'plugin:react/recommended'
   ],
-  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
-  settings: {
-    react: {
-      version: 'detect'
-    }
-  },
+  plugins: ['react-hooks'],
   env: {
-    es6: true,
-    browser: true,
-    node: true,
-    jest: true
+    browser: true
   },
   globals: {
     // Jest Puppeteer, see https://github.com/smooth-code/jest-puppeteer/blob/v4.0.0/README.md#configure-eslint
@@ -50,6 +41,7 @@ const config = {
 
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'off',
+    // [Avoid Export Default](https://basarat.gitbook.io/typescript/main-1/defaultisbad)
     'import/prefer-default-export': 'off',
     'import/extensions': 'off',
 
@@ -61,34 +53,30 @@ const config = {
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': 'error',
 
-    '@typescript-eslint/indent': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
-    '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/no-parameter-properties': 'off',
-    '@typescript-eslint/array-type': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
 
-    'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
-    'jsx-a11y/iframe-has-title': 'off',
 
     'react/no-unescaped-entities': 'off',
     'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
     'react/jsx-pascal-case': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'react/static-property-placement': ['error', 'static public field'],
-    'react/state-in-constructor': ['error', 'never'],
-    'react/sort-comp': 'off',
+    'react/static-property-placement': 'off',
+    'react/state-in-constructor': 'off',
 
     'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn'
+    'react-hooks/exhaustive-deps': 'error',
+
+    'jest/no-expect-resolves': 'error',
+    'jest/expect-expect': 'off'
   },
 
   // FIXME ?
@@ -106,6 +94,12 @@ const config = {
       rules: {
         'react/require-default-props': 'off'
       }
+    },
+    {
+      files: ['*.test.tsx'],
+      rules: {
+        'jsx-a11y/iframe-has-title': 'off'
+      }
     }
   ]
 };

examples/Bootstrap4/App.test.e2e.js

@@ -20,18 +20,18 @@ test('john/123456/12345', async () => {
   //const usernameFeedbacks = await page.$$('input[name=username] ~ span[data-feedback]');
   const usernameFeedbacks = await username.$x('./following-sibling::span[@data-feedback]');
   expect(usernameFeedbacks).toHaveLength(1);
-  await expect(usernameFeedbacks[0]).toMatch('Username already taken, choose another');
+  expect(usernameFeedbacks[0]).toMatch('Username already taken, choose another');
 
   const password = await page.$('input[name=password]');
   await password.click();
   await password.type('123456');
   await page.waitForSelector('input[name=password] ~ span[data-feedback]');
   const passwordFeedbacks = await page.$$('input[name=password] ~ span[data-feedback]');
   expect(passwordFeedbacks).toHaveLength(4);
-  await expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
-  await expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
-  await expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
-  await expect(passwordFeedbacks[3]).toMatch('Looks good!');
+  expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
+  expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
+  expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
+  expect(passwordFeedbacks[3]).toMatch('Looks good!');
 
   const passwordConfirm = await page.$('input[name=passwordConfirm]');
   await passwordConfirm.click();
@@ -40,7 +40,7 @@ test('john/123456/12345', async () => {
     'input[name=passwordConfirm] ~ span[data-feedback]'
   );
   expect(passwordConfirmFeedbacks).toHaveLength(1);
-  await expect(passwordConfirmFeedbacks[0]).toMatch('Not the same password');
+  expect(passwordConfirmFeedbacks[0]).toMatch('Not the same password');
 
   const signUp = (await page.$x("//button[text() = 'Sign Up']"))[0];
   // [Get Custom Attribute value](https://github.com/GoogleChrome/puppeteer/issues/1451)
@@ -56,19 +56,19 @@ test('jimmy/12345/12345', async () => {
   //const usernameFeedbacks = await page.$$('input[name=username] ~ span[data-feedback]');
   const usernameFeedbacks = await username.$x('./following-sibling::span[@data-feedback]');
   expect(usernameFeedbacks).toHaveLength(2);
-  await expect(usernameFeedbacks[0]).toMatch('Username available');
-  await expect(usernameFeedbacks[1]).toMatch('Looks good!');
+  expect(usernameFeedbacks[0]).toMatch('Username available');
+  expect(usernameFeedbacks[1]).toMatch('Looks good!');
 
   const password = await page.$('input[name=password]');
   await password.click();
   await password.type('12345');
   await page.waitForSelector('input[name=password] ~ span[data-feedback]');
   const passwordFeedbacks = await page.$$('input[name=password] ~ span[data-feedback]');
   expect(passwordFeedbacks).toHaveLength(4);
-  await expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
-  await expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
-  await expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
-  await expect(passwordFeedbacks[3]).toMatch('Looks good!');
+  expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
+  expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
+  expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
+  expect(passwordFeedbacks[3]).toMatch('Looks good!');
 
   const passwordConfirm = await page.$('input[name=passwordConfirm]');
   await passwordConfirm.click();
@@ -77,7 +77,7 @@ test('jimmy/12345/12345', async () => {
     'input[name=passwordConfirm] ~ span[data-feedback]'
   );
   expect(passwordConfirmFeedbacks).toHaveLength(1);
-  await expect(passwordConfirmFeedbacks[0]).toMatch('Looks good!');
+  expect(passwordConfirmFeedbacks[0]).toMatch('Looks good!');
 
   const signUp = (await page.$x("//button[text() = 'Sign Up']"))[0];
   // [Get Custom Attribute value](https://github.com/GoogleChrome/puppeteer/issues/1451)

examples/Password/App.test.e2e.ts

@@ -19,19 +19,19 @@ test('john@beatles/123456/12345', async () => {
   //const emailFeedbacks = await page.$$('input[name=email] ~ span[data-feedback]');
   const emailFeedbacks = await email.$x('./following-sibling::span[@data-feedback]');
   expect(emailFeedbacks).toHaveLength(1);
-  await expect(emailFeedbacks[0]).toMatch('Looks good!');
+  expect(emailFeedbacks[0]).toMatch('Looks good!');
 
   const password = (await page.$('input[name=password]'))!;
   await password.click();
   await password.type('123456');
   await page.waitForSelector('input[name=password] ~ span[data-feedback].when-valid');
   const passwordFeedbacks = await page.$$('input[name=password] ~ span[data-feedback]');
   expect(passwordFeedbacks).toHaveLength(5);
-  await expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
-  await expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
-  await expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
-  await expect(passwordFeedbacks[3]).toMatch('This password is very common');
-  await expect(passwordFeedbacks[4]).toMatch('Looks good!');
+  expect(passwordFeedbacks[0]).toMatch('Should contain small letters');
+  expect(passwordFeedbacks[1]).toMatch('Should contain capital letters');
+  expect(passwordFeedbacks[2]).toMatch('Should contain special characters');
+  expect(passwordFeedbacks[3]).toMatch('This password is very common');
+  expect(passwordFeedbacks[4]).toMatch('Looks good!');
 
   const passwordConfirm = (await page.$('input[name=passwordConfirm]'))!;
   await passwordConfirm.click();
@@ -40,7 +40,7 @@ test('john@beatles/123456/12345', async () => {
     'input[name=passwordConfirm] ~ span[data-feedback]'
   );
   expect(passwordConfirmFeedbacks).toHaveLength(1);
-  await expect(passwordConfirmFeedbacks[0]).toMatch('Not the same password');
+  expect(passwordConfirmFeedbacks[0]).toMatch('Not the same password');
 
   const signUp = (await page.$x("//button[text() = 'Sign Up']"))[0];
   // [Get Custom Attribute value](https://github.com/GoogleChrome/puppeteer/issues/1451)
@@ -56,15 +56,15 @@ test('john@beatles/Tr0ub4dor&3/Tr0ub4dor&3', async () => {
   //const emailFeedbacks = await page.$$('input[name=email] ~ span[data-feedback]');
   const emailFeedbacks = await email.$x('./following-sibling::span[@data-feedback]');
   expect(emailFeedbacks).toHaveLength(1);
-  await expect(emailFeedbacks[0]).toMatch('Looks good!');
+  expect(emailFeedbacks[0]).toMatch('Looks good!');
 
   const password = (await page.$('input[name=password]'))!;
   await password.click();
   await password.type('Tr0ub4dor&3');
   await page.waitForSelector('input[name=password] ~ span[data-feedback].when-valid');
   const passwordFeedbacks = await page.$$('input[name=password] ~ span[data-feedback]');
   expect(passwordFeedbacks).toHaveLength(1);
-  await expect(passwordFeedbacks[0]).toMatch('Looks good!');
+  expect(passwordFeedbacks[0]).toMatch('Looks good!');
 
   const passwordConfirm = (await page.$('input[name=passwordConfirm]'))!;
   await passwordConfirm.click();

package.json

@@ -41,6 +41,7 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.4",

packages/react-form-with-constraints-native/src/Native.test.tsx

@@ -399,14 +399,14 @@ describe('FormWithConstraints', () => {
 
         // [async/await toThrow is not working](https://github.com/facebook/jest/issues/1700)
 
-        await expect(form.validateFields('username')).resolves.toEqual([
+        expect(await form.validateFields('username')).toEqual([
           { name: 'username', element: expectTextInput, validations: [] }
         ]);
-        await expect(form.validateFields()).rejects.toEqual(
-          new Error(`Multiple elements matching '[name="password"]' inside the form`)
+        await expect(form.validateFields()).rejects.toThrow(
+          `Multiple elements matching '[name="password"]' inside the form`
         );
-        await expect(form.validateFields('password')).rejects.toEqual(
-          new Error(`Multiple elements matching '[name="password"]' inside the form`)
+        await expect(form.validateFields('password')).rejects.toThrow(
+          `Multiple elements matching '[name="password"]' inside the form`
         );
 
         wrapper.unmount();
@@ -420,10 +420,10 @@ describe('FormWithConstraints', () => {
         );
         const form = (wrapper.getInstance() as any) as FormWithConstraints;
 
-        await expect(form.validateFields()).resolves.toEqual([]); // Ignore input without FieldFeedbacks
-        await expect(form.validateFields('username')).resolves.toEqual([]); // Ignore input without FieldFeedbacks
-        await expect(form.validateFields('unknown')).rejects.toEqual(
-          new Error(`Could not find field '[name="unknown"]' inside the form`)
+        expect(await form.validateFields()).toEqual([]); // Ignore input without FieldFeedbacks
+        expect(await form.validateFields('username')).toEqual([]); // Ignore input without FieldFeedbacks
+        await expect(form.validateFields('unknown')).rejects.toThrow(
+          `Could not find field '[name="unknown"]' inside the form`
         );
 
         wrapper.unmount();
@@ -435,9 +435,9 @@ describe('FormWithConstraints', () => {
         );
         const form = (wrapper.getInstance() as any) as FormWithConstraints;
 
-        await expect(form.validateFields()).resolves.toEqual([]);
-        await expect(form.validateFields('unknown')).rejects.toEqual(
-          new Error(`Could not find field '[name="unknown"]' inside the form`)
+        expect(await form.validateFields()).toEqual([]);
+        await expect(form.validateFields('unknown')).rejects.toThrow(
+          `Could not find field '[name="unknown"]' inside the form`
         );
 
         wrapper.unmount();
@@ -659,10 +659,12 @@ describe('FieldFeedback', () => {
         </Text>`);
     });
 
+    // eslint-disable-next-line jest/expect-expect
     test('warning', async () => {
       //
     });
 
+    // eslint-disable-next-line jest/expect-expect
     test('info', async () => {
       //
     });
@@ -694,6 +696,7 @@ describe('FieldFeedback', () => {
       expect(wrapper.debug()).toEqual('<Text data-feedback="0.0" style={[undefined]} />');
     });
 
+    // eslint-disable-next-line jest/expect-expect
     test('with already existing class', async () => {
       //
     });
@@ -750,6 +753,7 @@ describe('FieldFeedback', () => {
       expect(wrapper.props().style).toEqual({ color: 'red' });
     });
 
+    // eslint-disable-next-line jest/expect-expect
     test('when="valid"', async () => {
       // Cannot be implemented properly
     });

packages/react-form-with-constraints/src/FieldFeedback.test.tsx

@@ -317,7 +317,7 @@ describe('validate()', () => {
       });
       await expect(
         fieldFeedbacks_username.emitValidateFieldEvent(input_username_valid)
-      ).rejects.toEqual(new TypeError("Invalid FieldFeedback 'when' type: number"));
+      ).rejects.toThrow("Invalid FieldFeedback 'when' type: number");
     });
   });