javascript - 親が set を使用して状態を更新した後に子コンポーネントの props をテストする

Question

フィルタリングされたデータを子コンポーネントに送信する次の機能コンポーネントがあります。コードは正常に動作しています。つまり、アプリを実行して、コンポーネントが正しいデータでレンダリングされていることを確認できます。しかし、私が以下に書いたテストは に対して失敗していChildComponentます。フィルタリングされた値を持つ単一の配列要素を取得する代わりに、3 つの元の値すべてを取得しています。FilterInputBox小道具のコンポーネントの同様のテストが合格しているため、私は混乱していfilterValueます。どちらのテストも、同じイベント フィルター入力の変更後、更新された props 値をチェックしていますhandleFilterChange。何か不足していますか？なにか提案を？

ソースコード

function RootPage(props) {
  const [filterValue, setFilterValue] = useState(undefined);
  const [originalData, setOriginalData] = useState(undefined);
  const [filteredData, setFilteredData] = useState(undefined);

  const doFilter = () => {
    // do something and return some value
  }

  const handleFilterChange =  (value) => { 
    const filteredData = originalData && originalData.filter(doFilter);  
    setFilteredData(filteredData);        
    setFilterValue(value);
  };

  React.useEffect(() => {
    async function fetchData() {
        await myService.fetchOriginalData()
            .then((res) => {
                setOriginalData(res);                    
            })
    }

    fetchData();

  }, [props.someFlag]);

  return (
    <>
        <FilterInputBox
            filterValue={filterValue}
            onChange={handleFilterChange}
        />
        <ChildComponent
            data={filteredData}
        />
    </>
  );
}

テストコード

describe('RootPage', () => {
  let props,
    fetchOriginalDataStub,
    useEffectStub,
    originalData;

  const flushPromises = () => new Promise((resolve) => setImmediate(resolve));

  beforeEach(() => {
    originalData = [
        { name: 'Brown Fox' },
        { name: 'Lazy Dog' },
        { name: 'Mad Monkey' }
    ];
    fetchOriginalDataStub = sinon.stub(myService, 'fetchOriginalData').resolves(originalData);
    useEffectStub = sinon.stub(React, 'useEffect');
    useEffectStub.onCall(0).callsFake((f) => f());
    props = { ... };            
  });

  afterEach(() => {
    sinon.restore();
  });

  it('should send filtered data', async () => {
    const renderedElement = enzyme.shallow(<RootPage {...props}/>);
    const filterBoxElement = renderedElement.find(FilterInputBox);;

    await flushPromises();
    filterBoxElement.props().onChange('Lazy');
    await flushPromises();

    //This "filterValue" test is passing
    const filterBoxWithNewValue = renderedElement.find(FilterInputBox);
    expect(filterBoxWithNewValue.props().filterValue).to.equal('Lazy'); 

    //This "data" test is failing
    const childElement = renderedElement.find(ChildComponent);
    expect(childElement.props()).to.eql({
      data: [
          { name: 'Lazy Dog' }
      ]
    });
  });        
});

UPDATEいくつかのログステートメントを入れた後、私が呼び出しているときにonChange originalData未定義になっていることがわかります。なぜそれが問題になっているのかはわかりません。

誰かがこれについて何か洞察を持っているなら、まだ助けを探しています。