vendredi 29 septembre 2017

import returns undefined instead of react component while testing

i'm in the middle of creating test for my app and have a problem with running them in Jest. My code structure looks like that:

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

And i'm trying to run a test for FormElement (FormElement.test.js) component. Inside test I have an import statement:

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

and my DepartmentSearch is a container that uses connect from react-redux library.

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

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

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

For some reason import DepartmentSelector returns undefined instead of react component (it's just a dumb component not a container). Weirdest thing is that happens only when running tests not when running code in browser. I've tried to use top level imports at the beginning but it was failing as well. import {DepartmentSelector} from '../../components'

I have no other ideas why it might be failing only while testing and will be glad if someone could point me in the right direction.

Aucun commentaire:

Enregistrer un commentaire