模擬 axios 反應測試庫開玩笑

Question

下面是使用 react 級聯兩個下拉菜單的代碼。 我正在嘗試為此寫 ut。 我正在嘗試模擬 axios call.when 我期望(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 次。 有人可以幫忙嗎。

Answer 1

將日志放入 handleSearch 后，我發現 handleSearch 在這種情況下提前返回：

if (searchTagGroup == ""  && searchTagValue == "") {

因此，不會在 handleSearch 中調用 api 不會調用並且axios.get調用的期望將失敗，因為沒有進行調用，因此計數將為0 。