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

Question

我有一个用于过滤功能的父组件

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} />}
  )
}

我正在使用这个父组件来显示像Price range这样的过滤器，以及用户可以在屏幕上查看的其他过滤器，并为它们添加测试用例。我为此创建了一个子组件MoreFiltersComponent，用于显示许多其他过滤器，用户可以在单击More filters按钮后查看这些过滤器。便利功能是MoreFilters的一部分，但我在父组件中为它创建了状态，并将其作为属性传递，这样当有任何更新时，我可以运行父组件的useEffect来检查所有的过滤器。

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)} />
 )
}

这是我创建的测试用例，用来测试价格范围过滤器，它工作正常

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();
 }

我尝试了一个类似的测试用例，但它不起作用。我不能模拟onChange事件，因为元素不在这个组件中，所以useEffect中我根据功能过滤的代码行被暴露了。有没有办法让我也覆盖这些代码行呢？

 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"]);

 }

对于便利性测试用例，我得到了这个错误：

预期："ac"，"tv"，"wifi“

调用次数:0

我不能模拟onChange事件，因为元素不在这个组件中，所以useEffect中我根据功能过滤的代码行被暴露了。有没有办法让我也覆盖这些代码行呢？

谢谢!

Answer 1

首先，我认为你最好不要嘲笑useState和useEffect。这绝对是实现细节，虽然从技术上讲你可以做到这一点，但你可能已经达到了这一点-让任何更改都越来越难包含在测试中。如果你出于任何原因决定重塑你的状态(比如说，让它的某些部分来自道具或上下文)，你将需要完全重写你的测试。不是很好。

第二，因为shallow()仍然是useEffect的does not work fine。所以只需使用mount()即可。是的，这意味着你将会有所有嵌套的组件被渲染到深度...直到你显式地嘲笑他们！请参见：

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) 

此外，您很可能需要来自react/test-utils的act()。一些酶的助手，比如simulate()，已经调用了它，而其他的可能还没有，这个方法保证了所有相关的useEffect/useLayoutEffect都能以同步的方式运行。如果没有act()，您可能会发现useEffect是在测试完成后执行的，这没有任何意义。

记住所有这些，我们可以测试FilterComponent如何与MoreFiltersComponent一起工作(或者更准确地说，使用它的模拟)：

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

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

PS我不能回答你如何用模拟的useEffect、useState和shallow()来解决这个问题