test: more eslint plugins (#12)

* test: fix eslint-plugin-react config

* test: install eslint-config-prettier

* test: install eslint-plugin-jest-dom and -testing-library

eslint.config.mjs

@@ -4,23 +4,34 @@
 
 import pluginJs from "@eslint/js";
 // @ts-expect-error no types for this plugin
+import configPrettier from "eslint-config-prettier";
+// @ts-expect-error no types for this plugin
 import pluginBetterMutation from "eslint-plugin-better-mutation";
 // @ts-expect-error no types for this plugin
 import pluginJest from "eslint-plugin-jest";
 // @ts-expect-error no types for this plugin
+import pluginJestDom from "eslint-plugin-jest-dom";
+// @ts-expect-error no types for this plugin
 import pluginJsxA11y from "eslint-plugin-jsx-a11y";
 // @ts-expect-error no types for this plugin
 import pluginReactHooks from "eslint-plugin-react-hooks";
 // @ts-expect-error no types for this plugin
-import pluginReactConfig from "eslint-plugin-react/configs/jsx-runtime.js";
+import pluginReactJsx from "eslint-plugin-react/configs/jsx-runtime.js";
+// @ts-expect-error no types for this plugin
+import pluginReactRecommended from "eslint-plugin-react/configs/recommended.js";
+// @ts-expect-error no types for this plugin
+import pluginTestingLibrary from "eslint-plugin-testing-library";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
   pluginJs.configs.recommended,
   ...tseslint.configs.strictTypeChecked,
   ...tseslint.configs.stylisticTypeChecked,
-  pluginReactConfig,
+  // jsx-runtime only disables rules, so need both recommended and jsx.
+  pluginReactRecommended,
+  pluginReactJsx,
+  configPrettier,
   {
     ignores: ["*", "!js/", "!*.ts", "!*.mjs"],
   },
@@ -70,16 +81,23 @@ export default tseslint.config(
   },
   {
     files: ["js/test/", "js/**/*.test.*"],
-    // we use both jest's recommended and style rules, but only need to set the plugin once here,
-    // and it doesn't matter which config we get the plugin from.
-    ...pluginJest.configs["flat/recommended"],
+    plugins: {
+      jest: pluginJest,
+      "jest-dom": pluginJestDom,
+      "testing-library": pluginTestingLibrary,
+    },
     rules: {
       ...pluginJest.configs["flat/style"].rules,
       ...pluginJest.configs["flat/recommended"].rules,
+      ...pluginJestDom.configs["flat/recommended"].rules,
+      ...pluginTestingLibrary.configs.react.rules,
       // empty functions are fine
       "@typescript-eslint/no-empty-function": "off",
       // expect.any is untyped and triggers this all the time.
       "@typescript-eslint/no-unsafe-assignment": "off",
+      /* we do `view = render(); view.getBy()` which also doesn't require destructuring
+      and has less global mutable state than `screen`. */
+      "testing-library/prefer-screen-queries": "off",
     },
   },
   {

package.json

@@ -31,11 +31,14 @@
     "@types/phoenix": "^1.6.4",
     "@types/phoenix_live_view": "^0.18.5",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-better-mutation": "^1.4.1",
     "eslint-plugin-jest": "^28.5.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "globals": "^15.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",