piro piro - 1 year ago 166
Javascript Question

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.

Answer Source

Problem lays in how import of dependencies is done. In this case DepartmentSelector imports a Form which imports FormElement and FormElement imports DepartmentSearch (our container). Because node has no idea how to import is that dependency (recursive dependencies) it just returns an error. It's working in web browser because webpack handles recursive dependencies very well and extracts them from a code. Simplest solution to fix that problem is to import DepartmentSearch at the top of test file

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download