React 功能组件测试文件无法更新 state 值并调用其 props function

Question

i do have a functional parent component and it do have a state value, which have default value as false and it is calling another component which is visible only when the state value changes to true and the child component do have 2 function in it.

Illustrating with code

      export const MainSearch = (props) => {
        const [search, setSearch] = useState(false);
        
          const closeSearch = () => {
            setSearch(false);
           
            ANALYTICS.trackEvent('popup_collpsed');
          }
        
          const toggleSearch = async () => {
        
            await setSearch(true);
           
              ANALYTICS.trackEvent('popup_expanded');
            }
          };
            return (
             <React.Fragment>   
             <searchBar toggleSearch={toggleSearch} />
                {search  &&
                      <childSearch
                        toggleSearch={toggleSearch}
                        closeSearch={closeSearch}
                      />}
             </React.Fragment>
             )
        }

And its test file with one test case

describe('MainSearch',()=>{
 it('AdvancedSearch - Toggle popup_expanded  and popup_collapsed ', async () => {

     const component = shallow(<MainSearch {...props} />);
     const searchBar = component.find('searchBar');
     await searchBar.props().toggleSearch(); // calling function
     expect(ANALYTICS.trackEvent).toHaveBeenCalledWith('popup_expanded');
     const childSearchComponent = component.find('childSearch'); // not working ,since state value hides
     expect(childSearchComponent).toBeDefined();
     await advancedSearchComponent.props().closeSearch();// here getting null for .props()
     expect(ANALYTICS.page.trackEvent).toHaveBeenCalledWith('popup_collapsed');
  });
});

i know its possible with component.update for CLASS COMPONENTS, but here am using functional components and am getting error

if i remove the state value search, am getting my test case PASS, but cant remove that, its needed. so my test case need to make the state value true and call the function closeSearch and then check the analytics.

BUT am getting error Method “props” is meant to be run on 1 node. 0 found instead.
I guess state value if false and its not getting that particular node.

Can you guys please help me on same, since am stuck with it and can give more info if needed

Answer 1

Take a look at your toggleSearch function. You're awaiting setSearch , which isn't a promise. Remove the await Keyword and you should be fine! If you would want to trigger your Analytics call only after the State has been set, you would need to hook in to Reacts useEffect Hook.

Then you could do something like this:

useEffect(() => {
  if(search){
   ANALYTICS.trackEvent('popup_expanded');
 }
}, [search])

https://reactjs.org/docs/hooks-effect.html