wake-up-neo.net

Enzym erwartet, dass ein Adapter konfiguriert wird

Ich habe eine neue React-Anwendung von create -rease-app erstellt und wollte einen Komponententest für eine Komponente namens "MessageBox" schreiben, die ich in der Anwendung erstellt habe. Dies ist der Unit-Test, den ich geschrieben habe: 

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});
});

Ich habe auch eine Datei unter dem Namen 'setupTests.js' im Ordner 'src' mit folgendem Inhalt hinzugefügt: 

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

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

Ich lief es durch:

npm test

und ich habe den Fehler bekommen: 

Interner Fehler des Enzyms: Enzym erwartet, dass ein Adapter konfiguriert ist, aber fand keine. Um einen Adapter zu konfigurieren, sollten Sie Enzyme.configure({ > adapter: new Adapter() }) aufrufen.

Wissen Sie, was dieses Problem lösen kann?

8
CrazySynthax

Fügen Sie es Ihrer Testfalldatei hinzu.

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

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

Die Datei 'setupTests' muss in die Testdatei importiert werden:

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

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

Wenn Sie Ihre setupTests.js-Datei nicht in jede Testdatei importieren möchten, können Sie sie auch in Ihrem package.json-Ordner ablegen:

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

Wie Priyank sagte , wenn Sie Create React App verwenden, wird die Konfiguration von src/setupTests.js übernommen.

Hinzufügen:

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

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

Fügen Sie import React from 'react'; oben in Ihre Datei ein.

Sie verwenden die JSX-Syntax <MessageBox app={app}/>, die transpiles in React.createComponent(...). Damit dies funktioniert, muss die Variable React im Umfang der Datei definiert werden. 

2
user3707125

Sie müssen den Import folgendermaßen verwenden:

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

Auf diese Weise: (importiere * als Adapter von ...) gibt eine Nachricht zurück "TypeError: Adapter ist kein Konstruktor."

1
Filipe Natanael

Versuchen Sie etw so.

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.

Viele Antworten sagen, setupTests.js in Ihre Testdatei importieren. Oder Enzymadapter in jeder Testdatei konfigurieren. Was löst das unmittelbare Problem. 

Aber langfristig, wenn Sie dem Projektstamm eine jest.config.js-Datei hinzufügen. Sie können es so konfigurieren, dass beim Start eine Setup-Datei ausgeführt wird.

jest.config.js

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

Dies weist Jest an, setupTest.ts bei jedem Start auszuführen.

Auf diese Weise können Sie, wenn Sie Polyfills oder globale Muster wie localstorage hinzufügen müssen, diese zu Ihrer setupTests-Datei hinzufügen und überall dort konfigurieren.

Die Enzymdokumente behandeln nicht die Integration mit Jest, daher ist es verwirrend, diese beiden Elemente miteinander zu verschmelzen.

0
Lex

Bei der Verwendung der neuesten Version der Bibliotheken habe ich bei jeder Antwort auf diese Frage denselben Fehler festgestellt. Fehler: TypeError: Adapter ist kein Konstruktor.

Ich habe alle erforderlichen Schritte gruppiert, um die ReactJS-Komponente ordnungsgemäß mit Enzyme zu testen (Ich habe Jest verwendet, aber es funktioniert möglicherweise auch mit Mocha. Wechseln Sie in diesem Fall einfach das Haupttestpaket) :

1) Bibliotheken (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: Sie können das Enzym bei jedem Test einstellen. Wie von type_master_flash sinnvoll vorgeschlagen, können Sie dazu ein Skript hinzufügen. Erstellen Sie dazu eine neue Einstellung in Ihrer package.json-Datei auf derselben Ebene der Sitzungen Skripts, Abhängigkeiten usw.:

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

Diese Datei kann sich an einem beliebigen Ort befinden und Sie können sie nach Belieben benennen. Denken Sie daran, den richtigen Dateispeicherort festzulegen. Im aktuellen Beispiel habe ich meine Datei im Stammverzeichnis meines Projekts gespeichert.

3) tests.setup.js: Wie ich in Enzyme: TypeError: Adapter festgestellt habe, ist dies kein Konstruktor . Das Problem hier ist, dass wir nicht "import ' 'ein Modul mit Standardexport ". Die richtige Art, Ihre Datei zu konfigurieren, ist:

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

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

Nur das und Sie sind gut, um Ihre Komponenten zu testen.

Prost und hoffe das hilft.

0
Daniel Santana

Für alle, die dies in Zukunft lesen, wird setupTestFrameworkScriptFile in neuen Versionen durch Dokumentation zugunsten von setupFilesAfterEnv abgelehnt. Wir können unsere Datei folgendermaßen hinzufügen:

"setupFiles": [
    "<rootDir>/src/setupTests.js"
]
0
Irandoust