web-dev-qa-db-fra.com

Impossible de trouver le fichier de déclaration pour enzyme-adaptateur-react-16?

J'utilise Enzyme pour tester les composants dans mon application React depuis un certain temps. Après avoir mis à jour mes paquets pour la première fois en quelques semaines, j'ai commencé à avoir une erreur lors de mes tests.

 FAIL  src/__tests__/title.test.ts
  ● Testing title component › renders
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. [...] 
To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

Je vais installer 'enzyme-adapter-react-16' comme décrit dans le lien et ajouter les lignes suivantes à mon fichier de test:

import * as enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

Cependant, comme mon application est écrite en TypeScript, je rencontre maintenant deux nouveaux problèmes.

 error1  error2

Pour clarifier les images, la première erreur, TS7016, est qu'il n'y a pas de type pour enzyme-adapter-react-16, et la deuxième erreur, TS2339, indique que enzyme n'a pas la propriété configure.

Je suis relativement nouveau sur TypeScript, alors j'ai besoin d'aide. J'ai essayé d'installer des types pour enzyme-adapter-react-16 mais ceux-ci ne semblent pas exister. 

Devrais-je essayer de les ajouter moi-même, ou y at-il un moyen d'éviter ce problème tous ensemble?

Aussi curieux de savoir ce qui a fait apparaître cette erreur. Je n'avais pas besoin d'un adaptateur auparavant, pourquoi maintenant?

reactjstypescripttestingenzyme
13
langkilde

Devrais-je essayer de les ajouter moi-même ou y a-t-il un moyen d'éviter ce problème tous ensemble?

Je pense que vous avez raison de dire qu’il n’existe actuellement aucun type pour enzyme-adapter-react-16 - c’est assez nouveau, il semblerait donc que personne n’en a encore créé. 

Vous pouvez les créer vous-même, et si vous pensiez qu'elles étaient bien définies, vous pouvez éventuellement les contribuer à DefinitelyTyped pour que d'autres les utilisent. Pour "éviter" le problème, vous pouvez faire en sorte que TypeScript ignore le fait qu'il ne contient aucune information de type.

Pour ignorer les erreurs de type:

  • Pour la première erreur, le message d'erreur essaie de vous aider avec "l'ajout d'un nouveau fichier de déclaration (.d.ts) ...". Ainsi, vous pouvez créer un fichier (je le mets généralement dans un dossier appelé "/ types") appelé quelque chose comme enzymeAdapter.d.ts et créer le contenu declare module 'enzyme-adapter-react-16'; (à partir du message d'erreur). En gros, cela indique à TypeScript de traiter simplement l'objet importé comme un type any (c'est-à-dire sans vérification de type).

  • Pour la deuxième erreur, vous pouvez convertir l’importation enzyme en any, puis appeler configure. Par exemple: (enzyme as any).configure({ adapter: new Adapter() });. Si tslint se plaint d'utiliser any, vous pouvez lui demander d'ignorer uniquement cette ligne avec un commentaire // tslint:disable-next-line:no-any ci-dessus.

Code complet:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

// tslint:disable-next-line:no-any
(enzyme as any).configure({ adapter: new Adapter() });

Aussi curieux de savoir ce qui a fait apparaître cette erreur. Je n'avais pas besoin d'un adaptateur auparavant, pourquoi maintenant?

Ceci est un nouveau choix de conception du projet enzyme pour la version 3 - vous pouvez lire les détails des modifications majeures depuis la version 2.x ici . Je pense que l’approche consiste à adapter les différentes exigences de prise en charge des différentes versions de réag à plus de cohérence et de cohérence. 

18
Jono Job

Si vous utilisez React 16+ et que votre application a été éjectée, ajoutez les packages suivants:

yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev

Ensuite, vous devez configurer Enzyme en créant le fichier src/setupTests.js. Ajoute ça:

import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Enfin, vous devez modifier le package.json - ajouter /src/setupTests.js au tableau setupFiles:

"setupFiles": [
  "<rootDir>/config/polyfills.js",
  "<rootDir>/src/setupTests.js"
],

Modifier le tableau setupFiles

Avant: Avant capture d'écran

Après: Après la capture d'écran

Je pense que nous pouvons tous convenir que le vert est une belle couleur !!

13
Anas

Cela m'a pris trop de temps à résoudre. J'espère que cela aide quelqu'un:

Utilisation de Create-React-App 2.1.3 avec l'enzyme 3.8.0, enzyme-adapter-react-16: 1.7.1, enzyme-to-json 23.6.0

Solution pour moi:

src/setupTests.js:

import Enzyme, { configure } from "enzyme";
const Adapter = require("enzyme-adapter-react-16");

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

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

ensuite, dans le composant que vous voulez tester avec enzyme et blague:

import React from "react";
import Enzyme from "enzyme";
import Component from "./component";

const { shallow } = Enzyme; //whatever you want to use here



test("component exists", () => {
  expect(Component).toBeDefined();
});

// ce n'est pas nécessaire, mais pour être complet - aucune autre configuration n'est en cours:

package.json: 

"jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
      }
1
Oliver