Error Mounting when using Conditional (ternary) operator
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
This issue is related to #1163 I have the following Component
BarView.js
```javascript
import React from 'react';
import { Bar, HorizontalBar } from 'react-chartjs-2';
import PlaceHolder from './PlaceHolder';
import Title from "../title";
function BarView({ data, title = 'Title', horizontal = false, loader=true }) {
return (
{loader ? <PlaceHolder /> :
horizontal ? (
<HorizontalBar data={data} options={options} />
) :
(
<Bar data={data} options={options} />
)
}
</div>
);
}
```
BarView.test.js
```javascript
it('renders a horizontal Bar', () => {
let wrapper = mount(
<BarView data={{}} horizontal loader={false} />
)
console.log(wrapper.debug())
expect(wrapper.find('PlaceHolder').length).toEqual(0)
expect(wrapper.find('Bar').props().data).toMatchSnapshot()
})
```
### Current behavior
When horizontal is set to true , It throws an error :
`Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.`
If `horizontal is false` no error
### Expected behavior
to mount correctly
### Your environment
#### API
- [ ] shallow
- [ x] mount
- [ ] render
#### Version
| library | version
| ------------------- | -------
| enzyme | 3.11.0
| react | 16.12.0
| react-dom | 16.12.0
| react-test-renderer | 16.12.0
| adapter (below) | 1.15.2
#### 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 ( )
Contributor guide
Research direction
Start by reproducing the mount case from BarView.test.js with the BarView.js component, using horizontal and loader={false}. Inspect the component imports and the rendered branch, then verify that the horizontal case mounts without the reported invalid-element error and that the existing PlaceHolder assertion still passes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100