React-select: Enzyme `mount` cause error when renders react-select

Created on 25 Sep 2019 · 8Comments · Source: JedWatson/react-select

Hello!

I have problem with testing latest (3.0.5) version of react-select

code

...
import Select from 'react-select'

const Product = () => (
  <Select options={[]} onChange={() => null} />
);

export default connect(() => {}, () => {})(Product);

test suite

import { mount } from 'enzyme';

...
    const wrapper = mount(
        <IntlProvider locale="en" messages={{}}>
            <Provider store={store}>
                <Product />
            </Provider>
        </IntlProvider>
    );
 ...

When enzyme try to mount component with Select, console displays
TypeError: Cannot read property 'registered' of null

It's just FYI.
In react-select v2.4.4 all is ok.

issubug-unconfirmed issureviewed

Source

vartemiev

Most helpful comment

Based on the error, it seems we need to make sure a CacheProvider is available:

import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/core";

const cache = createCache();

function withCacheProvider(
        children: React.ReactNode,
) {
        return (
            <CacheProvider value={cache}>
                {children}
            </CacheProvider>
        );
}

const component = mount(withCacheProvider(
     (
         <ComponentUnderTestThatUsesReactSelect />
     ),
));

That got all of my tests running without needing to downgrade my react-select version, however, may not be the best solution.

I did need to add emotion as a dependency, yarn add emotion

k1462015 on 16 Dec 2019

👍5 🎉2

All 8 comments

Same issue here. Someone???

I have 3.0.8 version and the problem still happen.

lbonatti89 on 4 Oct 2019

👍2

Same issue with 3.0.8...

naiaramartin on 21 Oct 2019

Same issue here - 3.0.8 version

FranciscoZen on 15 Nov 2019

Also the same issue with 3.0.8 version. Going to try vartemiev's solution "In react-select v2.4.4 all is ok."

...and that fixed the issue for me too.

rjones222 on 21 Nov 2019

Based on the error, it seems we need to make sure a CacheProvider is available:

import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/core";

const cache = createCache();

function withCacheProvider(
        children: React.ReactNode,
) {
        return (
            <CacheProvider value={cache}>
                {children}
            </CacheProvider>
        );
}

const component = mount(withCacheProvider(
     (
         <ComponentUnderTestThatUsesReactSelect />
     ),
));

That got all of my tests running without needing to downgrade my react-select version, however, may not be the best solution.

I did need to add emotion as a dependency, yarn add emotion

k1462015 on 16 Dec 2019

👍5 🎉2

Workaround by @k1462015 worked for me.