title: Jest: onChange event on a Dropdown does not change its value
body: <p>I have a <code>Dropdown</code> (<code>Multiselect</code> creates ultimately a <code>semantic-ui-react</code> <code>Dropdown</code>. Tests work all the same if I substitute <code>Multiselect</code> for <code>Dropdown</code>, its just more clear to have <code>Multiselect</code>) that is rendered within a <code>redux-form</code> and I am trying to select an option in <code>jest/enzyme</code>:</p>
  <pre><code>beforeEach(() =&gt; {
      // Store is needed for ReduxFormWrapper because Redux Form uses it
      const middlewares = [thunk]
      const store = configureStore(middlewares)(STATE1)
      wrapper = mount(
        &lt;Provider store={store} &gt;
          &lt;SavedVariants match={INIT_MATCH_PROPS} {...stateProps} {...dispatchProps} /&gt;
        &lt;/Provider&gt;
      )
      //console.log(wrapper.debug())
  })
  
  afterEach(() =&gt; {
      jest.clearAllMocks()
  })
  
  it('selects genes in the genes dropdown', () =&gt; {
      const newGenes = ['OR2M3']
      const genesDropdownBefore = wrapper.find('Multiselect').findWhere(n =&gt; n.prop('name') === 'genes').hostNodes()
      genesDropdownBefore.prop('onChange')('event', newGenes)
      expect(submitFormSearchMock).toHaveBeenCalledWith({ &quot;genes&quot;: newGenes })
      wrapper.update()
      const genesDropdownAfter = wrapper.find('Multiselect').findWhere(n =&gt; n.prop('name') === 'genes').hostNodes()
      console.log(genesDropdownAfter.instance().value)
  })
  </code></pre>
  <p>I figured out that I can change <code>Dropdown</code> value like that:</p>
  <pre><code>genesDropdownBefore.instance().value = newGenes
  </code></pre>
  <p>But shouldn't <code>onChange</code> event update the value of the component? I suspect that maybe it is somehow related to internal management of its <code>state</code> by <code>redux-form</code>, but not sure. How to call a single <code>onChange</code> event and then verify the <code>Dropdown</code> value? Thats' what I am trying to test: that the value of the <code>Dropdown</code> was set correctly.</p>
  <blockquote>
  <p>Update</p>
  </blockquote>
  <p>Printing out <code>Multiselect</code> <code>props()</code> I get the following:</p>
  <pre><code>  { error: false,
      meta:
       { active: false,
         asyncValidating: false,
         autofilled: false,
         dirty: true,
         dispatch: [Function],
         error: undefined,
         form: 'editSavedVariantTable',
         initial: [ 'OR2M3' ],
         warning: undefined,
         invalid: false,
         pristine: false,
         submitting: false,
         submitFailed: false,
         touched: false,
         valid: true,
         visited: false },
      onChange: [Function],
      name: 'genes',
      onBlur: [Function],
      onDragStart: [Function],
      onDrop: [Function],
      onFocus: [Function],
      value: '',
      label:
       { '$$typeof': Symbol(react.element),
         type: { [Function: CustomLabel] propTypes: [Object] },
         key: 'geneSearchLabel',
         ref: null,
         props: { name: 'geneSearchLabel', style: [Object], text: 'Genes:' },
         _owner:
          FiberNode {
            tag: 1,
            key: null,
            elementType: [Function],
            type: [Function],
            stateNode: [BaseSavedVariants],
            return: [FiberNode],
            child: [FiberNode],
            sibling: null,
            index: 0,
            ref: null,
            pendingProps: [Object],
            memoizedProps: [Object],
            updateQueue: null,
            memoizedState: null,
            dependencies: null,
            mode: 0,
            effectTag: 1,
            nextEffect: null,
            firstEffect: [FiberNode],
            lastEffect: [FiberNode],
            expirationTime: 0,
            childExpirationTime: 0,
            alternate: [FiberNode],
            actualDuration: 0,
            actualStartTime: -1,
            selfBaseDuration: 0,
            treeBaseDuration: 0,
            _debugID: 2824,
            _debugIsCurrentlyTiming: false,
            _debugSource: null,
            _debugOwner: null,
            _debugNeedsRemount: false,
            _debugHookTypes: null },
         _store: {} },
      inline: true,
      options: [ { value: 'OR2M3', text: 'OR2M3' } ],
      placeholder: 'Select genes' }
  </code></pre>
  <p>The <code>value</code> is always empty and can't be set whatever I do. I think for that reason I am also getting a warning:</p>
  <blockquote>
  <p>Dropdown <code>value</code> must be an array when <code>multiple</code> is set. Received type: <code>[object String]</code>.</p>
  </blockquote>
  <p>I tried <code>wrapper.instance().forceUpdate()</code>, then also made a function to update actual child component props:</p>
  <pre><code>  const changeProps = (wrapper, newProps) =&gt; {
        wrapper.setProps({
        children: (
          &lt;SavedVariants
            {...newProps}
            match={INIT_MATCH_PROPS}
          /&gt;
        )
      })
    }
  </code></pre>
  <p>Which is working for hiding/showing the dropdown (its is done in the <code>render</code> function of the tested component) but is not working for changing its value through changing state.</p>
  <p>For the selected option <code>Multiselect</code> creates a link <code>a.ui.label</code> which is absent when I try looking for it with <code>jest</code>, so it isn't rendered for some reason.</p>
  <blockquote>
  <p>Update</p>
  </blockquote>
  <p><code>wrapper.find('Multiselect').debug()</code> prints the following:</p>
  <pre><code> &lt;Multiselect error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select genes&quot;&gt;
          &lt;AddableSelect error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true}&gt;
            &lt;Select error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true}&gt;
              &lt;Memo() selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true}&gt;
                &lt;BaseSemanticInput selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} inputType=&quot;Dropdown&quot; options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot;&gt;
                  &lt;FormDropdown selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; as={[Function: FormField]} control={[Function: Dropdown]}&gt;
                    &lt;FormField selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; control={[Function: Dropdown]}&gt;
                      &lt;div className=&quot;inline field&quot;&gt;
                        &lt;CustomLabel name=&quot;geneSearchLabel&quot; style={{...}} text=&quot;Genes:&quot; htmlFor={[undefined]}&gt;
                          &lt;div name=&quot;geneSearchLabel&quot;&gt;
                            &lt;label id=&quot;geneSearchLabel&quot; style={{...}}&gt;
                              Genes:
                            &lt;/label&gt;
                          &lt;/div&gt;
                        &lt;/CustomLabel&gt;
                        &lt;Dropdown aria-describedby={{...}} aria-invalid={true} selection={true} fluid={true} meta={{...}} onChange={[Function]} name=&quot;genes&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; placeholder=&quot;Select genes&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; content={[undefined]} disabled={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} additionLabel=&quot;Add &quot; additionPosition=&quot;top&quot; closeOnBlur={true} closeOnEscape={true} deburr={false} icon=&quot;dropdown&quot; minCharacters={1} openOnFocus={true} searchInput=&quot;text&quot; selectOnBlur={true} selectOnNavigation={true} wrapSelection={true}&gt;
                          &lt;Ref innerRef={{...}}&gt;
                            &lt;RefFindNode innerRef={{...}}&gt;
                              &lt;div aria-describedby={{...}} aria-invalid={true} meta={{...}} name=&quot;genes&quot; onDragStart={[Function]} onDrop={[Function]} content={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} role=&quot;combobox&quot; aria-busy={[undefined]} aria-disabled={[undefined]} aria-expanded={false} className=&quot;ui fluid multiple search selection dropdown&quot; onBlur={[Function]} onClick={[Function]} onMouseDown={[Function]} onFocus={[Function]} onChange={[Function]} tabIndex={[undefined]}&gt;
                                &lt;Ref innerRef={{...}}&gt;
                                  &lt;RefFindNode innerRef={{...}}&gt;
                                    &lt;DropdownSearchInput style={{...}} tabIndex=&quot;0&quot; value=&quot;&quot; type=&quot;text&quot; onChange={[Function: onChange]} autoComplete=&quot;off&quot;&gt;
                                      &lt;input style={{...}} onChange={[Function]} aria-autocomplete=&quot;list&quot; autoComplete=&quot;off&quot; className=&quot;search&quot; tabIndex=&quot;0&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;
                                    &lt;/DropdownSearchInput&gt;
                                  &lt;/RefFindNode&gt;
                                &lt;/Ref&gt;
                                &lt;span className=&quot;sizer&quot; /&gt;
                                &lt;div className=&quot;default text&quot; role=&quot;alert&quot; aria-live=&quot;polite&quot; aria-atomic={true}&gt;
                                  Select genes
                                &lt;/div&gt;
                                &lt;Icon name=&quot;dropdown&quot; className=&quot;&quot; onClick={[Function: onClick]} as=&quot;i&quot;&gt;
                                  &lt;i onClick={[Function]} aria-hidden=&quot;true&quot; className=&quot;dropdown icon&quot; /&gt;
                                &lt;/Icon&gt;
                                &lt;DropdownMenu aria-multiselectable={true} role=&quot;listbox&quot; direction={[undefined]} open={[undefined]}&gt;
                                  &lt;div aria-multiselectable={true} role=&quot;listbox&quot; className=&quot;menu transition&quot;&gt;
                                    &lt;DropdownItem active={false} onClick={[Function]} selected={true} value=&quot;OR2M3&quot; text=&quot;OR2M3&quot; label={{...}} color={[undefined]} disabled={[undefined]} description={[undefined]} style={{...}}&gt;
                                      &lt;div color={[undefined]} style={{...}} role=&quot;option&quot; aria-disabled={[undefined]} aria-checked={false} aria-selected={true} className=&quot;selected item&quot; onClick={[Function]}&gt;
                                        &lt;span className=&quot;text&quot;&gt;
                                          OR2M3
                                        &lt;/span&gt;
                                      &lt;/div&gt;
                                    &lt;/DropdownItem&gt;
                                  &lt;/div&gt;
                                &lt;/DropdownMenu&gt;
                              &lt;/div&gt;
                            &lt;/RefFindNode&gt;
                          &lt;/Ref&gt;
                        &lt;/Dropdown&gt;
                      &lt;/div&gt;
                    &lt;/FormField&gt;
                  &lt;/FormDropdown&gt;
                &lt;/BaseSemanticInput&gt;
              &lt;/Memo()&gt;
            &lt;/Select&gt;
          &lt;/AddableSelect&gt;
        &lt;/Multiselect&gt;
        
        
        &lt;Multiselect error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select families&quot;&gt;
          &lt;AddableSelect error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true}&gt;
            &lt;Select error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true}&gt;
              &lt;Memo() selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} options={{...}} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true}&gt;
                &lt;BaseSemanticInput selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} inputType=&quot;Dropdown&quot; options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot;&gt;
                  &lt;FormDropdown selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; as={[Function: FormField]} control={[Function: Dropdown]}&gt;
                    &lt;FormField selection={true} fluid={true} error={false} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; label={{...}} inline={true} placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; control={[Function: Dropdown]}&gt;
                      &lt;div className=&quot;inline field&quot;&gt;
                        &lt;CustomLabel name=&quot;familiesCustomLabel&quot; checked={false} style={{...}} checkbox={true} checkboxLabel=&quot;only my families&quot; text=&quot;Families:&quot; onChange={[Function: mockConstructor]} htmlFor={[undefined]}&gt;
                          &lt;div name=&quot;familiesCustomLabel&quot;&gt;
                            &lt;label id=&quot;familiesCustomLabel&quot; style={{...}}&gt;
                              Families:
                            &lt;/label&gt;
                            &lt;Checkbox checked={false} onChange={[Function: mockConstructor]} htmlFor={[undefined]} inline=&quot;true&quot; label=&quot;only my families&quot; type=&quot;checkbox&quot;&gt;
                              &lt;div htmlFor={[undefined]} inline=&quot;true&quot; className=&quot;ui checkbox&quot; onClick={[Function]} onChange={[Function]} onMouseDown={[Function]} onMouseUp={[Function]}&gt;
                                &lt;Ref innerRef={{...}}&gt;
                                  &lt;RefFindNode innerRef={{...}}&gt;
                                    &lt;input checked={false} className=&quot;hidden&quot; disabled={[undefined]} id={[undefined]} name={[undefined]} readOnly={true} tabIndex={0} type=&quot;checkbox&quot; value={[undefined]} /&gt;
                                  &lt;/RefFindNode&gt;
                                &lt;/Ref&gt;
                                &lt;Ref innerRef={{...}}&gt;
                                  &lt;RefFindNode innerRef={{...}}&gt;
                                    &lt;label htmlFor={[undefined]}&gt;
                                      only my families
                                    &lt;/label&gt;
                                  &lt;/RefFindNode&gt;
                                &lt;/Ref&gt;
                              &lt;/div&gt;
                            &lt;/Checkbox&gt;
                          &lt;/div&gt;
                        &lt;/CustomLabel&gt;
                        &lt;Dropdown aria-describedby={{...}} aria-invalid={true} selection={true} fluid={true} meta={{...}} onChange={[Function]} name=&quot;families&quot; onBlur={{...}} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value=&quot;&quot; placeholder=&quot;Select families&quot; renderLabel={[Function]} allowAdditions={false} multiple={true} onAddItem={[Function]} search={true} options={{...}} noResultsMessage={{...}} tabIndex=&quot;0&quot; content={[undefined]} disabled={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} additionLabel=&quot;Add &quot; additionPosition=&quot;top&quot; closeOnBlur={true} closeOnEscape={true} deburr={false} icon=&quot;dropdown&quot; minCharacters={1} openOnFocus={true} searchInput=&quot;text&quot; selectOnBlur={true} selectOnNavigation={true} wrapSelection={true}&gt;
                          &lt;Ref innerRef={{...}}&gt;
                            &lt;RefFindNode innerRef={{...}}&gt;
                              &lt;div aria-describedby={{...}} aria-invalid={true} meta={{...}} name=&quot;families&quot; onDragStart={[Function]} onDrop={[Function]} content={[undefined]} required={[undefined]} type={[undefined]} id={[undefined]} role=&quot;combobox&quot; aria-busy={[undefined]} aria-disabled={[undefined]} aria-expanded={false} className=&quot;ui fluid multiple search selection dropdown&quot; onBlur={[Function]} onClick={[Function]} onMouseDown={[Function]} onFocus={[Function]} onChange={[Function]} tabIndex={[undefined]}&gt;
                                &lt;Ref innerRef={{...}}&gt;
                                  &lt;RefFindNode innerRef={{...}}&gt;
                                    &lt;DropdownSearchInput style={{...}} tabIndex=&quot;0&quot; value=&quot;&quot; type=&quot;text&quot; onChange={[Function: onChange]} autoComplete=&quot;off&quot;&gt;
                                      &lt;input style={{...}} onChange={[Function]} aria-autocomplete=&quot;list&quot; autoComplete=&quot;off&quot; className=&quot;search&quot; tabIndex=&quot;0&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;
                                    &lt;/DropdownSearchInput&gt;
                                  &lt;/RefFindNode&gt;
                                &lt;/Ref&gt;
                                &lt;span className=&quot;sizer&quot; /&gt;
                                &lt;div className=&quot;default text&quot; role=&quot;alert&quot; aria-live=&quot;polite&quot; aria-atomic={true}&gt;
                                  Select families
                                &lt;/div&gt;
                                &lt;Icon name=&quot;dropdown&quot; className=&quot;&quot; onClick={[Function: onClick]} as=&quot;i&quot;&gt;
                                  &lt;i onClick={[Function]} aria-hidden=&quot;true&quot; className=&quot;dropdown icon&quot; /&gt;
                                &lt;/Icon&gt;
                                &lt;DropdownMenu aria-multiselectable={true} role=&quot;listbox&quot; direction={[undefined]} open={[undefined]}&gt;
                                  &lt;div aria-multiselectable={true} role=&quot;listbox&quot; className=&quot;menu transition&quot;&gt;
                                    &lt;DropdownItem active={false} onClick={[Function]} selected={true} value=&quot;SF8313488_WES_CIDR&quot; text=&quot;SF8313488_WES_CIDR&quot; label={{...}} color={[undefined]} disabled={[undefined]} description={[undefined]} style={{...}}&gt;
                                      &lt;div color={[undefined]} style={{...}} role=&quot;option&quot; aria-disabled={[undefined]} aria-checked={false} aria-selected={true} className=&quot;selected item&quot; onClick={[Function]}&gt;
                                        &lt;span className=&quot;text&quot;&gt;
                                          SF8313488_WES_CIDR
                                        &lt;/span&gt;
                                      &lt;/div&gt;
                                    &lt;/DropdownItem&gt;
                                  &lt;/div&gt;
                                &lt;/DropdownMenu&gt;
                              &lt;/div&gt;
                            &lt;/RefFindNode&gt;
                          &lt;/Ref&gt;
                        &lt;/Dropdown&gt;
                      &lt;/div&gt;
                    &lt;/FormField&gt;
                  &lt;/FormDropdown&gt;
                &lt;/BaseSemanticInput&gt;
              &lt;/Memo()&gt;
            &lt;/Select&gt;
          &lt;/AddableSelect&gt;
        &lt;/Multiselect&gt;
  </code></pre>