feat(lint): add playwright rules

Author: kentcdodds

docs/style-guide.md

@@ -1981,6 +1981,82 @@ test('every button click updates display', () => {
 })
 ```
 
+### Use Appropriate Queries
+
+Follow the query priority order and avoid using container queries:
+
+```tsx
+// ✅ Good
+screen.getByRole('textbox', { name: /username/i })
+
+// ❌ Avoid
+screen.getByTestId('username')
+container.querySelector('.btn-primary')
+```
+
+### Use Query Variants Correctly
+
+Only use query\* variants for checking non-existence:
+
+```tsx
+// ✅ Good
+expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+
+// ❌ Avoid
+expect(screen.queryByRole('alert')).toBeInTheDocument()
+```
+
+### Use find\* Over waitFor for Elements
+
+Use find\* queries instead of waitFor for elements that may not be immediately
+available:
+
+```tsx
+// ✅ Good
+const submitButton = await screen.findByRole('button', { name: /submit/i })
+
+// ❌ Avoid
+const submitButton = await waitFor(() =>
+	screen.getByRole('button', { name: /submit/i }),
+)
+```
+
+### Avoid Testing Implementation Details
+
+Test components based on how users interact with them, not implementation
+details:
+
+```tsx
+// ✅ Good
+test('User can add items to cart', async () => {
+	render(<ProductList />)
+	await userEvent.click(screen.getByRole('button', { name: /add to cart/i }))
+	await expect(screen.getByText(/1 item in cart/i)).toBeInTheDocument()
+})
+
+// ❌ Avoid
+test('Cart state updates when addToCart is called', () => {
+	const { container } = render(<ProductList />)
+	const addButton = container.querySelector('[data-testid="add-button"]')
+	fireEvent.click(addButton)
+	expect(
+		container.querySelector('[data-testid="cart-count"]'),
+	).toHaveTextContent('1')
+})
+```
+
+### Use userEvent Over fireEvent
+
+Use userEvent over fireEvent for more realistic user interactions:
+
+```tsx
+// ✅ Good
+await userEvent.type(screen.getByRole('textbox'), 'Hello')
+
+// ❌ Avoid
+fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Hello' } })
+```
+
 ## Misc
 
 ### File naming

eslint.js

@@ -17,6 +17,8 @@ const hasReact = has('react')
 const hasTestingLibrary = has('@testing-library/dom')
 const hasJestDom = has('@testing-library/jest-dom')
 const hasVitest = has('vitest')
+const hasPlaywright = has('playwright')
+
 const vitestFiles = ['**/__tests__/**/*', '**/*.test.*', '**/*.spec.*']
 const testFiles = ['**/tests/**', '**/#tests/**', ...vitestFiles]
 const playwrightFiles = ['**/e2e/**']
@@ -290,9 +292,50 @@ export const config = [
 					vitest: (await import('@vitest/eslint-plugin')).default,
 				},
 				rules: {
+					'vitest/expect-expect': ERROR,
 					// you don't want the editor to autofix this, but we do want to be
 					// made aware of it
 					'vitest/no-focused-tests': [WARN, { fixable: false }],
+					'vitest/no-import-node-test': ERROR,
+					'vitest/no-standalone-expect': ERROR,
+					'vitest/prefer-comparison-matcher': ERROR,
+					'vitest/prefer-equality-matcher': ERROR,
+					'vitest/prefer-to-be': ERROR,
+					'vitest/prefer-to-contain': ERROR,
+					'vitest/prefer-to-have-length': ERROR,
+					'vitest/valid-expect-in-promise': ERROR,
+					'vitest/valid-expect': ERROR,
+				},
+			}
+		: null,
+
+	hasPlaywright
+		? {
+				files: ['**/tests/*.ts?(x)', '**/tests/*.js?(x)'],
+				ignores: testFiles,
+				plugins: {
+					playwright: (await import('eslint-plugin-playwright')).default,
+				},
+				rules: {
+					'playwright/expect-expect': ERROR,
+					'playwright/max-nested-describe': ERROR,
+					'playwright/missing-playwright-await': ERROR,
+					'playwright/no-focused-test': WARN,
+					'playwright/no-page-pause': ERROR,
+					'playwright/no-raw-locators': [WARN, { allowed: ['iframe'] }],
+					'playwright/no-slowed-test': ERROR,
+					'playwright/no-standalone-expect': ERROR,
+					'playwright/no-unsafe-references': ERROR,
+					'playwright/prefer-comparison-matcher': ERROR,
+					'playwright/prefer-equality-matcher': ERROR,
+					'playwright/prefer-native-locators': ERROR,
+					'playwright/prefer-to-be': ERROR,
+					'playwright/prefer-to-contain': ERROR,
+					'playwright/prefer-to-have-count': ERROR,
+					'playwright/prefer-to-have-length': ERROR,
+					'playwright/prefer-web-first-assertions': ERROR,
+					'playwright/valid-expect-in-promise': ERROR,
+					'playwright/valid-expect': ERROR,
 				},
 			}
 		: null,

fixture/app/components/__tests__/accordion.tsx

@@ -1 +1,7 @@
+import { expect, test } from 'vitest'
+
 export const MockAccordion = () => <div>Accordion</div>
+
+test.skip('hello', () => {
+	expect(true).toBe(true)
+})

fixture/tests/smoke.e2e.ts

@@ -0,0 +1,5 @@
+import { test } from '@playwright/test'
+
+test('hello', async ({ page }) => {
+	await page.goto('http://localhost:5173')
+})