Enzyme snapshot showing [object,Object] for shallow rendering snapshots

GhazanfarKhan commented 5 years ago

I am testing my react-native app using jest and enzyme. I have this component structure.

<KeyboardAvoidingView>
   <ScrollView>
      <Image/>
      <Text/>
      <TextInput/>
      <TextInput/>
      <GradientButton/>
      <View>
         <View>
            <TouchableOpacity>
               <View>
                  <Text/>
                  <Icon/>
               </View>
            </TouchableOpacity>
         </View>
      </View>
   </ScrollView>
</KeyboardAvoidingView>

Here is my test case

import Login from "../index";
import React from 'react';
import { shallow } from 'enzyme';
import globalStyles from '../../../../../global/styles';

let theme = 'DefaultTheme', wrapper;

const createTestProps = (props) => ({
    navigation: {
        navigate: jest.fn()
    },
    theme: theme,
    globalStyles: globalStyles(theme),
    session: {},
    changeScene: jest.fn(),
    changeTheme: jest.fn(),
    setUser: jest.fn(),
    logout: jest.fn(),
    ...props
});
beforeEach(() => {
    const props = createTestProps({});
    wrapper = shallow(<Login {...props} />);
});
test('should render login component correctly', () => {
   expect(wrapper).toMatchSnapshot();
});

All components snapshots render correctly but my custom component Gradient Button showing this type of structure

<[object Object]/>

Due to this I am also getting this warning in console

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

Your environment

API

[-] shallow
[ ] mount
[ ] render

Version

library	version
enzyme	^3.10.0
react	16.8.3
react-dom
react-test-renderer
adapter (below)

Adapter

[-] 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 commented 5 years ago

enzyme does not support, or encourage, snapshot testing. The closest we have is .debug().

Separately, enzyme can't work properly with react-native without a react native adapter; follow #1436 for that.

sinsina1232 commented 2 years ago

I have the same problem here with almost the same code

ljharb commented 2 years ago

Another point I note; enzyme doesn't yet have a React Native adapter, so it's expected that using it with RN will have a number of issues, and this might be one of them.

enzymejs / enzyme