jest preview jest preview plaisante

jest preview

Code Source AI

v0.3.1: Support Less CSS

Télécharger

Logo de prévisualisation en plaisantage

Aperçu de la plaisanterie

Déboguez vos tests de plaisanterie. Sans effort. ??

Démo en plaisantant

Essayez l'aperçu en ligne en ligne. Aucun téléchargement nécessaire!

Utiliser Veest? Essayez l'aperçu le plus vitreux

Pourquoi plaisanter

Lors de la rédaction de tests à l'aide de la plaisanterie, nous déboglons généralement en lisant le code HTML. Parfois, le HTML est trop compliqué pour visualiser l'interface utilisateur dans notre tête. jest-preview a prévisualisé vos tests de plaisanterie directement dans un navigateur, alors vous pouvez voir votre interface utilisateur réelle visuellement, ce qui vous aide à écrire et à déboguer les tests de plaisanterie plus rapidement.

jest-preview est initialement conçu pour fonctionner avec Jest et React-Testing-Library. Le package est agnostique du framework et vous pouvez l'utiliser avec tous les frameworks frontal et les bibliothèques de tests. Pour des exemples:

Vite React
Créer l'application React
NextJS
Svelte
Angulaire
Vue

Caractéristiques

? Prévisualisez le HTML de votre application réelle dans un navigateur en millisecondes.
Auto Recharger le navigateur lors de l'exécution preview. debug () `.
? Soutenir CSS:
- ✅ Importation CSS directe
- ✅ Nombre de bibliothèques CSS-in-JS, telles que:
  - ✅ composants stylisés
  - ✅ émotion
- ✅ CSS mondial
- ✅ modules CSS
- ✅ Sass
? Soutenez les images de visualisation.

Comment utiliser `jest-preview` en 2 lignes de code

 + import preview from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    preview.debug();
  });
});

Ou:

 + import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    debug();
  });
});

Vous devez également démarrer le serveur de prévisualisation Jest en exécutant le CLI jest-preview . Veuillez continuer à lire l'utilisation pour les instructions des détails.

Retour

Vos commentaires sont très importants pour nous. Veuillez aider jest-preview à devenir un meilleur logiciel en soumettant des commentaires ici.

Installation

Voir le guide d'installation sur le site officiel de l'aperçu de la plaisanterie.

Usage

Voir le guide d'utilisation sur le site officiel de l'aperçu de la plaisanterie.

Configurations avancées

L'aperçu de Jest est livré avec une transformation préconfigurée. Cependant, dans les cas d'utilisation plus avancés où vous avez une transformation de code personnalisée, consultez le guide de transformation du code.

Fonctionnalités à venir

Soutenez plus de bibliothèques css-in-js .
Plusieurs aperçus.
Vous l'appelez.

Soutien

Veuillez déposer un problème ou ajouter une nouvelle discussion si vous rencontrez des problèmes.

Vous pouvez également mentionner @jestpreview ou @hung_dev sur Twitter si vous souhaitez avoir plus de discussions ou de suggestions.

Nous avons également un serveur Discord:

Contributif

Nous avons hâte de voir vos contributions. Voir le guide de contribution à contribution.md

Contributeurs

Merci à ces gens merveilleux (clé emoji):

_{Hung Viet Nguyen}	_{Truong nguyen}	_{Viet Huu Doan} ?	_Harveynguyen ️	_{Matt Murphy}	_{Traitanit Huangsri}	_{Thanh Son Nguyen}
_{Minh Nguyen}	_{Kyle (tình vũ)} ?	_{Makoto Tateno}	_{Abhishek Rawat}	_{Huynh duc duy}	_{Nuno Casteleira} ?	_{crafes du dimanche}
_Lunduocaï ?	_huyenuet ️	_{Barrages de Bennett}	_{Steven Rosato} ?	_nhducit ?	_{Benoit Grasset} ?	_{Sergii Kirianov} ?
_{Kim, Harim}	_{Lars Gyrup Brink Nielsen}	_{Mike Shi}	_{Veniamin Krol}	_{Ikko Ashimine}	_{Fermer le pavel} ?	_{David Z Hao} ?
_Rohitbels	_{Rivaldi putra}	_{Long Zhao}	_{Justin Sun} ?