1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import { expect } from '@playwright/test';
import { prepareTestFactory } from './shared-component-tests.js';
const { test, createTests } = prepareTestFactory({ root: './fixtures/react-component/' });
const config = {
counterComponentFilePath: './src/components/Counter.jsx',
componentFilePath: './src/components/JSXComponent.jsx',
};
test.describe('React components in Astro files', () => {
createTests({
...config,
pageUrl: '/',
pageSourceFilePath: './src/pages/index.astro',
});
});
test.describe('React components in MDX files', () => {
createTests({
...config,
pageUrl: '/mdx/',
pageSourceFilePath: './src/pages/mdx.mdx',
});
});
test.describe('dev', () => {
test('Loads .react suffix', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const suffix = page.locator('#suffix');
expect(await suffix.textContent()).toBe('suffix toggle false');
await suffix.click();
expect(await suffix.textContent()).toBe('suffix toggle true');
});
});
test.describe('React client id generation', () => {
test('react components generate unique ids', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const components = page.locator('.react-use-id');
await expect(components).toHaveCount(5);
const staticId = await components.nth(0).getAttribute('id');
const hydratedId0 = await components.nth(1).getAttribute('id');
const hydratedId1 = await components.nth(2).getAttribute('id');
const clientOnlyId0 = await components.nth(3).getAttribute('id');
const clientOnlyId1 = await components.nth(4).getAttribute('id');
console.log('ho ho', staticId, hydratedId0, hydratedId1, clientOnlyId0, clientOnlyId1);
expect(staticId).not.toEqual(hydratedId0);
expect(hydratedId0).not.toEqual(hydratedId1);
expect(hydratedId1).not.toEqual(clientOnlyId0);
expect(clientOnlyId0).not.toEqual(clientOnlyId1);
});
});
|
