如何使用Jest在React函数组件的表达式中测试状态接收值后的函数调用

Question

我正在寻找一个在表达式内方法调用的jest酶测试用例的解决方案，当它接收状态值，

当表达式条件通过时函数调用，没有onClick或onChange事件触发。

但是有一个接收值的状态，点击按钮，传递表达式，即:

{(isTableDisplayedFlag && tableData.length && filtersDialog()) || ""}

我已经断言按钮在点击渲染表数据。

const wrapper = shallow(<componentName{...props} />);
const showPriceBtn = wrapper.find("[data-test='show-pricing-button']");
expect(showPriceBtn.length).toEqual(1);

之后，它调用一个函数，该函数将isTableDisplayedFlag的状态值设置为"true";和

tableData: [
{cityName: "Bengaluru", discountedPrice: 600000, durationInSecsMax: "180", durationInSecsMin: "1", id: 522, quantity: "1"},
{cityName: "Bengaluru", discountedPrice: 750000, durationInSecsMax: "300", durationInSecsMin: "181", id: 523, quantity: "1"},
]

表达式内部的第三个是一个函数，返回呈现子组件RequiredFieldsRenderer，如下所示

const filtersDialog = () => {
return (
<RequiredFieldsRenderer
requiredFields={requiredFields}
priceNotRequired={true}
handleSubmit={applyFilters}
packageAgentType={packageAgentType}
isFilter={true}
data-test="filter-dialog"
/>
);
};

RequiredFieldsRenderer组件已经被导入到测试文件中。我写了这样的断言:期望(wrapper.containsMatchingElement ()) .toEqual (真正的(；但它不提供保险。有没有人可以帮助这种类型的场景，当状态更新和函数呈现在表达式中?

const rfr = wrapper.find("[data-test='filter-dialog']");
expect(rfr.length).toEqual(1);
```
Receive : 0 

Answer 1

如果您想检查您正在测试的包装器中的状态更新更改后，请确保在测试中完成该操作，然后您可以更新浅包装器，它将根据更改的状态更新包装器，然后您可以编写期望语句来完成测试。

// Perform action which updates the state
wrapper.update()
// Write expects to find out what changed in the wrapper

查找文档