enzymejs / enzymejs/enzyme

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

Open
#2,198 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
19.8k
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

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

```

















```

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();
});
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 ( )

Contributor guide

Open the contributing guide

Research direction

Reproduce the shallow-render snapshot test for Login with the shown props and adapter setup, then inspect how GradientButton is represented in the rendered output. Compare the invalid-element warning with the component's snapshot output. Done means the custom component renders without [object Object] and the test completes without the React.createElement warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, react-native
Domain
testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.