import returns undefined instead of react component while testing

Question

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.

piro · Accepted Answer · 2017-10-03 10:48:48Z

4

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'

answered Oct 3, 2017 at 10:48

piro

1861 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Pearce · Accepted Answer · 2017-09-29 17:35:34Z

0

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.

answered Sep 29, 2017 at 17:35

Justin Pearce

5,1072 gold badges26 silver badges37 bronze badges

1 Comment

piro Over a year ago

DepartmentSearch is a container that enhance DepartmentSelector with part of redux state and action creator. It shouldn't have render because DepartmentSelector has. And like i've said it's not a problem with code itself it's sth with running test because whole code is executing fine within a browser. Only while running tests i have an error Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined.

Collectives™ on Stack Overflow

import returns undefined instead of react component while testing

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related