下面是使用 react 级联两个下拉菜单的代码。我正在尝试为此写 ut。我正在尝试模拟 axios 调用。当我期望 (axios.get).toHaveBeenCalledTimes(1) 时，它实际上给出了 0。有人可以帮忙吗
<div className="fixed-layout">
<Row align="bottom">
<Col span={4} className="mr-15">
<Form>
<Form.Item label="Tag Group">
<Selectbox
showSearch
style={{ width: 200 }}
placeholder="Select tag group"
optionFilterProp="children"
value={tagList}
id="tagGroup"
data-testid= "tagGroupTest"
data-cy="tag-list"
filterOption={(input, option) =>
option.props.children
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
}
changed={(value) => {
setTagList(value);
setSearchTagGroup(value);
setTagValueList(tagValuesMap[value]);
setTagValue("");
}}
>
<Select.Option value="" data-testid ="Select">
Select
</Select.Option>
{tagValuesMap &&
Object.keys(tagValuesMap).length > 0 &&
Object.keys(tagValuesMap).map((type) => (
<Select.Option
value={type}
key={type}
data-testid={type}
>
{type}
</Select.Option>
))}
</Selectbox>
</Form.Item>
</Form>
</Col>
<Col span={6} className="ml-15">
<Form>
<Form.Item label="Tag Value">
<Selectbox
showSearch
style={{ width: 200 }}
placeholder="Select tag value"
optionFilterProp="children"
value={tagValue}
id="tagValue"
data-cy="tagvalue-list"
data-testid="tagValueTest"
filterOption={(input, option) =>
option.props.children
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
}
changed={(value) => {
setTagValue(value);
setSearchTagValue(value);
}}
>
<Select.Option value="">
Select
</Select.Option>
{tagValuesList &&
tagValuesList.length > 0 &&
tagValuesList.map((type) => (
<Select.Option
value={type}
key={type}
>
{type}
</Select.Option>
))}
</Selectbox>
</Form.Item>
</Form>
</Col>
<Col span={2} align="bottom">
<Form>
<Form.Item>
<div style={{height:"40px"}}></div>
<Button type="primary" id='search' data-cy ="searchbtn" data-testid='search' onClick={handleSearch}>Search</Button>
</Form.Item>
</Form>
</Col>
<Col className="fright mt-20">
<div
id="components-dropdown-demo-dropdown-button"
className="fleft"
>
<Dropdown overlay={downloadMenu}>
<Button data-cy="download-template-btn">
<Link href="#">
<a>Download Template</a>
</Link>
<Icon type="down" />
</Button>
</Dropdown>
</div>
<Dropdown overlay={uploadMenu}>
<Button data-cy="upload-tag-btn">
<Link href="#">
<a>Create New Tags</a>
</Link>
<Icon type="down" />
</Button>
</Dropdown>
</Col>
</Row>
下面是handleSearch函数：
const handleSearch = async () => {
console.log("inside handle search");
if (searchTagGroup == "" && searchTagValue == "") {
return;
}
let param = {};
if (searchTagValue !== "") {
param.tagValue = searchTagValue;
}
if (searchTagGroup !== "") {
param.tagGroup = searchTagGroup;
}
const searchParams = new URLSearchParams(param);
let response = await service.getTags(searchParams.toString());
setSelectedTagsList(response.content);
};
我的单元测试：
axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: {content: {tagsApi}} }));
getTags.mockResolvedValueOnce(tagsApi);
window.localStorage.setItem("authenticated", "true");
const {getByRole , getByText, getByTestId} = render(
<Provider store={store}>
<Tags
data={tags}
tagValuesMap={tagValuesMap}
tagtypes={tagtypes}
/>
</Provider>
);
const handleSearch = async () => {
console.log("inside handle search");
if (searchTagGroup == "" && searchTagValue == "") {
return;
}
let param = {};
if (searchTagValue !== "") {
param.tagValue = searchTagValue;
}
if (searchTagGroup !== "") {
param.tagGroup = searchTagGroup;
}
const searchParams = new URLSearchParams(param);
let response = await service.getTags(searchParams.toString());
setSelectedTagsList(response.content);
};
fireEvent.click(document.querySelectorAll(".ant-select-search__field")[0]);
fireEvent.change(document.querySelectorAll(".ant-select-search__field")[0],{target: { value: "itemdish" },});
expect(document.querySelectorAll(".ant-select-search__field")[0].value).toBe('itemdish');
fireEvent.click(document.querySelectorAll(".ant-select-search__field")[1]);
fireEvent.change(document.querySelectorAll(".ant-select-search__field")[1],{target: { value: "fries" },});
expect(document.querySelectorAll(".ant-select-search__field")[1].value).toBe('fries');
fireEvent.click(screen.getByTestId('search'));
expect(axios.get).toHaveBeenCalledTimes(1);
await expect(getByTestId('recordCount').textContent).toBe("1 records");
screen.logTestingPlaygroundURL();
});
expect(axios.get) 调用了 0 次。有人可以帮忙吗。
答案 0 :(得分：0)
在将 log 放入 handleSearch 后，我发现 handleSearch 在这种情况下提前返回：
if (searchTagGroup == "" && searchTagValue == "") {
因此不会在 handleSearch 中调用 api 不会调用并且 axios.get 调用的期望将失败，因为没有进行调用，因此计数将为 0。