web-dev-qa-db-fra.com

Où le fichier d'installation de l'enzyme doit-il être écrit?

Hier, j'ai mis à niveau mon projet React vers la version 16.0, mais j’ai constaté que Enzyme avait quelques problèmes

    Error: 
      Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
      configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:
      import Adapter from 'enzyme-adapter-react-15';
      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

    at validateAdapter (spec/components/page_components/SongListItem/index.spec.js:9:1141986)
    at getAdapter (spec/components/page_components/SongListItem/index.spec.js:9:323041)
    at new ReactWrapper (spec/components/page_components/SongListItem/index.spec.js:9:622193)
    at mount (spec/components/page_components/SongListItem/index.spec.js:9:2025476)
    at UserContext.<anonymous> (spec/components/page_components/SongListItem/index.spec.js:9:1235741)

Et j'ai trouvé une solution sur le site officiel site web

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Mais j'ai un problème: où le fichier d'installation d'enzymes doit-il être écrit? En face de chaque fichier de test?

J'ai essayé d'ajouter le code ci-dessus à l'un des fichiers de test, mais il y a toujours un problème

 Internal error: attempt to prepend statements in disallowed (non-array) context at C:/Users/killer/workspace/react/NetEase-Cloud-Music-Web/spec/components/page_components/SongListItem/index.spec.js

This est l'adresse de mon projet

reactjsenzyme
31
Archie Shi

J'ai eu un problème similaire

Si vous utilisez jest pour exécuter vos tests, vous pouvez créer un test-setup.js fichier et ajoutez l'extrait de la documentation sur les enzymes:

// test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

ajoutez ensuite une clé setupTestFrameworkScriptFile dans votre configuration plaisant et pointez sur ce fichier. Par exemple, si votre configuration de plaisanterie est en package.json:

// package.json
{
    ...,
    "jest": {
        "setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
    }
}

depuis les documents jest https://facebook.github.io/jest/docs/fr/configuration.html#setuptestframeworkscriptfile-string :

Le chemin d'accès à un module qui exécute du code pour configurer ou configurer le framework de test avant chaque test. Etant donné que setupFiles est exécuté avant que le framework de test ne soit installé dans l'environnement, ce fichier de script vous offre la possibilité d'exécuter du code immédiatement après que le framework de test a été installé dans l'environnement.

Ceci s’exécutera après l’initialisation de votre environnement de blague, mais avant que vos tests enzymatiques soient exécutés.

Pour les personnes utilisant create-react-app
Vous devez exécuter yarn eject ou npm run eject, alors vous verrez la configuration de plaisanterie dans votre package.json.
De plus, setupTestFrameworkScriptFile est actuellement obsolète en faveur de setupFilesAfterEnv.

48
bradywatkinson

Pour les personnes utilisant create-react-app , le chemin prévu pour votre fichier d'installation est src/setupTests.js. Voir le documentation (README) sur GitHub:

Initialisation de l'environnement de test

Remarque: cette fonctionnalité est disponible avec [email protected] et supérieur. Si votre application utilise une API de navigateur que vous devez simuler dans vos tests ou si vous avez simplement besoin d'une configuration globale avant d'exécuter vos tests, ajoutez un fichier src/setupTests.js à votre projet. Il sera automatiquement exécuté avant d'exécuter vos tests.

(Create-react-app ne gérant pas, du moins dans la v1.4.1, l'option setupTestFrameworkScriptFile dans le package.json).

20
VinceOPS

Mise à jour juin 2019

Celui qui utilise CRA (create-react-app), src/setupTests.js ne fonctionnera pas! Créer jest.config.js fichier dans le dossier racine du projet et collez le contenu ci-dessous,

module.exports = {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(scss|sass|css)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
}

ModuleNameMapper évitera les instructions d'importation de fichiers statiques (facultatif).

Puisque setupTestFrameworkScriptFile est obsolète, nous devons donc utiliser la valeur de la propriété setupFilesAfterEnv en tant que tableau.

Assurez-vous d'avoir setupTests.js fichier situé dans le dossier src de votre projet ou spécifiez l’emplacement de votre fichier setupTests.js dans votre projet.

Plus d'infos

setupTests.js fichier doit avoir ci-dessous le contenu,

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

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

Cette configuration fonctionne pour réagir 16

1
Stack Overflow User