我有这样的功能组件,
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())
})