如何为 React useEffect 中的代码编写 Jest-enzyme 测试用例，其依赖项在其子组件中更新

Question

I have a parent component for filtering functionality

export const FilterComponent = ({data}) {
  const [priceRange, setPriceRange] = React.useState({});
  const [amenities, setAmenities] = React.useState([]);

  React.useEffect(() => {
    if (priceRange.min) {
      // code to filter based on priceRange
    }

    if(amenities.length) {
      // code to filter based on amenities
    },[priceRange, amenities])

  return (
          <select id="price" value={priceRange} onChange={(event) => setPriceRange(JSON.parse(event.target.value))}>
            <option value="">Price Per Night</option>
            <option value='{"min":0,"max":99}'>Less than $99</option>
            <option value='{"min":100,"max":299}'>$100 to $299</option>
            <option value='{"min":300,"max":499}'>$300 to $499</option>
            <option value='{"min":500}'>More than $500</option>
          </select>

    <MoreFiltersComponent setAmenities={setAmenities} amenities={amenities} />}
  )
}

I am using this parent component to display the filters like Price range and other filters that user can view on the screen and added test cases for them. I created a child component to this, MoreFiltersComponent, to display many other filters which user can view after clicking on More Filters button. amenities is part of MoreFilters but I created state for it in parent component and passing it as props so that I can run useEffect of parent component to check all the filters when there is any update.

export const MoreFiltersComponent = ({setAmenities, amenities}) => {

  const updateValue = (event, state, updateState) => {
   // code to update the state
  }
 
 return (
   <input type="checkbox" name="ac" id="ac" value="ac" onChange={(event) => updateValue(event, amenities, setAmenities)} />
 )
}

This is the test case I created to test the price range filter which is working fine

const setPriceRangeSpy = jest.fn();
const mockUseEffect = () => {
    useEffect.mockImplementationOnce((f) => f());
  };

it('should render the correct results for selected price range', () => {
    const event = {
      target: { value: '{"min": 0, "max": 99}' },
    };

    useStateSpy.mockImplementationOnce(() => [{}, setPriceRangeSpy]);
    renderedModule = shallow(<FilterComponent {...props} />);
    mockUseEffect();

    renderedModule.find('#price').simulate('change', event);
    
    expect(setPriceRangeSpy).toHaveBeenCalledWith({ min: 0, max: 99 });
    expect(renderedModule).toMatchSnapshot();
 }

I tried a similar test case for amenities but it doesn't work. I can't simulate the onChange event as the element isn't in this component and so the lines of code in useEffect where I filter based on amenities are uncovered. is there a way I can cover those lines of code as well ?

 const setAmenitiesSpy = jest.fn();
 const mockUseEffect = () => {
    useEffect.mockImplementationOnce((f) => f());
  };

 it('should render the correct results when there is no max price', () => {
   useStateSpy.mockImplementationOnce(() => [["ac", "tv", "wifi"], setAmenitiesSpy]);
   renderedModule = shallow(<FilterComponent {...props} />);
   mockUseEffect();

   expect(setAmenitiesSpy).toHaveBeenCalledWith(["ac", "tv", "wifi"]);

 }

I get this error for amenities test case:

Expected: ["ac", "tv", "wifi"]

Number of calls: 0

I can't simulate the onChange event as the element isn't in this component and so the lines of code in useEffect where I filter based on amenities are uncovered. is there a way I can cover those lines of code as well ?

Thanks!

Answer 1

First, I think you better not mocking useState and useEffect . It's definitely implementation details and while you can technically do that you will - and you probably reached this point - make any change harder and harder to include in test. Not telling that if you for any reason ever decide to reshape your state(say, making some part of it coming from props or context instead) you will need to completely rewrite your tests. It's not good.

Second, since shallow() still does not work fine with useEffect . So just use mount() . Yes, it means you will have all nested components to be rendered in deep... until you explicitly mock them! See:

import { MoreFiltersComponent } from '../path/to/MoreFiltersComponent.jsx';

jest.mock('../path/to/MoreFiltersComponent.jsx', () => ({
 MoreFiltersComponent: function MoreFiltersComponent() {
  // so this is mocked React component that always returns null
   return null; 
 } 
}));

....
 const wrapper = mount(.....);
 // you still can search for this component, even if it's mocked and always returns null in render
 wrapper.find(MoreFiltersComponent) 

Also you most probably will need act() from react/test-utils . Some enzyme's helpers like simulate() already call that while others maybe don't. This method ensures all the related useEffect / useLayoutEffect will be run and run in sync way. Without act() you may find useEffect is executed after test has been completed that does not make any sense.

Keeping all that in mind, we can test how FilterComponent works with MoreFiltersComponent (or more precisely with its mock):

  const wrapper = mount(<FilterComponent data={mockedData} />);
  act(() => {
    wrapper.find(MoreFiltersComponent).invoke('setAmenities')(['a','b']);
  });

  expect(wrapper).toMatchSnapshot(); // should be only those matched filters

PS I cannot answer how you can solve that task with mocked useEffect and useState and shallow()