fix(browser): take failure screenshot if `toMatchScreenshot` can't ca… · vitest-dev/vitest@faace1f
1+import type { TestFsStructure } from '../../test-utils'
2+import { describe, expect, test } from 'vitest'
3+import { runInlineTests } from '../../test-utils'
4+import utilsContent from '../fixtures/expect-dom/utils?raw'
5+import { instances, provider } from '../settings'
6+7+const testFilename = 'basic.test.ts'
8+9+async function runBrowserTests(
10+structure: TestFsStructure,
11+) {
12+return runInlineTests({
13+ ...structure,
14+'vitest.config.js': `
15+ import { ${provider.name} } from '@vitest/browser-${provider.name}'
16+ export default {
17+ test: {
18+ browser: {
19+ enabled: true,
20+ screenshotFailures: true,
21+ provider: ${provider.name}(),
22+ ui: false,
23+ headless: true,
24+ instances: ${JSON.stringify(instances.slice(0, 1) /* logic not bound to browser instance */)},
25+ },
26+ reporters: ['verbose'],
27+ update: 'new',
28+ },
29+ }`,
30+})
31+}
32+33+describe('failure screenshots', () => {
34+describe('`toMatchScreenshot`', () => {
35+test('usually does NOT produce a failure screenshot', async () => {
36+const { stderr } = await runBrowserTests(
37+{
38+[testFilename]: /* ts */`
39+ import { page } from 'vitest/browser'
40+ import { test } from 'vitest'
41+ import { render } from './utils'
42+43+ test('screenshot-initial', async ({ expect }) => {
44+ render('<div data-testid="el">Test</div>')
45+ await expect(page.getByTestId('el')).toMatchScreenshot()
46+ })
47+ `,
48+'utils.ts': utilsContent,
49+},
50+)
51+52+expect(stderr).toContain('No existing reference screenshot found; a new one was created.')
53+expect(stderr).not.toContain('Failure screenshot:')
54+})
55+56+test('unstable screenshot fails produces a failure screenshot', async () => {
57+const { stderr } = await runBrowserTests(
58+{
59+[testFilename]: /* ts */`
60+ import { page } from 'vitest/browser'
61+ import { test } from 'vitest'
62+ import { render } from './utils'
63+64+ test('screenshot-unstable', async ({ expect }) => {
65+ render('<div data-testid="el">Test</div>')
66+ await expect(page.getByTestId('el')).toMatchScreenshot({ timeout: 1 })
67+ })
68+ `,
69+'utils.ts': utilsContent,
70+},
71+)
72+73+expect(stderr).toContain('Could not capture a stable screenshot within 1ms.')
74+expect(stderr).toContain('Failure screenshot:')
75+})
76+77+test('`expect.soft` produces a failure screenshot', async () => {
78+const { stderr } = await runBrowserTests(
79+{
80+[testFilename]: /* ts */`
81+ import { page } from 'vitest/browser'
82+ import { test } from 'vitest'
83+ import { render } from './utils'
84+85+ test('screenshot-soft-then-fail', async ({ expect }) => {
86+ render('<div data-testid="el">Test</div>')
87+ await expect.soft(page.getByTestId('el')).toMatchScreenshot()
88+ expect(1).toBe(2)
89+ })
90+ `,
91+'utils.ts': utilsContent,
92+},
93+)
94+95+expect(stderr).toContain('No existing reference screenshot found; a new one was created.')
96+expect(stderr).toContain('expected 1 to be 2')
97+expect(stderr).toContain('Failure screenshot:')
98+})
99+})
100+})