arrow-left Back to topicQuizComponents (experimental)Check yourself1.You're testing an OrderForm component. You write vi.mock('./api/orders', () => ({ createOrder: vi.fn() })) at the top of your component test file, expecting the mock to intercept API calls made by the component. But the component still calls the real API. Why?vi.mock() syntax is wrong for Playwright component testsvi.mock() runs in Node.js (where the test runs) but the component runs in the browser — the browser's module system is separate, so the mock never reaches the component's API importYou need to import the mock before the component importComponent tests don't support mocking at all2.What environment does the component run in during a Playwright component test?JSDOM — a simulated browser environment in Node.jsA real browser (Chromium, Firefox, or WebKit) — same engine as e2e testsA headless Node.js VM with a virtual DOMA sandboxed iframe within the test runner process3.You're setting up Playwright component testing for a React project. Which package do you install?@playwright/test — the standard test runner works for components too@playwright/experimental-ct-react — the framework-specific component testing packageplaywright-react — a community component testing adapter@playwright/react — the official React integration package4.Your OrderForm component accepts an onSubmit(order: Order) callback. Order contains a non-serializable Date object. You try to pass the callback directly via mount() but crossing the Node/browser boundary fails. What's the fix?Use JSON.stringify/parse to serialize the Date before passingCreate a wrapper component that accepts only a serializable string (e.g., ISO date string) and internally converts it to Date before passing to OrderFormAdd a special Playwright serializer for the Date typeMove the test to an e2e test that can handle complex objects5.You're testing a Vue component that uses vue-router for navigation links. The component crashes because there's no router instance. How do you set up the router for all component tests?Import and install the router directly at the top of each test fileUse the beforeMount hook in playwright/index.ts to call app.use(createRouter(...)) before each mountAdd a global router plugin in playwright.config.tsPass a router instance as a prop to the component via mount()6.Which configuration object lets a specific test pass per-test data to the beforeMount hook in playwright/index.ts?testInfo.config — the test configuration objecthooksConfig — passed as a property in the mount() options objectprocess.env — set environment variables before calling mount()test.use() — the same mechanism used for playwright fixtures7.Should you call mount() in beforeEach or inside each individual test?In beforeEach — it avoids code repetition and the component reference is available to all tests in the describe blockInside each test — tests are self-contained, easier to understand, and you can pass different props or hooksConfig per test without shared state leaking between testsBoth are equivalent — use whichever your team prefersIn beforeAll — mount once and reuse the component across all tests for speed8.A ProductCard component fetches /api/product/123 on mount and renders the price. In a component test, you want to control what the API returns. What's the correct approach?Mock the fetch module with vi.mock('node-fetch', ...) at the top of the test fileUse context.route('/api/product/*', route => route.fulfill({ json: { price: 99 } })) in a beforeMount hook to intercept the browser's HTTP requestPass the mock data as a prop and skip the API callStart a real test server that responds to /api/product/123Submit answersarrow-left PreviousAgentsMock browser APIsNext arrow-right