Enzyme attend qu'un adaptateur soit configuré

Question

J'ai créé un nouveau Réagir application par créer-réagir-app et je voulais écrire un test unitaire pour un composant nommé "MessageBox" que j'ai créé dans l'application. C'est l'unité de test 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 également ajouté un fichier sous le répertoire 'src' dossier 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 exécuté par:

npm test

et j'ai eu le message d'erreur:

Enzyme Erreur Interne: Enzyme s'attend à un adaptateur d'être configuré, mais aucune n'a été trouvée. Pour configurer un adaptateur, vous devriez appeler Enzyme.configure({ > adapter: new Adapter() })

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

Answer 1

Ajoutez-le à votre fichier de cas 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', ()=> {
     ...
})
 

Answer 2

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" }
 

Mise à jour:

 Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.
 

https://jestjs.io/docs/en/configuration

Answer 3

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', ()=> {
     ...
})
 

Answer 4

Comme l'a dit Priyank , si vous utilisez l'application Create React, elle récupérera la configuration de src/setupTests.js .

Ajouter:

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

configure({ adapter: new Adapter() })
 

Answer 5

Beaucoup de réponses sont en train de dire à l'importation setupTests.js dans votre fichier de test. Ou configurer l'enzyme de carte dans chaque fichier de test. Qui n'a résoudre le problème immédiat.

Mais à long terme, si vous ajoutez un jest.config.js le fichier à la racine du projet. Vous pouvez le configurer pour exécuter un fichier de configuration sur le lancement.

jest.config.js

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

Cela dit Plaisanterie à exécuter setupTest.ts chaque fois qu'il est lancé.

De cette façon, si vous avez besoin d'ajouter des polyfills ou ajouter mondiale se moquer comme localstorage, vous pouvez l'ajouter à votre setupTests le fichier et configuré partout.

L'Enzyme docs ne couvrent pas l'intégration avec la Plaisanterie, de sorte qu'il est déroutant de fusionner les deux ensemble.