frontend-testing — Skillopedia

Frontend Testing Table of Contents - Overview - When to Use - Quick Start - Reference Guides - Best Practices Overview Build comprehensive test suites for frontend applications including unit tests, integration tests, and end-to-end tests with proper coverage and assertions. When to Use - Component testing - Integration testing - End-to-end testing - Regression prevention - Quality assurance - Test-driven development Quick Start Minimal working example: Reference Guides Detailed implementations in the directory: | Guide | Contents | |---|---| | Jest Unit Testing (React) | Jest Unit Testing (R…

: '\u003crootDir>/src/$1'\n },\n setupFilesAfterEnv: ['\u003crootDir>/src/setupTests.ts'],\n transform: {\n '^.+\\\\.tsx?

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

: ['ts-jest', {\n tsconfig: {\n jsx: 'react-jsx'\n }\n }]\n }\n};\n\n// package.json scripts\n{\n \"scripts\": {\n \"test\": \"jest\",\n \"test:watch\": \"jest --watch\",\n \"test:coverage\": \"jest --coverage\",\n \"cypress\": \"cypress open\",\n \"cypress:headless\": \"cypress run\"\n }\n}\n```\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":966,"content_sha256":"6994819b124f853c3e6e13c9efec9675383b63cc308fc0ffe3a452f98ae8c4f0"},{"filename":"references/vitest-for-vue-testing.md","content":"# Vitest for Vue Testing\n\n## Vitest for Vue Testing\n\n```typescript\n// Button.spec.ts\nimport { describe, it, expect } from \"vitest\";\nimport { mount } from \"@vue/test-utils\";\nimport Button from \"./Button.vue\";\n\ndescribe(\"Button.vue\", () => {\n it(\"renders slot content\", () => {\n const wrapper = mount(Button, {\n slots: {\n default: \"Click me\",\n },\n });\n expect(wrapper.text()).toContain(\"Click me\");\n });\n\n it(\"emits click event\", async () => {\n const wrapper = mount(Button);\n await wrapper.trigger(\"click\");\n expect(wrapper.emitted(\"click\")).toHaveLength(1);\n });\n\n it(\"disables button when disabled prop is true\", () => {\n const wrapper = mount(Button, {\n props: { disabled: true },\n });\n expect(wrapper.attributes(\"disabled\")).toBeDefined();\n });\n\n it(\"applies variant class\", () => {\n const wrapper = mount(Button, {\n props: { variant: \"primary\" },\n });\n expect(wrapper.classes()).toContain(\"bg-blue-500\");\n });\n});\n\n// composable.spec.ts\nimport { describe, it, expect } from \"vitest\";\nimport { useCounter } from \"./useCounter\";\n\ndescribe(\"useCounter\", () => {\n it(\"initializes with default value\", () => {\n const { count } = useCounter();\n expect(count.value).toBe(0);\n });\n\n it(\"increments count\", () => {\n const { count, increment } = useCounter();\n increment();\n expect(count.value).toBe(1);\n });\n});\n```\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":1401,"content_sha256":"5b76fd5c0ca5be29b142ebe64cbba12bef901c56d79cd2745f43a13c4106f31b"},{"filename":"scripts/scaffold-tests.sh","content":"#!/bin/bash\n# scaffold-tests.sh - Generate test file scaffolding\n# Usage: ./scaffold-tests.sh \u003csource_file> [--framework jest|pytest|mocha]\n\nset -euo pipefail\n\nSOURCE_FILE=\"${{1:?Usage: $0 \u003csource_file> [--framework jest|pytest|mocha]}}\"\nFRAMEWORK=\"${{2:-jest}}\"\n\necho \"Scaffolding tests for: $SOURCE_FILE (framework: $FRAMEWORK)\"\n\n# TODO: Implement test scaffolding logic\n# - Parse source file for exported functions/classes\n# - Generate test stubs for each export\n# - Include setup/teardown boilerplate\n# - Add common assertion patterns\n\necho \"Test scaffolding complete.\"\n","content_type":"application/x-sh; charset=utf-8","language":"bash","size":574,"content_sha256":"34e38c648eb211166f15b2e655e6620d403fef157fb3b40a81643bfe21a2c543"},{"filename":"templates/test-template.js","content":"// Test Template\n// TODO: Customize for your testing framework and project\n\ndescribe('ModuleName', () => {\n // Setup\n beforeEach(() => {\n // TODO: Add test setup\n });\n\n afterEach(() => {\n // TODO: Add cleanup\n });\n\n describe('functionName', () => {\n it('should handle the happy path', () => {\n // TODO: Add assertion\n });\n\n it('should handle edge cases', () => {\n // TODO: Add edge case tests\n });\n\n it('should handle errors gracefully', () => {\n // TODO: Add error handling tests\n });\n });\n});\n","content_type":"text/javascript; charset=utf-8","language":"javascript","size":541,"content_sha256":"b515bc4dd35d9510563df2689c1ade36a69a2d1792a2d17a43b92ed8b9a4b750"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Frontend Testing","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Table of Contents","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Overview","type":"text","marks":[{"type":"link","attrs":{"href":"#overview","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"When to Use","type":"text","marks":[{"type":"link","attrs":{"href":"#when-to-use","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Quick Start","type":"text","marks":[{"type":"link","attrs":{"href":"#quick-start","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Reference Guides","type":"text","marks":[{"type":"link","attrs":{"href":"#reference-guides","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Best Practices","type":"text","marks":[{"type":"link","attrs":{"href":"#best-practices","title":null}}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Build comprehensive test suites for frontend applications including unit tests, integration tests, and end-to-end tests with proper coverage and assertions.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Component testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Integration testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"End-to-end testing","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Regression prevention","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Quality assurance","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Test-driven development","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"paragraph","content":[{"text":"Minimal working example:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// Button.test.tsx\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport '@testing-library/jest-dom';\nimport { Button } from './Button';\n\ndescribe('Button Component', () => {\n it('renders button with text', () => {\n render(\u003cButton>Click me\u003c/Button>);\n expect(screen.getByRole('button')).toHaveTextContent('Click me');\n });\n\n it('calls onClick handler when clicked', () => {\n const handleClick = jest.fn();\n render(\u003cButton onClick={handleClick}>Click\u003c/Button>);\n\n fireEvent.click(screen.getByRole('button'));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('disables button when disabled prop is true', () => {\n render(\u003cButton disabled>Click me\u003c/Button>);\n expect(screen.getByRole('button')).toBeDisabled();\n });\n\n it('applies variant styles correctly', () => {\n// ... (see reference guides for full implementation)","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Reference Guides","type":"text"}]},{"type":"paragraph","content":[{"text":"Detailed implementations in the ","type":"text"},{"text":"references/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory:","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Guide","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Contents","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Jest Unit Testing (React)","type":"text","marks":[{"type":"link","attrs":{"href":"references/jest-unit-testing-react.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Jest Unit Testing (React)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"React Testing Library Integration Tests","type":"text","marks":[{"type":"link","attrs":{"href":"references/react-testing-library-integration-tests.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"React Testing Library Integration Tests","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Vitest for Vue Testing","type":"text","marks":[{"type":"link","attrs":{"href":"references/vitest-for-vue-testing.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Vitest for Vue Testing","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Cypress E2E Testing","type":"text","marks":[{"type":"link","attrs":{"href":"references/cypress-e2e-testing.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Cypress E2E Testing","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Test Coverage Configuration","type":"text","marks":[{"type":"link","attrs":{"href":"references/test-coverage-configuration.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Test Coverage Configuration","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Best Practices","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"✅ DO","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Follow established patterns and conventions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Write clean, maintainable code","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add appropriate documentation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Test thoroughly before deploying","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"❌ DON'T","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Skip testing or validation","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Ignore error handling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Hard-code configuration values","type":"text"}]}]}]}]},"metadata":{"date":"2026-11-02","name":"frontend-testing","author":"@skillopedia","source":{"stars":375,"repo_name":"useful-ai-prompts","origin_url":"https://github.com/aj-geddes/useful-ai-prompts/blob/HEAD/skills/frontend-testing/SKILL.md","repo_owner":"aj-geddes","body_sha256":"137887fa0337785f5e553d2353ae076890c50ae1671a61ec46001b59dbb7cbe4","cluster_key":"65ca2328a3fe697f398f41856196193a8656b12266f426ab302532603f22fc2e","clean_bundle":{"format":"clean-skill-bundle-v1","source":"aj-geddes/useful-ai-prompts/skills/frontend-testing/SKILL.md","text_bytes":11366,"source_commit":"3f5182cfd739fc113f4af5244a1cf342ad7f7911","skills_sh_rank":19451,"attachment_count":7,"text_attachments":7,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"skills/frontend-testing/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"testing-qa","category_label":"Testing"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"testing-qa","import_tag":"skills-sh-top20k-2026-11","description":"Implement comprehensive frontend testing using Jest, Vitest, React Testing Library, and Cypress. Use when building robust test suites for UI and integration tests.\n"}},"renderedAt":1793666294080}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.