Projekte/TeamRallye

Fork 0

Frontend-Tests: `data-cy` vs. `data-testid` Mismatch (4 Tests) #3

New issue

Closed

opened 2026-05-24 16:19:11 +02:00 by hal9000 · 1 comment

hal9000 commented

2026-05-24 16:19:11 +02:00

Collaborator

Beschreibung

Beim Lauf von frontend/test.sh schlagen vier Tests fehl, weil sie über screen.getByTestId(...) nach einem data-testid-Attribut suchen, die Komponenten den dataCy-Prop aber als data-cy rendern.

Betroffene Tests (4)

src/components/base/__tests__/ConfirmDialog.test.tsx:71 — sollte dataCy-Attribut setzen, wenn es bereitgestellt wird
src/components/base/__tests__/EmptyState.test.tsx:46 — sollte dataCy-Attribut setzen, wenn es bereitgestellt wird
src/components/base/__tests__/LoadingCentered.test.tsx:28 — sollte dataCy-Attribut setzen, wenn es bereitgestellt wird
src/components/base/__tests__/PageHeader.test.tsx:42 — sollte dataCy-Attribut setzen, wenn es bereitgestellt wird

Beobachtetes Verhalten

Render-Output enthält z.B. <div data-cy="test-empty">…</div>, der Test ruft aber screen.getByTestId('test-empty') auf, was nach data-testid sucht → TestingLibraryElementError: Unable to find an element by: [data-testid="test-empty"].

Mögliche Fixes

Eine der beiden Seiten muss angepasst werden — Entscheidung sollte konsistent für alle Base-Komponenten getroffen werden:

Option A — Komponenten zusätzlich data-testid setzen (wenn Cypress-Selektor data-cy erhalten bleiben soll)

<Box data-cy={dataCy} data-testid={dataCy} />

Option B — Tests umstellen auf Container-Query nach data-cy:

expect(container.querySelector('[data-cy="test-empty"]')).toBeTruthy();

Reproduktion

cd frontend
npm run test:run

## Beschreibung Beim Lauf von `frontend/test.sh` schlagen vier Tests fehl, weil sie über `screen.getByTestId(...)` nach einem `data-testid`-Attribut suchen, die Komponenten den `dataCy`-Prop aber als `data-cy` rendern. ## Betroffene Tests (4) - `src/components/base/__tests__/ConfirmDialog.test.tsx:71` — `sollte dataCy-Attribut setzen, wenn es bereitgestellt wird` - `src/components/base/__tests__/EmptyState.test.tsx:46` — `sollte dataCy-Attribut setzen, wenn es bereitgestellt wird` - `src/components/base/__tests__/LoadingCentered.test.tsx:28` — `sollte dataCy-Attribut setzen, wenn es bereitgestellt wird` - `src/components/base/__tests__/PageHeader.test.tsx:42` — `sollte dataCy-Attribut setzen, wenn es bereitgestellt wird` ## Beobachtetes Verhalten Render-Output enthält z.B. `<div data-cy="test-empty">…</div>`, der Test ruft aber `screen.getByTestId('test-empty')` auf, was nach `data-testid` sucht → `TestingLibraryElementError: Unable to find an element by: [data-testid="test-empty"]`. ## Mögliche Fixes Eine der beiden Seiten muss angepasst werden — Entscheidung sollte konsistent für alle Base-Komponenten getroffen werden: **Option A — Komponenten zusätzlich `data-testid` setzen** (wenn Cypress-Selektor `data-cy` erhalten bleiben soll) ```tsx <Box data-cy={dataCy} data-testid={dataCy} /> ``` **Option B — Tests umstellen** auf Container-Query nach `data-cy`: ```tsx expect(container.querySelector('[data-cy="test-empty"]')).toBeTruthy(); ``` ## Reproduktion ```bash cd frontend npm run test:run ```

hal9000 referenced this issue

2026-05-24 16:23:50 +02:00

Frontend-Tests: Style-Assertions schlagen fehl, weil MUI sx keine Inline-Styles erzeugt (2 Tests) #4

hal9000 commented

2026-05-24 16:30:50 +02:00

Author

Collaborator

Behoben — Option A umgesetzt: alle vier Base-Komponenten setzen jetzt data-testid={dataCy} zusätzlich zu data-cy={dataCy}. Damit funktionieren sowohl der Cypress-Selektor (data-cy) als auch React Testing Librarys getByTestId(...).

Geänderte Komponenten

frontend/src/components/base/EmptyState.tsx
frontend/src/components/base/LoadingCentered.tsx
frontend/src/components/base/ConfirmDialog.tsx
frontend/src/components/base/PageHeader.tsx

Pattern in jeder Datei:

data-cy={dataCy}
data-testid={dataCy}

Verifikation

cd frontend
npm run test:run

→ Test Files 4 passed, Tests 32 passed. Die vier dataCy-Assertions sind alle grün.

Behoben — Option A umgesetzt: alle vier Base-Komponenten setzen jetzt `data-testid={dataCy}` zusätzlich zu `data-cy={dataCy}`. Damit funktionieren sowohl der Cypress-Selektor (`data-cy`) als auch React Testing Librarys `getByTestId(...)`. ## Geänderte Komponenten - `frontend/src/components/base/EmptyState.tsx` - `frontend/src/components/base/LoadingCentered.tsx` - `frontend/src/components/base/ConfirmDialog.tsx` - `frontend/src/components/base/PageHeader.tsx` Pattern in jeder Datei: ```tsx data-cy={dataCy} data-testid={dataCy} ``` ## Verifikation ```bash cd frontend npm run test:run ``` → Test Files 4 passed, Tests **32 passed**. Die vier `dataCy`-Assertions sind alle grün.

hal9000 closed this issue

2026-05-24 16:30:53 +02:00

ingo referenced this issue from a commit

2026-05-24 18:08:55 +02:00

fix(frontend): grüne Base-Component-Tests (#3, #4, #5)

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Projekte/TeamRallye#3

No description provided.

Rows
Columns

Frontend-Tests: data-cy vs. data-testid Mismatch (4 Tests) #3