Ne pouvait pas trouver un fichier de déclaration de l'enzyme de-carte-réagir-16?

J'ai été en utilisant l'Enzyme de tester des composants dans mon Réagir application pendant un certain temps. Après la mise à jour des packages pour la première fois en quelques semaines, j'ai commencé à avoir une erreur 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 procéder pour installer 'enzyme-adapter-react-16' comme décrit dans le lien et ajouter les lignes suivantes dans 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 caractères d'imprimerie, j'ai deux problèmes nouveaux.

Ne pouvait pas trouver un fichier de déclaration de l'enzyme de-carte-réagir-16?
Ne pouvait pas trouver un fichier de déclaration de l'enzyme de-carte-réagir-16?

De clarifier les images de la première erreur, TS7016, c'est qu'il ne sont pas tous les types de enzyme-adapter-react-16, et la deuxième erreur, TS2339, dit que enzyme ne possède pas la propriété configure.

Je suis relativement nouveau à la Machine donc j'ai besoin d'aide. J'ai essayé d'installer les types de enzyme-adapter-react-16 mais ceux qui ne semblent pas exister.

Dois-je essayer de l'ajouter moi-même, ou est-il une manière que je peux éviter ce problème tous ensemble?

Également curieux de savoir ce que fait cette erreur apparaît. Je n'ai pas besoin d'un Adaptateur avant de, pourquoi maintenant?

Cela ne semble pas être un problème pour moi. Je suis en utilisant enzyme-adapter-react-16.2 avec "enzyme": "^3.6.0". J'ai @types/enzyme 3.1.13 les déclarations de type de fichier installé.

OriginalL'auteur langkilde | 2017-09-26

  1. 18

    Dois-je essayer de l'ajouter moi-même, ou est-il une manière que je peux éviter ce problème tous ensemble?

    Je crois que vous avez raison qu'il n'existe actuellement pas de types pour enzyme-adapter-react-16 - c'est assez nouveau, il semblerait que personne n'a créé aucun encore.

    Vous pouvez les créer vous-même, et si vous pensiez qu'ils étaient bien définis, vous pourriez potentiellement contribuer à DefinitelyTyped à utiliser pour les autres. Pour "éviter" le problème, vous pouvez obtenir la Machine à ignorer le fait qu'il n'a pas de type d'information.

    D'ignorer les erreurs de type:

    • Pour la première erreur, le message d'erreur essaie d'aider avec le "ajouter une nouvelle déclaration.d.ts) fichier ...". Ainsi, vous pouvez créer un fichier (j'ai l'habitude de le mettre dans un dossier appelé "types"), quelque chose comme enzymeAdapter.d.ts, et de rendre le contenu declare module 'enzyme-adapter-react-16'; (à partir du message d'erreur). Cela indiquera tapuscrit à seulement traiter de l'objet importé comme any type (ie. aucun type de contrôle).

    • Pour la deuxième erreur, vous pouvez lancer le enzyme importation de any, puis d'appeler configure. Par exemple: (enzyme as any).configure({ adapter: new Adapter() });. Si tslint se plaint à l'aide de any, vous pouvez obtenir de l'ignorer juste cette ligne avec un //tslint:disable-next-line:no-any commentaire 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() });

    Également curieux de savoir ce que fait cette erreur apparaît. Je n'ai pas besoin d'un Adaptateur avant de, pourquoi maintenant?

    C'est un nouveau choix de conception de l' enzyme projet pour la version 3 - vous pouvez lire les détails sur les principaux changements depuis la version 2.x ici. Je pense que la carte d'approche est de faire de la manipulation des différents besoins pour soutenir les différentes versions de réagir plus facile et plus cohérente.

    Super! Merci @jono travail! 🙂
    Pas de problème @langkilde 🙂 Pour le futur, les personnes, celles-ci ne devraient être que temporaires des solutions de rechange jusqu'à ce que le typings rattraper avec les bibliothèques.
    FYI: la mise à jour vers la dernière version de @types/enzyme (v2.8.9) doit maintenant inclure le configure de la fonction, de sorte que la 2ème erreur de contourner ce ne devrait plus être nécessaire. Les gens se déplacent rapidement!
    dois-je mettre ces configuration de l'adaptateur de ligne de chaque fichier de test?
    Il ressemble merveilleux open source contributeurs ont maintenant ajouté types de enzyme-adapter-react-16 ainsi donc, ni de travail devrait être plus nécessaire.

    OriginalL'auteur Jono Job

  2. 13

    Vous êtes à l'aide de Réagir de plus de 16 ans et ont éjecté de votre application ajouter les paquets suivants:

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

    Ensuite, vous avez à mettre en place Enzyme par créer le fichier src/setupTests.js. Ajouter cette:

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

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

    Enfin, vous devrez modifier le package.json - ajouter /src/setupTests.js à la setupFiles tableau:

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

    Modifier setupFiles tableau

    Avant:
    Avant de 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!!

    OriginalL'auteur Anas

  3. 1

    M'a pris beaucoup trop de temps à résoudre. Espérons que cela aide quelqu'un:

    À l'aide de Create-Réagir-App 2.1.3 avec une enzyme 3.8.0, enzyme-adaptateur-réagir-16: 1.7.1, enzyme-à-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() });

    puis en dire un composant que vous souhaitez tester w/enzyme & plaisanterie:

    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 juste par souci d'exhaustivité -- aucun autre config qui se passe:

    paquet.json: 

    "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
      }
    Pourquoi avez-vous importer de configurer les 2 fois, puis remplacer 2 fois? C'est ---> Enzyme.configurer({ carte: nouvelle Carte() }); est la même que ---> configurer({ carte: nouvelle Carte() });

    OriginalL'auteur Oliver