I am trying to access a Dropdown with name=genes property using jest:
beforeEach(() => {
const middlewares = [thunk]
const store = configureStore(middlewares)(STATE1)
wrapper = mount(
<Provider store={store} >
<SavedVariants match={INIT_MATCH_PROPS} {...stateProps} {...dispatchProps} />
</Provider>
)
//console.log(wrapper.debug())
})
it('selects genes in the genes dropdown', () => {
const selector = `Dropdown[name='genes']`
const genesDropdownBefore = wrapper.find(selector)
console.log(genesDropdownBefore)
})
console.log() shows an empty object, so it can't find it. If I supply the class Dropdown (semanti-ui-react) it is not working either. When I do wrapper.debug() I see the dropdown, here is the excerpt:
...
<Dropdown aria-describedby={{...}} aria-invalid={true} selection={true} fluid={true}
meta={{...}} onChange={[Function]} name="genes" onBlur={{...}} onDragStart={[Function]}
onDrop={[Function]} onFocus={[Function]} value="" placeholder="Select genes"
renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex="0" content={[undefined]} disabled={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} additionLabel="Add " additionPosition="top" closeOnBlur={true} closeOnEscape={true} deburr={false} icon="dropdown" minCharacters={1} openOnFocus={true} searchInput="text" selectOnBlur={true} selectOnNavigation={true} wrapSelection={true}>
<Ref innerRef={{...}}>
<RefFindNode innerRef={{...}}>
...
I looked into html when its rendered in Chrome and also tried selecting it like that:
const selector = `div[name='genes']`
const genesDropdownBefore = wrapper.find(selector)
No success. What else could I try?
Update
Tried to use id:
const selector = '#geneSearchField'
const genesDropdownBefore = wrapper.find(selector)
console.log(genesDropdownBefore)
I verified using wrapper.debug() that the Dropdown has id="geneSearchField". The selection was still empty. I also tried a different selector with no success:
wrapper.findWhere(n => n.name() === 'Dropdown' && n.prop('name') === 'genes')
that I found in this thread: Enzyme is not finding component by props