mirror of
https://github.com/MaksTinyWorkshop/_Assistant_Lead_Tech
synced 2026-04-06 13:31:43 +02:00
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# Frontend — Patterns : Tests
|
|
|
|
> Extrait de la base de connaissance Lead_tech. Voir `knowledge/frontend/patterns/README.md` pour l'index complet.
|
|
|
|
---
|
|
|
|
<a id="pattern-tests-styles-sans-renderer"></a>
|
|
## Pattern : Tests de styles React Native sans renderer JSX
|
|
|
|
### Synthèse
|
|
|
|
- **Objectif** : tester les tokens et styles de composants React Native dans un environnement Jest `testEnvironment: node` sans renderer JSX.
|
|
- **Contexte** : config Jest avec `transform: { '^.+\\.ts$': 'ts-jest' }` — les `.tsx` ne sont pas transformés.
|
|
- **Quand l'utiliser** : tokens de thème, logique pure, valeurs de style exportées.
|
|
- **Quand l'éviter** : rendu conditionnel (styles dynamiques inline) — nécessite `@testing-library/react-native`.
|
|
|
|
### Analyse
|
|
|
|
- **Avantages** :
|
|
- teste que le composant utilise les bons tokens, pas seulement que les tokens ont des valeurs
|
|
- détecte les régressions de style sans renderer
|
|
- rapide, aucune config Jest supplémentaire
|
|
- **Limites / vigilance** :
|
|
- ne teste pas le style calculé au runtime (style conditionnel dynamique)
|
|
|
|
### Validation
|
|
|
|
- Validé le : 19-03-2026
|
|
- Contexte technique : React Native / Jest / ts-jest — app-alexandrie story 0.2
|
|
|
|
### Implémentation
|
|
|
|
```typescript
|
|
// Button.tsx — exporter le StyleSheet avec un nom préfixé
|
|
export const buttonStyles = StyleSheet.create({
|
|
base: { borderRadius: 20, height: 57 },
|
|
primary: { backgroundColor: colors.primary },
|
|
});
|
|
export function Button(...) { ... }
|
|
|
|
// ui-components.spec.ts — importer et vérifier les tokens
|
|
import { buttonStyles } from './Button';
|
|
import { colors } from '@/theme';
|
|
|
|
it('variante primary utilise colors.primary', () => {
|
|
expect(buttonStyles.primary.backgroundColor).toBe(colors.primary);
|
|
});
|
|
```
|
|
|
|
### Deux niveaux de tests UI recommandés
|
|
|
|
1. `.spec.ts` (node) : tokens, valeurs, logique pure
|
|
2. `.spec.tsx` (config séparée avec renderer) : rendu visuel, interactions
|