I have a component that, when a div is clicked, it renders a dropdown to select from. However, I'm having trouble and will explain further with code below:
In my Dropdown.js component file I have:
const Dropdown = ({ caption, open, toggle, children }) => (
<div className={`${open ? 'up' : 'down'}`} onClick={toggle}>
<span className="caption">{caption}</span>
<Icon type={open ? 'up' : 'down'} />
{open && (
<div className="dropdown">
{children}
</div>
)}
</div>
)
open is a state set to false, and toggle is a handler that sets the state of open to true (or false if state is true) if it's triggered.
In my Dropdown.test.js file I have:
describe('Dropdown Functions', () => {
let tree, bareTree
const mockClickFn = jest.fn(() => selected = 'Alberta')
const item = <Item key='AB' onClick={() => {}}>Alberta</Item>
beforeEach(() => {
tree = mount(<Dropdown children={item}/>)
})
it('renders dropdown item', () => {
console.log(bareTree.html());
console.log(bareTree.find('span'));
console.log(bareTree.find('span').html());
console.log(bareTree.find('i'));
console.log(bareTree.find('i').html());
console.log(bareTree.find('div.dropdown'));
bareTree.simulate('click')
console.log(bareTree.html());
console.log(bareTree.find('span'));
console.log(bareTree.find('span').html());
console.log(bareTree.find('i'));
console.log(bareTree.find('i').html());
console.log(bareTree.find('div.dropdown'));
})
})
The console.logs produce this in my terminal:
● Console
//console.log(bareTree.html());
<div class="sc-bwzfXH iRxfsh down"><span class="caption"></span><i class="anticon anticon-down"></i></div>
//console.log(bareTree.find('span'));
ReactWrapper { length: 1 }
//console.log(bareTree.find('span').html());
<span class="caption"></span>
//console.log(bareTree.find('i'));
ReactWrapper { length: 1 }
//console.log(bareTree.find('i').html());
<i class="anticon anticon-down"></i>
//console.log(bareTree.find('div.dropdown'));
ReactWrapper { length: 0 }
//console.log(bareTree.html());
<div class="sc-bwzfXH iRxfsh up"><span class="caption"></span><i class="anticon anticon-up"></i><div class="dropdown"><div class="sc-bdVaJa gFwDpq">Alberta</div></div></div>
//console.log(bareTree.find('span'));
ReactWrapper { length: 1 }
//console.log(bareTree.find('span').html());
<span class="caption"></span>
//console.log(bareTree.find('i'));
ReactWrapper { length: 1 }
//console.log(bareTree.find('i').html());
<i class="anticon anticon-up"></i>
//console.log(bareTree.find('div.dropdown'));
ReactWrapper { length: 0 }
As you can see, though the div is showing up after the click simulation, the dropdown still has a length of 0.
Aucun commentaire:
Enregistrer un commentaire