glamorous-native icon indicating copy to clipboard operation
glamorous-native copied to clipboard

Jest/Enzyme with glamorous components: TypeError: this._instance.render is not a function

Open x-dennis opened this issue 7 years ago • 1 comments

  • glamorous-native version: 1.4.0
  • react-native version: 0.57.8
  • react version: 16.6.3
  • enzyme: 3.8.0
  • enzyme-adapter-react-16: 1.7.1
  • babel-jest: 23.6.0
  • jest: 23.6.0

Relevant code.

import { shallow } from 'enzyme';
import { ThemeProvider, withTheme } from 'glamorous-native';

const ThemedView = props => withTheme(<View {...props} />);
const wrapper = shallow(
  <ThemeProvider theme={defaultTheme}>
        <ThemedView />
  </ThemeProvider>
);

What you did:

I upgraded to React Native 0.57.8 (coming from 0.54.x) and React 16.6.3.

What happened:

Suddenly all my tests on component that are wrapped with withTheme() and surrounded by ThemeProvider are failing with the error message

 TypeError: this._instance.render is not a function

      34 |     const ThemedView = props => withTheme(<View {...props} />);
      35 |
    > 36 |     const wrapper = shallow(
         |                     ^
      37 |       <ThemeProvider theme={defaultTheme}>
      38 |         <ThemedView />
      39 |       </ThemeProvider>

      at ReactShallowRenderer._mountClassComponent (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:461:37)
      at ReactShallowRenderer.render (node_modules/enzyme-adapter-react-16/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:409:14)
      at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:480:35
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:137:16)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:479:68)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:206:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous> (xxx.test.js:36:21)

Reproduction:

Wrapping a component with withTheme and/or <ThemeProvider> like in the example above leads to the error message above.

Problem description:

Unfortunately I could not figure out myself what causes the error.

Suggested solution:

Removing the <ThemeProvider> from the tests and exposing the raw components without the withTheme wrapper. But this is not what I would really like to do and I would still like to find out what is going here.

x-dennis avatar Dec 21 '18 12:12 x-dennis

@degaid have you resolved it?

Praveencena88 avatar Jan 22 '20 11:01 Praveencena88