Import gibt undefined zurück, anstatt die Komponente beim Testen zu testen.

Question

Ich bin gerade dabei, einen Test für meine App zu erstellen, und habe ein Problem damit, sie in Jest auszuführen. Mein Code Struktur sieht wie folgt aus:

<pre> 
 
./src/ 
 
├── actions 
 
│   ├── departments.js 
 
│   ├── departments.test.js 
 
├── actionTypes 
 
│   ├── departmentsTypes.js 
 
├── components 
 
│   ├── common 
 
│   │   ├── Form 
 
│   │   │   ├── Form.css 
 
│   │   │   ├── FormElement 
 
│   │   │   │   ├── FormElement.css 
 
│   │   │   │   ├── FormElement.js 
 
│   │   │   │   ├── FormElement.test.js 
 
│   │   │   │   └── __snapshots__ 
 
│   │   │   ├── Form.js 
 
│   │   │   ├── Form.test.js 
 
│   │   │   ├── index.js 
 
│   │   │   └── __snapshots__ 
 
│   │   │    └── Form.test.js.snap 
 
│   │   ├── index.js 
 
│   │   ├── SchemaFormFactory 
 
│   │   │   ├── SchemaFormFactory.js 
 
│   │   │   ├── SchemaFormFactory.test.js 
 
│   │   │   └── __snapshots__ 
 
│   │   │    └── SchemaFormFactory.test.js.snap 
 
│   │   └── TextInput 
 
│   ├── DepartmentSelector 
 
│   │   ├── DepartmentSelector.css 
 
│   │   ├── DepartmentSelector.js 
 
│   │   ├── DepartmentSelector.test.js 
 
│   │   ├── index.js 
 
│   │   └── __snapshots__ 
 
│   ├── index.js 
 
│   ├── MainApp 
 
│   │   ├── index.js 
 
│   │   ├── MainApp.css 
 
│   │   ├── MainApp.js 
 
│   │   ├── MainApp.test.js 
 
│   │   └── __snapshots__ 
 
├── containers 
 
│   ├── DepartmentForm 
 
│   │   └── DepartmentForm.js 
 
│   ├── DepartmentsSearch 
 
│   │   ├── DepartmentsSearch.js 
 
│   │   ├── DepartmentsSearch.test.js 
 
│   │   ├── index.js 
 
│   │   └── __snapshots__ 
 
├── helpers 
 
│   └── test-helper.js 
 
├── index.js 
 
├── reducers 
 
│   ├── departments.js 
 
│   ├── departments.test.js 
 
</pre>

und ich versuche, einen Test für FormElement (FormElement.test.js) Komponente auszuführen. Innerhalb Tests habe ich eine Import-Anweisung:

import DepartmentsSearch from '../../../../containers/DepartmentsSearch/DepartmentsSearch' 

und mein DepartmentSearch ist ein Container, der aus reagieren-redux Bibliothek verwendet verbinden.

import DepartmentSelector from '../../components/DepartmentSelector/DepartmentSelector' 
 
import {createDepartment} from '../../actions' 
 

 
const mapStateToProps = (state) => { 
 
    return { 
 
    departments: state.departments 
 
    } 
 
} 
 

 
export default connect(mapStateToProps, {createDepartment})(DepartmentSelector)

Aus irgendeinem Grund import DepartmentSelector statt reagieren Komponente undefined zurück (es ist nur ein dummer Komponente kein Container). Das Seltsamste ist, dass dies nur passiert, wenn Tests ausgeführt werden, nicht wenn Code im Browser ausgeführt wird. Ich habe am Anfang versucht, Importe auf höchster Ebene zu verwenden, aber es scheiterte auch.

Ich habe keine anderen Ideen, warum es nur beim Testen scheitern könnte und würde mich freuen, wenn mir jemand in die richtige Richtung zeigen könnte.

Answer 1

Problem liegt darin, wie Import von Abhängigkeiten getan wird. In diesem Fall importiert DepartmentSelector eine Form, die FormElement importiert und FormElement importiert (unser Container). Da Knoten keine Ahnung hat, wie diese Abhängigkeit importiert werden soll (rekursive Abhängigkeiten), gibt es nur einen Fehler zurück. Es funktioniert im Webbrowser, weil webpack rekursive Abhängigkeiten sehr gut verarbeitet und sie aus einem Code extrahiert. Einfachste Lösung, dieses Problem zu beheben, ist DepartmentSearch an der Spitze der Testdatei

// DepartmentSelector.test.js 
 
import DepartmentSearch from '../../containers/DepartmentSearch/DepartmentSearch'

Answer 2

Ihre DepartmentSearch hat keine render() Methode und gibt nichts zurück (daher die 'undefined').

Sie müssen mindestens etwas über render() zurückgeben, ob das ein untergeordneter Knoten sein soll, false, oder null. Ansonsten weiß der Rest der Anwendung nicht, was mit der Komponente zu tun ist.