Enzyme: Karma-webpack and webpack update break shallow find

[pedroabreu]

Current behavior

After updating webpack and karma-webpack to v4, I'm getting tests failing when shallow rendering a component.

Component shallow rendered:

            <div className={componentClass}>
                <SelectInput
                    className="page-navigation__row_select"
                    disabled={!rowsCount}
                    onChange={this.onPageSizeChange}
                    options={pageSizeOptions}
                    value={selectedPageSize}
                />
                <RowCounter
                    className="page-navigation__total"
                    pageNr={pageNr}
                    pageSize={selectedPageSize}
                    total={rowsCount}
                />
                <PaginationButton
                    hasPrevious={previousBtnEnabled}
                    hasNext={nextBtnEnabled}
                    onBackwardClick={this.onBackwardClick}
                    onForwardClick={this.onForwardClick}
                />
            </div>

LOG LOG: e{}
    ✗ should disable selectbox and pagination buttons
    Error: Method “props” is only meant to be run on a single node. 0 found instead.
        at e.<anonymous> (karma.index.js:31:274505)
        at e.<anonymous> (karma.index.js:31:268684)
        at UserContext.<anonymous> (karma.index.js:87:67914)
        at <Jasmine>

The log refers to print wrapper.find("SelectInput").props(). With previous versions it finds and returns the shallowWrapper element.

If I print wrapper.html() it prints the element correctly

Not really sure what it could be but maybe some way that the code is bundled/tests run ? Need to investigate more. To be fair, it doesn't seem to be an issue directly related to enzyme but I guess it relates to how it works with others (if that's reasonable)

Expected behavior

Should find and return the shallowWrapper element

Your environment

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.6.0
| react | 16.6.0
| react-dom | 16.6.0
| react-test-renderer | 16.2.0
| adapter (below) | 16

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[ljharb]

What does wrapper.debug() print out? .html fully renders the component and may not be what you want.

[pedroabreu]

wrapper.debug with test passing

<div className="page-navigation">
  <SelectInput className="page-navigation__row_select" disabled={true} onChange={[Function]} options={{...}} value={30} onBlur={[Function: onBlur]} onFocus={[Function: onFocus]} placeholderOption={{...}} searchBox={false} error={false} themeColor="dark" expand={true} />
  <RowCounter className="page-navigation__total" pageNr={1} pageSize={30} total={{...}} />
  <PaginationButton hasPrevious={false} hasNext={false} onBackwardClick={[Function]} onForwardClick={[Function]} />
</div>

with test failing

<div className="page-navigation">
  <t className="page-navigation__row_select" disabled={true} onChange={[Function]} options={{...}} value={30} onBlur={[Function: onBlur]} onFocus={[Function: onFocus]} placeholderOption={{...}} searchBox={false} error={false} themeColor="dark" expand={true} />
  <w className="page-navigation__total" pageNr={1} pageSize={30} total={{...}} />
  <t hasPrevious={false} hasNext={false} onBackwardClick={[Function]} onForwardClick={[Function]} />
</div>

Not sure what webpack is doing here (and why it's doing it) 🤔 I guess this makes it not an enzyme issue ?

Also, was it because of a similar issue that karma is turned off in react-dates ? I'm doing pretty much the same thing, updating storybook/babel/webpack

[ljharb]

karma's off in react-dates because we haven't yet figured out how to update its webpack config from webpack 2 to webpack 4.

In this case, it looks like you're perhaps stripping component display names when running tests? That certainly seems unrelated to enzyme - more likely a babel setting.

[pedroabreu]

Interesting. I need to investigate more. It's strange that the change comes from webpack/karma-webpack update as the babel config is the same in both scenarios. Maybe some setting I'm missing from the migration.

Closing this issue as it's not related to webpack. I'll update with a solution for future reference (just in case)

Thanks for the help 👍

[pedroabreu]

Found the issue:

Was missing mode: development in the webpack config I set in the karma config file. By not having a mode defined, it defaults to production which doesn't enable NamedModulesPlugin which is needed to identify components in shallow mode