import returns undefined instead of react component while testing

user_2515674 0
Viewed 3044

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.

redux jestjs reactjs testing javascript
2 Answers

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'

user_25156740

Your DepartmentSearch does not have a render() method and is not returning anything (hence the 'undefined').

You need to at least return something via render(), whether that be a child node, false, or null. Otherwise the rest of the application doesn't know what to do with the component.

user_5577480
Related