Undefined is not a constructor when unit testing with enzyme mount()

[binomialstew]

We are using the react-input-enhancements combobox on a form we're unit testing with enzyme. We have some child components within the component that we would like to test using a full rendering mount with enzyme, but when mounting it, we get this error from the combobox:

undefined is not a constructor (evaluating '[opt, opt.text, opt.label, opt.value].find(function (value) {
    return typeof value === 'string';
})')

I've logged opt. It and all it's child properties are logging successfully for the first combobox, but for some reason, it seems to fail after this. All subsequent objects in the array are also valid. I can't find what is actually undefined here. Note that this undefined is not a constructor error only happens when unit testing—not when running the actual front-end.

Here is the combobox element:

<div className='input-group'>
    <label htmlFor='create-account-country'>Country<span className='required'>*</span></label>
    <Combobox
        className='select-container'
        defaultValue={form['create-account-country']}
        options={this.props.countryOptions}
        autocomplete
        onValueChange={this.valueChange('create-account-country', 'country')}
        data-fieldname='country'
        >
        <input
            type='text'
            placeholder='Please select your country'
            id='create-account-country'
            name='create-account-country'
            className={'form-control select' + (!this.isValid('country') ? ' error' : '')}
            required
            />
    </Combobox>
</div>

Here is the options property that is passed to the combobox:

countryOptions: [
    {
        value: 'USA',
        text: 'United States',
        label: 'United States'
    },
    {
        value: 'Canada',
        text: 'Canada',
        label: 'Canada'
    }
]

I're not sure if this issue should be addressed within react-input-enhancements or enyzme but would appreciate any advice you may have in resolving it.

[alexkuz]

Hm, I'm not sure where this error comes from either (and I'm not familiar with enzyme, unfortunately). But if you could provide a sample project, I would take a look.

[binomialstew]

Thanks. I'd be glad to provide this, but unfortunately, it is not solely up to me. I'm doing what I can to get the approval and will update as soon as I can.

[binomialstew]

Thanks for your patience during the delay. Attached is a sample project where the issue can be reproduced. Here are the versions of node and npm we are running:
npm 3.8.2
node v4.4.0

To see the error, run npm run test in the root directory. Let me know if I can help with anything.

combobox-issue.zip

[alexkuz]

@CLL80 seems like PhantomJS doesn't provide Array.find method. Try using this polyfill. I tried to add './node_modules/phantomjs-polyfill-find/find-polyfill.js' to karma.conf.js, but that didn't help; I'm not an expert in karma either - maybe you'll have better luck :)

[binomialstew]

Thanks a lot for your help with this. That polyfill helped but we also needed .findIndex. My colleague just made a pull request request for phantomjs-polyfill-find. This should fix our issues.

[alexkuz]

Glad I could help, I'm closing this then (it may deserve some mention in README, though)

[pedroposada]

@CLL80 I ran into a similar situation where I was trying to find an element inside my mounted component and then using console.log to output the text() of the component like so:

_component = render(<MyComponent />)
const welcome = _component.find('h4')
console.log(welcome.text()) // will throw error: "PhantomJS 2.1.1 (Mac OS X 0.0.0) undefined is not a constructor (evaluating 'welcome.text()')"

enzyme uses cheerio to traverse the _component so you need to follow their rules and use cheerio methods to get what you need like this:

_component = render(<MyComponent />)
const welcome = _component.find('h4').text()
console.log(welcome) // will output the text inside <h4> element

Enzyme docs for traversing rendered components
http://airbnb.io/enzyme/GLOSSARY.html#wrapper

[binomialstew]

Hey @pedroposada,

In our case, we needed the phantomjs find-polyfill Alexkuz suggested along with the findIndex polyfill because react-input-enhancements uses these methods in getOptionText() and findOptionIndex(). They aren't available in the version of phantomjs we were using for testing.

Here is a working example that has been updated with the polyfills in package.json and added to the files array in the karma config object as below:

const karmaConfig = {
  basePath: '../', // project root in relation to bin/karma.js
  files: [
    './node_modules/phantomjs-polyfill/bind-polyfill.js',
    './node_modules/phantomjs-polyfill-find/find-polyfill.js',
    './node_modules/phantomjs-polyfill-find-index/findIndex-polyfill.js',
    ...
  ]
...
}

Hopefully, this will help someone else with a similar issue.