我的React应用程序具有一个组件,该组件从远程服务器获取要显示的数据。在前钩时代,这componentDidMount()是一个可以去的地方。但是现在我想为此使用钩子。
const App = () => {
const [ state, setState ] = useState(0);
useEffect(() => {
fetchData().then(setState);
});
return (
<div>... data display ...</div>
);
};
Run Code Online (Sandbox Code Playgroud)
我使用Jest和Enzyme进行的测试如下所示:
import React from 'react';
import { mount } from 'enzyme';
import App from './App';
import { act } from 'react-test-renderer';
jest.mock('./api');
import { fetchData } from './api';
describe('<App />', () => {
it('renders without crashing', (done) => {
fetchData.mockImplementation(() => {
return Promise.resolve(42);
});
act(() => mount(<App />));
setTimeout(() => …Run Code Online (Sandbox Code Playgroud)