酶在使用 Jest 和酶时获取 useEffect 反应钩子测试用例的行覆盖率?

时间:2021-05-13 05:52:16

标签: jestjs react-hooks enzyme

我有这样的功能组件,

export default function HeaderDropdown  () {
 
    const [userInfo, setUserInfo] = useState([]);
    const [languageList, setLanguageList] = useState([]);
    const [preferredLanguage, setPreferredLanguage] = useState();
 

        useEffect(() => {
            const getUserInfo = async () => {
                const languageResult = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5', { withCredentials: true});
                const languageData = await languageResult.data;
    
                if(languageData) {
                    
                    const list = languageData.map(p=>p.title) 
                    //console.log(list)
                    setLanguageList(list);
                }         
            }
            getUserInfo();
        }, []);

    return (
        <div>
            languageList is {languageList.length}
            <Dropdown>
                <Dropdown.Toggle variant="link" size="sm">
                    "dictionary  dictionary hello", <span className="uxf-header-title-username">"userInfo name"</span>{' '}
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <div>
                        <Dropdown className = "language-dropdown">
                            <Dropdown.Toggle  variant="link" id="dropdown-basic">
                                "dictionary.language"
                            </Dropdown.Toggle>
                            <Dropdown.Menu id="language-dropdown-menu">  
                             {
                                languageList ? languageList.map( lang => {
                                    return(                                        
                                        <Dropdown.Item key = {Math.random()}
                                        value= "lang.id">
                                            language is : {lang}
                                        </Dropdown.Item>
                                    )
                                })
                                : 
                                <div>
                                    languageList loading
                                </div>
                             }
                        
                            </Dropdown.Menu>
                        </Dropdown>
                    </div>
                    <Dropdown.Item>  dictionary helpandTraining</Dropdown.Item>
                    <Dropdown.Item>  dictionary feedback</Dropdown.Item>
                    <Dropdown.Item>  dictionary signOut</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </div>
    );
};

如何测试axios钩子的getUserInfo函数useEffect

  it('works', ()=>{
    const getUserInfo = jest.fn();
    const useE = jest.spyOn(React, "useEffect").mockImplementation(f=>f());

    let wrapper = mount(<HeaderDropdown/>)
    console.log(wrapper.debug())

  })

0 个答案:

没有答案