React-datepicker: Invariant Violation: Element type is invalid

[dkuida]

Expected behavior

When I test with enzyme using shallow render - I should be able to .find('DatePicker')
but it returns 0 results. - trying with mount() throws an error

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

and that error is on the mount itself before I even try to find it

Actual behavior

Steps to reprodcue

the components under test

<div className='l-flex l-flex-c t-field t-field-pad'>
                <label>
                    LMP
                </label>
                <i className='t-sep'/>
                <span className='t-validation-wrap l-fg1'>
                     <DatePicker
                         locale={'he-IL'}
                         className='t-field-text w100 t-field--date'
                         selected={this.state.selectedDate ? moment(this.state.selectedDate) : null}
                         onChange={this._setDate}
                     />
                </span>
            </div>

[tomaskallup]

👍 Also having this problem.

Here's a reproduction test code:

import * as React from 'react';
import {configure, mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import DatePicker from 'react-datepicker';

configure({ adapter: new Adapter});

describe('DatePicker component', () => {

    describe('render', () => {
        test('without crashing', () => {
            const onChange = jest.fn(),
                props = {
                    onChange
                };

            const snap = mount(<DatePicker {...props} />);

            expect(snap).toMatchSnapshot();
        });
    });
});

I managed to fix it by editing the module code in node_modules:
react-datepicker/lib/index.js
I added a default export.

module.exports = DatePicker;
module.exports.default = DatePicker;

This issue is most likely related to how babel handles importing modules.

Another solution is to use require

const DatePicker = require('react-datepicker');

But I personaly hate mixing import and require as that makes a mess.

[tomaskallup]

After some more digging around, the problem seems to be this:

Object.defineProperty(exports, "__esModule", {
  value: true
});

Babel add this piece of code which allows it to handle importing of transpiled modules. I'll try to solve this and create PR when I have the time.

__EDIT:__
Never mind, the problem is just the default. Normaly babel transpiles export default myVar to exports.default = myVar, which doesn't happen here, it becomes module.exports = myVar.

[carlostxm]

Changing import to const DatePicker = require('react-datepicker'); worked for me and I can launch tests using jest + enzyme.

However, with this change the application cannot launch and now I'm getting this error in the console:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

[EmergentBehavior]

Also running into same exact error as @carlostxm

Edit: was able to resolve it.

I'm using ClojureScript and before was doing:
(def date-picker (.createFactory js/React js/DatePicker)) but had to switch it up with:
(def date-picker (.createFactory js/React (.-default js/DatePicker)))

The JS equivalent is:
var date-picker = React.createFactory(DatePicker.default);

[mattnedrich]

I had this issue. Wasn't able to root cause it precisely, but was able to workaround it by setting the dropdownMode prop to "select"

🤷‍♂️

[kensplanet]

Changing import to const DatePicker = require('react-datepicker'); worked for me and I can launch tests using jest + enzyme.

However, with this change the application cannot launch and now I'm getting this error in the console:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I am having the same issue.

[hodzanassredin]

Changing import to const DatePicker = require('react-datepicker'); worked for me and I can launch tests using jest + enzyme.
However, with this change the application cannot launch and now I'm getting this error in the console:
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

I am having the same issue.

+1

[dwilhel1]

Thanks to a coworker pointing this thread out, the expected a string (for built-in components) or a class/function (for composite components) but got: object error we had was resolved with the following:

Old

<DatePicker />

New

<DatePicker.default />

[devn]

+1