test: add test for config using fixtures and snapshots

.github/workflows/CI.yml

@@ -40,6 +40,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build
+        run: pnpm run build
+
       - name: Run test
         run: pnpm run test
 

eslint.config.js

@@ -5,7 +5,7 @@ import tseslint from "typescript-eslint";
 
 /** @type {Array<import('eslint').Linter.Config>} */
 export default [
-  { ignores: ["dist", "tests"] },
+  { ignores: ["dist", "coverage", "tests/fixtures/**/*", "eslint.config.js"] },
   { files: ["**/*.{js,mjs,cjs,ts}"] },
   pluginJs.configs.recommended,
   pluginEslintPlugin.configs["flat/recommended"],
@@ -16,5 +16,12 @@ export default [
       "n/no-missing-import": ["error", { allowModules: ["estree"] }],
     },
   },
-  ...tseslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  {
+    languageOptions: {
+      parserOptions: {
+        project: true,
+      },
+    },
+  },
 ];

pnpm-workspace.yaml

@@ -1,2 +1,2 @@
 packages:
-  - "./tests/**"
+  - "./tests/fixtures/**"

src/rules/syntax.ts

@@ -54,7 +54,10 @@ const syntaxRule: Rule.RuleModule = {
     const reactInvalidImports: Array<ESTree.ImportDeclaration> = [];
 
     /**
-     * @description Used to map react named imports to replace them with the original
+     * @description Map all react named imports:
+     * The key is the local file name, the value is the original name
+     * useState as useStateReact
+     * ^ value     ^ key
      */
     const reactNamedImports = new Map<string, string>();
 
@@ -66,7 +69,7 @@ const syntaxRule: Rule.RuleModule = {
         const { specifiers } = node;
 
         // if an import satisfies the preferred syntax it should not be added
-        // to invalid imports and should be remembered ti avoid
+        // to invalid imports and its presence should be remembered to avoid useless replace
         if (
           specifiers.length === 1 &&
           specifiers[0].type === acceptedImportSpecifier

tests/__snapshots__/recommended-ts.spec.ts.snap

@@ -0,0 +1,178 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`config recommended > should have errors for invalid > should have 3 errors: 1 for import and 1 for prefixes (useState, JSX) 1`] = `
+[
+  {
+    "column": 1,
+    "endColumn": 46,
+    "endLine": 1,
+    "fix": {
+      "range": [
+        0,
+        45,
+      ],
+      "text": "import * as React from 'react';",
+    },
+    "line": 1,
+    "message": "You should import React using namespace syntax",
+    "messageId": "wrongImport",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 25,
+    "endColumn": 28,
+    "endLine": 3,
+    "fix": {
+      "range": [
+        71,
+        74,
+      ],
+      "text": "React.JSX",
+    },
+    "line": 3,
+    "message": "This React import should have a 'React.' prefix",
+    "messageId": "addPrefix",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 18,
+    "endColumn": 26,
+    "endLine": 4,
+    "fix": {
+      "range": [
+        102,
+        110,
+      ],
+      "text": "React.useState",
+    },
+    "line": 4,
+    "message": "This React import should have a 'React.' prefix",
+    "messageId": "addPrefix",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+]
+`;
+
+exports[`config recommended > should raise error when having two imports (1 value and 1 type) > should have 4 errors: 2 for imports and 1 for prefixes (useState, JSX) 1`] = `
+[
+  {
+    "column": 1,
+    "endColumn": 41,
+    "endLine": 1,
+    "fix": {
+      "range": [
+        0,
+        40,
+      ],
+      "text": "import * as React from 'react';",
+    },
+    "line": 1,
+    "message": "You should import React using namespace syntax",
+    "messageId": "wrongImport",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 1,
+    "endColumn": 34,
+    "endLine": 2,
+    "fix": {
+      "range": [
+        41,
+        74,
+      ],
+      "text": "",
+    },
+    "line": 2,
+    "message": "React was already imported. This import should be removed when using namespace import",
+    "messageId": "duplicateImport",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 25,
+    "endColumn": 28,
+    "endLine": 4,
+    "fix": {
+      "range": [
+        100,
+        103,
+      ],
+      "text": "React.JSX",
+    },
+    "line": 4,
+    "message": "This React import should have a 'React.' prefix",
+    "messageId": "addPrefix",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 18,
+    "endColumn": 26,
+    "endLine": 5,
+    "fix": {
+      "range": [
+        131,
+        139,
+      ],
+      "text": "React.useState",
+    },
+    "line": 5,
+    "message": "This React import should have a 'React.' prefix",
+    "messageId": "addPrefix",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+]
+`;
+
+exports[`config recommended > should raise error when renaming a named import of \`react\` > 1 error for the import and 1 error for the useState 1`] = `
+[
+  {
+    "column": 1,
+    "endColumn": 58,
+    "endLine": 1,
+    "fix": {
+      "range": [
+        0,
+        57,
+      ],
+      "text": "import * as React from 'react';",
+    },
+    "line": 1,
+    "message": "You should import React using namespace syntax",
+    "messageId": "wrongImport",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+  {
+    "column": 18,
+    "endColumn": 31,
+    "endLine": 4,
+    "fix": {
+      "range": [
+        114,
+        127,
+      ],
+      "text": "React.useState",
+    },
+    "line": 4,
+    "message": "This React import should have a 'React.' prefix",
+    "messageId": "addPrefix",
+    "nodeType": null,
+    "ruleId": "react-import/syntax",
+    "severity": 2,
+  },
+]
+`;