coder · BrunoQuaresma · Mar 29, 2023 · Mar 28, 2023 · Mar 28, 2023 · Mar 28, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -32,6 +32,17 @@ plugins:
   - react-hooks
   - jest
   - unicorn
+  - testing-library
+overrides:
+  - files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"]
+    extends: ["plugin:testing-library/react", "plugin:testing-library/dom"]
+    rules:
+      # Occasionally, we must traverse the DOM when querying for an element to
+      # avoid the performance costs that come with using selectors like ByRole.
+      # You can read more about these performance costs here:
+      # https://coder.com/docs/v2/latest/contributing/frontend#tests-getting-too-slow.
+      testing-library/no-node-access: off
+      testing-library/no-container: off
 root: true
 rules:
   "@typescript-eslint/brace-style":
@@ -145,6 +156,7 @@ rules:
         message: "Default React import not allowed",
       },
     ]
+
 settings:
   react:
     version: detect

diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -5,6 +5,7 @@ import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
+import "../src/i18n"
 
 addDecorator((story) => (
   <ThemeProvider theme={dark}>

diff --git a/site/package.json b/site/package.json
@@ -53,6 +53,7 @@
     "date-fns": "2.29.3",
     "dayjs": "1.11.4",
     "emoji-mart": "5.4.0",
+    "eslint-plugin-testing-library": "^5.10.2",
     "eventsourcemock": "2.0.0",
     "formik": "2.2.9",
     "front-matter": "4.0.2",
@@ -97,8 +98,8 @@
     "@storybook/react": "6.5.12",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.4.0",
     "@types/node": "14.18.22",

diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -3,7 +3,7 @@ import {
   MockWorkspace,
   MockWorkspaceAgent,
   MockWorkspaceApp,
-} from "testHelpers/renderHelpers"
+} from "testHelpers/entities"
 import { AppLink, AppLinkProps } from "./AppLink"
 
 export default {

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from "@testing-library/react"
+import { fireEvent, render, screen } from "@testing-library/react"
 import { FC } from "react"
 import { WrapperComponent } from "../../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
@@ -26,10 +26,10 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { getByRole } = render(<Helpers.Component {...props} />)
+    render(<Helpers.Component {...props} />)
 
     // Then
-    expect(getByRole("dialog")).toBeDefined()
+    expect(screen.getByRole("dialog")).toBeDefined()
   })
 
   it("does not display cancel for info dialogs", () => {
@@ -43,10 +43,10 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { queryByText } = render(<Helpers.Component {...props} />)
+    render(<Helpers.Component {...props} />)
 
     // Then
-    expect(queryByText("CANCEL")).toBeNull()
+    expect(screen.queryByText("CANCEL")).toBeNull()
   })
 
   it("can display cancel when normally hidden", () => {
@@ -61,10 +61,10 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { getByText } = render(<Helpers.Component {...props} />)
+    render(<Helpers.Component {...props} />)
 
     // Then
-    expect(getByText("CANCEL")).toBeDefined()
+    expect(screen.getByText("CANCEL")).toBeDefined()
   })
 
   it("displays cancel for delete dialogs", () => {
@@ -79,10 +79,10 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { getByText } = render(<Helpers.Component {...props} />)
+    render(<Helpers.Component {...props} />)
 
     // Then
-    expect(getByText("CANCEL")).toBeDefined()
+    expect(screen.getByText("CANCEL")).toBeDefined()
   })
 
   it("can hide cancel when normally visible", () => {
@@ -98,10 +98,10 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { queryByText } = render(<Helpers.Component {...props} />)
+    render(<Helpers.Component {...props} />)
 
     // Then
-    expect(queryByText("CANCEL")).toBeNull()
+    expect(screen.queryByText("CANCEL")).toBeNull()
   })
 
   it("onClose is called when cancelled", () => {
@@ -116,8 +116,8 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { getByText } = render(<Helpers.Component {...props} />)
-    fireEvent.click(getByText("CANCEL"))
+    render(<Helpers.Component {...props} />)
+    fireEvent.click(screen.getByText("CANCEL"))
 
     // Then
     expect(onCloseMock).toBeCalledTimes(1)
@@ -138,8 +138,8 @@ describe("ConfirmDialog", () => {
     }
 
     // When
-    const { getByText } = render(<Helpers.Component {...props} />)
-    fireEvent.click(getByText("CONFIRM"))
+    render(<Helpers.Component {...props} />)
+    fireEvent.click(screen.getByText("CONFIRM"))
 
     // Then
     expect(onCloseMock).toBeCalledTimes(0)

diff --git a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx b/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx
@@ -1,6 +1,7 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
-import { MockUser } from "../../../testHelpers/renderHelpers"
+import { MockUser } from "testHelpers/entities"
+
 import {
   ResetPasswordDialog,
   ResetPasswordDialogProps,

diff --git a/site/src/components/FormTextField/FormTextField.test.tsx b/site/src/components/FormTextField/FormTextField.test.tsx