reactjs - Not getting conditional element in react dom unit test

Question

I am new in react unit test case facing issue not getting conditional dom.

this is dropdown component

const [selectedFilterList, setSelectedFilterList] = React.useState<Array<string>>([]);



    const handleSelectedFilteredList = (value: any): void => {
    setSelectedFilterList(value);
    if (!selectedFilterList.length) {
      setIsSelectedfilters(false);
    }
  };

const dropdownRender = (optionsList: Partial<string[]>, applyBtn: Partial<HTMLButtonElement>): JSX.Element => {
return (
  <React.Fragment>
    {selectedFilterList.length > 0 && (
      <div className={'lmn-filter-action-wrapper'}>
        <Button className="lmn-filter-action-button" onClick={showSelectedFilters}>
           Show selected
        </Button>
        <Button className="lmn-filter-action-button" onClick={showAll}>
          show All
        </Button>
      </div>
    )}
    <div className={'lmn-dropdown-extra-content'}>
      <Input.Search
        placeholder="Search for..."
        value={inputCurrency}
        onChange={(e: any): void => {
          const val = e.target.value || '';
          setInputCurrency(val);
        }}
      />
    </div>
    {optionsList}
    {applyBtn}
  </React.Fragment>
);



<Dropdown
    multiple
    label={'Currencies}
    onApply={(data: []): void => handleOnFilterApply(data, 'currencies')}
    onClose={(): void => setInputCurrency('')}
    onChange={handleSelectedFilteredList}
    style={{ width: '120px' }}
    menuStyle={{ width: '150%' }}
    dropdownRender={dropdownRender}
  >
    {optionListBasedOnActionType().map(i => (
      <Dropdown.Item key={i} value={i} wrap>
        <span>{i}</span>
      </Dropdown.Item>
    ))}
  </Dropdown>

I want to write test case for my filter-action-wrapper contaner but if I trying to access its not getting rendering

here is my test case

    `const setSelectedFilterList = jest.fn();
    const useStateFilterMocks: any = () => [[], setSelectedFilterList];
    jest.spyOn(React, 'useState').mockImplementation(useStateFilterMocks);
    const wrapper = shallow(<ClientPricingFilters {...props} />);
    const input = wrapper.find(Dropdown);
    const mockEvent = { target: { value: 'INRUSD' } };
    input.simulate('change', mockEvent);
    const InputSearchwrapper = input.prop('dropdownRender').call(wrapper, 'dropdownRender');
    const shallowSearch = mount(InputSearchwrapper);
    console.log(wrapper.debug(), shallowSearch.debug());`

if I am debugging my shallow serach not getting my button element where I cann trigger action

any idea ?

question from:https://stackoverflow.com/questions/65950808/not-getting-conditional-element-in-react-dom-unit-test

Answer 1

Waitting for answers