web-dev-qa-db-fra.com

Enzyme s'attend à ce qu'un adaptateur soit configuré

J'ai créé une nouvelle application React avec create-react-app et je voulais écrire un test unitaire pour un composant nommé "MessageBox" que j'ai créé dans l'application. C'est le test unitaire que j'ai écrit: 

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';

test('message box', () => {
   const app = {setState: jest.fn()};
   const wrapper = shallow(<MessageBox app={app}/>);
   wrapper.find('button').at(0).simulate('click');
   expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});

J'ai aussi ajouté un fichier sous le dossier 'src' nommé 'setupTests.js' avec le contenu: 

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

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

Je l'ai couru par:

test npm

et j'ai eu l'erreur: 

Erreur interne Enzyme: Enzyme s'attend à ce qu'un adaptateur soit configuré, mais trouvé aucun. Pour configurer un adaptateur, appelez Enzyme.configure({ > adapter: new Adapter() }).

Savez-vous ce qui peut résoudre ce problème?

reactjsenzymecreate-react-app
8
CrazySynthax

Ajoutez-le à votre dossier de test.

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

configure({adapter: new Adapter()});
test('message box', ()=> {
     ...
})
18
GAJESH PANIGRAHI

Le fichier 'setupTests' doit être importé dans le fichier de test:

import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';
import "../setupTests"

test('message box', ()=> {
     ...
})
5
CrazySynthax

De plus, si vous ne souhaitez pas importer votre fichier setupTests.js dans chaque fichier de test, vous pouvez le placer dans votre dossier package.json:

  "jest": {
     "setupTestFrameworkScriptFile": "./test/setupTests.js" }
4
type_master_flash

Comme Priyank a dit , si vous utilisez Create React App, il va récupérer la configuration à partir de src/setupTests.js.

Ajouter:

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

configure({ adapter: new Adapter() })
2
Mikel

Ajoutez import React from 'react'; en haut de votre fichier.

Vous utilisez la syntaxe JSX <MessageBox app={app}/>, qui transpile dans React.createComponent(...). Pour que cela fonctionne, la variable React doit être définie dans la portée du fichier. 

2
user3707125

Vous devez utiliser l'importation comme ceci:

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

Ainsi: (import * en tant qu'adaptateur de ...) renvoie un message "TypeError: Adapter n'est pas un constructeur"

1
Filipe Natanael

Essayez ça comme ça;

import React from 'react';
import App from './containers/App';
import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

describe('App Screen', () => {
  let mountedAppScreen;
  let props;

  const appScreen = () => {
    if (!mountedAppScreen) {
      mountedAppScreen = enzyme.mount(
        <App {...props} />
      );
    }
    return mountedAppScreen;
  }
  it("it always renders div", () => {
    const divs = appScreen().find("div");
    expect(divs.length).toBeGreaterThanOrEqual(1);
  });
});
1
Tolga D.

Beaucoup de réponses disent d'import setupTests.js dans votre fichier de test. Ou Configurez l'adaptateur d'enzyme dans chaque fichier de test. Ce qui résout le problème immédiat. 

Mais à long terme, si vous ajoutez un fichier jest.config.js à la racine du projet. Vous pouvez le configurer pour exécuter un fichier d'installation au lancement.

jest.config.js

module.exports = {
  setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.ts"
}

Cela indique à Jest d'exécuter setupTest.ts à chaque lancement.

Ainsi, si vous avez besoin d’ajouter des polyfill ou du mock global comme localstorage, vous pouvez l’ajouter à votre fichier setupTests et le configurer partout.

La documentation Enzyme ne couvre pas l'intégration à Jest, il est donc déroutant de fusionner ces deux éléments ensemble.

0
Lex

En utilisant la dernière version des bibliothèques, j'ai rencontré la même erreur que celle signalée dans toutes les réponses à cette question. Erreur: TypeError: l'adaptateur n'est pas un constructeur.

J'ai regroupé toutes les étapes nécessaires afin de tester correctement votre composant ReactJS en utilisant Enzyme (J'ai utilisé Jest, mais cela pourrait également fonctionner avec Mocha. Dans ce cas, il suffit de changer le package de test principal) :

1) Bibliothèques (package.json):

"dependencies": {
    "jest": "^23.6.0",
    (...)
}
"devDependencies": {
    "chai": "^4.2.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
   (...)
}

2) TEST SETUP: Vous pouvez configurer l'enzyme pour chaque test. Mais, comme le suggère judicieusement type_master_flash, vous pouvez ajouter un script pour le faire. Pour ce faire, créez un nouveau paramètre dans votre fichier package.json au même niveau que les sessions scripts, dépendances, etc.:

"devDependencies": { 
     (...) 
 },
"jest": {
    "setupTestFrameworkScriptFile": "./tests.setup.js"
 },

Ce fichier peut être n'importe où et vous pouvez le nommer comme vous le souhaitez. N'oubliez pas de configurer l'emplacement de fichier approprié. Dans l'exemple actuel, j'ai stocké mon fichier à la racine de mon projet.

3) tests.setup.js: Comme je l'ai découvert dans Enzyme: TypeError: Adapter n'est pas un constructeur , le problème ici est que nous ne pouvons pas "import ' 'un module avec une exportation par défaut ". La manière appropriée de configurer votre fichier est la suivante:

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

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

Juste cela et vous êtes bon pour tester vos composants.

Salut et espérons que cela aide.

0
Daniel Santana