[英]How to test state update and component rerender after async call in react
I am writing an simple app where after clicking the button, async call to spotify API should be performed and when promise resolves it should update component's state.我正在编写一个简单的应用程序,在单击按钮后,应该执行异步调用来识别 API,当 promise 解决时,它应该更新组件的 state。 I am using react hooks to manage state in my component.
我正在使用反应挂钩来管理组件中的 state。
In my tests I mocked API call.在我的测试中,我模拟了 API 调用。
spotify.jsx发现.jsx
export default class Spotify {
constructor(token) {
this.axiosInstance = axios.create({
baseURL: baseURL,
headers: buildHeaders(token),
});
}
async getUserInfo() {
const userInfo = await this.axiosInstance({
url: `/me`,
});
return userInfo.data
}
}
spotify mock:现场模拟:
const getUserInfoMock = jest.fn();
const mock = jest.fn().mockImplementation(() => ({
getUserInfo: getUserInfoMock,
}));
export default mock;
User.jsx用户.jsx
const User = props => {
const [user, setUser] = useState(null);
const {token} = useContext(AuthContext);
const spotify = useMemo(() => new Spotify(token), [token]);
const getUserInfo = async () => {
console.log("button clicked")
const fetched = await spotify.getUserInfo();
console.log(fetched)
setUser(fetched);
}
return (
<React.Fragment>
<p>user page</p>
<button onClick={getUserInfo} > click me </button>
{user && (
<div>
<p>{user.display_name}</p>
<p>{user.email}</p>
</div>
)}
</React.Fragment>
);
};
My question is how to properly test such behavior.我的问题是如何正确测试这种行为。 I managed to make it pass but isn't calling
await
on simulate()
an ugly hack?我设法让它通过了,但不是在
simulate()
上调用await
一个丑陋的黑客吗? Simulate does not return a promise.模拟不返回 promise。 Here is a test:
这是一个测试:
it('updates display info with data from api', async () => {
const userInfo = {
display_name: 'Bob',
email: 'bob@bob.bob',
};
spotifyMock.getUserInfo.mockImplementation(() => Promise.resolve(userInfo));
wrapper = mount(<User />);
expect(wrapper.find('p')).toHaveLength(1);
await wrapper
.find('button')
.last()
.simulate('click');
wrapper.update();
expect(wrapper.find('p')).toHaveLength(3);
});
On the other hand when i check only if mock was called I don't need to use async/await and test passes:另一方面,当我只检查是否调用了 mock 时,我不需要使用 async/await 和测试通过:
it('calls spotify api on click', () => {
wrapper = mount(<User />);
expect(spotifyMock.getUserInfo).not.toHaveBeenCalled();
wrapper
.find('button')
.last()
.simulate('click');
expect(spotifyMock.getUserInfo).toHaveBeenCalledTimes(1);
});
I wonder if my way of testing is proper and what if I want to add a feature to fetch data from api when component renders - with useEffect hook.我想知道我的测试方式是否正确,如果我想添加一个功能以在组件呈现时从 api 获取数据 - 使用 useEffect 挂钩。 Does Enzyme has a full support for react hooks?
Enzyme 是否完全支持反应钩子? I also struggle with warning
Warning: An update to User inside a test was not wrapped in act(...)
even if I wrap a mount
and simulate
functions.我也遇到警告警告:即使我包装了
mount
并simulate
功能Warning: An update to User inside a test was not wrapped in act(...)
。
You should wrap your render-affecting calls in an async act() function as per Dan Abramov's blog post like so:您应该按照Dan Abramov 的博客文章将影响渲染的调用包装在 async act() function 中,如下所示:
it('calls spotify api on click', async () => {
await act(async () => {
wrapper = mount(<User />);
});
expect(spotifyMock.getUserInfo).not.toHaveBeenCalled();
await act(async () => {
wrapper
.find('button')
.last()
.simulate('click');
});
wrapper.update();
expect(spotifyMock.getUserInfo).toHaveBeenCalledTimes(1);
});
Reference: Testing with React's Jest and Enzyme when simulated clicks call a function that calls a promise参考: 当模拟点击调用 function 调用 promise 时使用 React 的 Jest 和 Enzyme 进行测试
Wrap your expect statement in setImmediate将您的期望语句包装在setImmediate
setImmediate(() => {
expect(spotifyMock.getUserInfo).toHaveBeenCalledTimes(1);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.