enzyme

Enzyme

Enzyme est un utilitaire de test JavaScript pour React qui facilite le test de la sortie de vos composants React. Vous pouvez également manipuler, traverser et simuler à certains égards l'exécution compte tenu de la sortie.

L'API d'Enzyme est censée être intuitive et flexible en imitant l'API de JQuery pour la manipulation et la traversée DOM.

Mise à niveau de l'enzyme 2.x ou réagir <16

Êtes-vous ici pour vérifier si Enzyme est compatible ou non avec React 16? Utilisez-vous actuellement Enzyme 2.x? Super! Consultez notre guide de migration pour aider à passer à Enzyme V3 où React 16 est pris en charge.

Installation

Pour commencer avec Enzyme, vous pouvez simplement l'installer via NPM. Vous devrez installer Enzyme avec un adaptateur correspondant à la version de React (ou autre bibliothèque de composants d'interface utilisateur) que vous utilisez. Par exemple, si vous utilisez Enzyme avec React 16, vous pouvez exécuter:

npm i --save-dev enzyme enzyme-adapter-react-16

Chaque adaptateur peut avoir des dépendances supplémentaires des pairs que vous devrez également installer. Par exemple, enzyme-adapter-react-16 a des dépendances par les pairs sur react et react-dom .

À l'heure actuelle, Enzyme a des adaptateurs qui assurent la compatibilité avec React 16.x , React 15.x , React 0.14.x et React 0.13.x

Les adaptateurs suivants sont officiellement fournis par Enzyme et ont la compatibilité suivante avec React:

Ensemble d'adaptateur enzymatique	React Semver Compatibilité
enzyme-adapter-react-16	^16.4.0-0
enzyme-adapter-react-16.3	~16.3.0-0
enzyme-adapter-react-16.2	~16.2
enzyme-adapter-react-16.1	~16.0.0-0 || ~16.1
enzyme-adapter-react-15	^15.5.0
enzyme-adapter-react-15.4	15.0.0-0 - 15.4.x
enzyme-adapter-react-14	^0.14.0
enzyme-adapter-react-13	^0.13.0

Enfin, vous devez configurer Enzyme pour utiliser l'adaptateur que vous souhaitez qu'il utilise. Pour ce faire, vous pouvez utiliser l'API configure(...) de niveau supérieur.

 import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;

Enzyme . configure ( { adapter : new Adapter ( ) } ) ;

Adaptateurs du tiers

Il est possible pour la communauté de créer des adaptateurs (non officiels) supplémentaires qui feront fonctionner Enzyme avec d'autres bibliothèques. Si vous en avez fait un et qu'il n'est pas inclus dans la liste ci-dessous, n'hésitez pas à faire un RP à ce lecture et à ajouter un lien! Les adaptateurs connus du tiers sont:

Package adaptateur	Pour la bibliothèque	Statut
enzyme-adapter-preact-pure	preact	(écurie)
enzyme-adapter-inferno	inferno	(travail en cours)

Tests enzymatiques en cours d'exécution

L'enzyme n'est pas opinée concernant le coureur de test ou la bibliothèque d'assertion que vous utilisez, et devrait être compatible avec tous les principaux coureurs de test et bibliothèques d'assertion. La documentation et les exemples pour l'enzyme utilisent Mocha et Chai, mais vous devriez être en mesure d'extrapoler dans votre cadre de choix.

Si vous souhaitez utiliser Enzyme avec des affirmations personnalisées et des fonctions de commodité pour tester vos composants React, vous pouvez envisager d'utiliser:

• chai-enzyme avec moka / chai.
• jasmine-enzyme avec jasmin.
• jest-enzyme avec plaisanterie.
• should-enzyme pour devraient.js.
• expect-enzyme pour s'attendre.

Utilisation de l'enzyme avec mocha

Utilisation de l'enzyme avec karma

Utilisation de l'enzyme avec navigation

Utilisation d'enzyme avec SystemJS

Utilisation de Enzyme avec WebPack

Utilisation de l'enzyme avec JSDom

Utilisation de l'enzyme avec React Native

Utilisation de l'enzyme avec une plaisanterie

Utilisation de l'enzyme avec laboratoire

Utilisation de l'enzyme avec du ruban adhésif et Ava

Utilisation de base

Rendu peu profond

 import React from 'react' ;
import { expect } from 'chai' ;
import { shallow } from 'enzyme' ;
import sinon from 'sinon' ;

import MyComponent from './MyComponent' ;
import Foo from './Foo' ;

describe ( '<MyComponent />' , ( ) => {
  it ( 'renders three <Foo /> components' , ( ) => {
    const wrapper = shallow ( < MyComponent / > ) ;
    expect ( wrapper . find ( Foo ) ) . to . have . lengthOf ( 3 ) ;
  } ) ;

  it ( 'renders an `.icon-star`' , ( ) => {
    const wrapper = shallow ( < MyComponent / > ) ;
    expect ( wrapper . find ( '.icon-star' ) ) . to . have . lengthOf ( 1 ) ;
  } ) ;

  it ( 'renders children when passed in' , ( ) => {
    const wrapper = shallow ( (
      < MyComponent >
        < div className = "unique" / >
      < / MyComponent >
    ) ) ;
    expect ( wrapper . contains ( < div className = "unique" / > ) ) . to . equal ( true ) ;
  } ) ;

  it ( 'simulates click events' , ( ) => {
    const onButtonClick = sinon . spy ( ) ;
    const wrapper = shallow ( < Foo onButtonClick = { onButtonClick } / > ) ;
    wrapper . find ( 'button' ) . simulate ( 'click' ) ;
    expect ( onButtonClick ) . to . have . property ( 'callCount' , 1 ) ;
  } ) ;
} ) ;

Lire la documentation complète de l'API

Rendu DOM complet

 import React from 'react' ;
import sinon from 'sinon' ;
import { expect } from 'chai' ;
import { mount } from 'enzyme' ;

import Foo from './Foo' ;

describe ( '<Foo />' , ( ) => {
  it ( 'allows us to set props' , ( ) => {
    const wrapper = mount ( < Foo bar = "baz" / > ) ;
    expect ( wrapper . props ( ) . bar ) . to . equal ( 'baz' ) ;
    wrapper . setProps ( { bar : 'foo' } ) ;
    expect ( wrapper . props ( ) . bar ) . to . equal ( 'foo' ) ;
  } ) ;

  it ( 'simulates click events' , ( ) => {
    const onButtonClick = sinon . spy ( ) ;
    const wrapper = mount ( (
      < Foo onButtonClick = { onButtonClick } / >
    ) ) ;
    wrapper . find ( 'button' ) . simulate ( 'click' ) ;
    expect ( onButtonClick ) . to . have . property ( 'callCount' , 1 ) ;
  } ) ;

  it ( 'calls componentDidMount' , ( ) => {
    sinon . spy ( Foo . prototype , 'componentDidMount' ) ;
    const wrapper = mount ( < Foo / > ) ;
    expect ( Foo . prototype . componentDidMount ) . to . have . property ( 'callCount' , 1 ) ;
    Foo . prototype . componentDidMount . restore ( ) ;
  } ) ;
} ) ;

Lire la documentation complète de l'API

Marquage statique rendu

 import React from 'react' ;
import { expect } from 'chai' ;
import { render } from 'enzyme' ;

import Foo from './Foo' ;

describe ( '<Foo />' , ( ) => {
  it ( 'renders three `.foo-bar`s' , ( ) => {
    const wrapper = render ( < Foo / > ) ;
    expect ( wrapper . find ( '.foo-bar' ) ) . to . have . lengthOf ( 3 ) ;
  } ) ;

  it ( 'renders the title' , ( ) => {
    const wrapper = render ( < Foo title = "unique" / > ) ;
    expect ( wrapper . text ( ) ) . to . contain ( 'unique' ) ;
  } ) ;
} ) ;

Lire la documentation complète de l'API

Support React Hooks

L'enzyme prend en charge les crochets React avec certaines limites dans .shallow() en raison de problèmes en amont dans le rendu peu profond de React:

• useEffect() et useLayoutEffect() ne sont pas appelés dans le rendu peu profond React. Problème connexe

• useCallback() ne mémorise pas le rappel dans React Shallow Renderer. Problème connexe

ReactTestUtils.act() enveloppe

Si vous utilisez React 16.8+ et .mount() , Enzyme enveloppera des API ReactTestUtils.act() y compris .simulate() , .setProps() .setContext() , .invoke() envelopper manuellement.

Un modèle commun pour déclencher des gestionnaires avec .act() et affirmer est:

 const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ;

Nous ne pouvons pas envelopper le résultat de .prop() (ou .props() ) avec .act() en enzyme en interne car il brisera l'égalité de la valeur retournée. Cependant, vous pouvez utiliser .invoke() pour simplifier le code:

 const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;

Avenir

Futur enzyme

Contributif

Voir le guide des contributeurs

À l'état sauvage

Les organisations et les projets utilisant enzyme peuvent se répertorier ici.

Licence

Mit