Can't find element in jest even though wrapper.debug() shows it

Viewed 2827

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

1 Answers

The issue was coming from the fact that I did not know how to correctly print out the found by jest html. Just logging like console.log(genesDropdownBefore) is printing an empty wrapper object which is very misleading. What I needed to do to move on is to print out it as console.log(genesDropdownBefore.debug()).

Related