Question

我有一个以下功能组件，该组件将一些已过滤的数据发送到子组件。代码运行正常，即我可以运行应用程序并查看使用正确数据渲染的组件。但是我在下面编写的测试因ChildComponent而失败。而不是获取具有过滤值的单个数组元素，而是获取所有三个原始值。我对困惑FilterInputBox的{{1}}组件的类似测试通过感到困惑。在相同的事件过滤器输入更改（即filterValue）之后，这两个测试都在检查更新的道具值。我有什么想念的吗？有什么建议吗？

源代码

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' } ] }); }); }); onChange时未定义。不知道为什么会这样，这似乎是问题所在。

如果有人对此有任何见识，仍会寻求帮助。

使用set在父级更新状态之后测试子级组件道具

0 个答案: