在React中,componentWillMount
是一个在组件挂载之前调用的生命周期方法。然而,从React 16.3开始,这个方法已经被标记为不推荐使用(deprecated),并且在React的未来版本中将被移除。推荐使用 componentDidMount
或新的 getDerivedStateFromProps
和 componentDidUpdate
方法来替代。但如果你仍然需要在使用 componentWillMount
的旧代码中进行测试,尤其是测试其中的重定向逻辑,这里有一些方法可以在使用 Jest 和 Enzyme 的环境中实现。
假设你有一个React组件,它在 componentWillMount
中根据某些条件决定是否重定向用户。例如:
class MyComponent extends React.Component {
componentWillMount() {
if (!this.props.isLoggedIn) {
this.props.history.push('/login');
}
}
render() {
return <div>Welcome to the dashboard!</div>;
}
}
componentWillMount
中的重定向要测试这种行为,你可以使用 Jest 来模拟 props
和 history
对象,并检查是否调用了 history.push
方法。这里是如何使用 Enzyme 和 Jest 来做这个测试:
enzyme
、enzyme-adapter-react-16
(或与你的React版本相对应的适配器),以及 jest
。
shallow
或 mount
来渲染组件,并模拟必要的props。import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
it('redirects to login if not logged in', () => {
const mockHistory = { push: jest.fn() };
const props = { isLoggedIn: false, history: mockHistory };
const wrapper = shallow(<MyComponent {...props} />);
expect(mockHistory.push).toHaveBeenCalledWith('/login');
});
it('does not redirect if logged in', () => {
const mockHistory = { push: jest.fn() };
const props = { isLoggedIn: true, history: mockHistory };
shallow(<MyComponent {...props} />);
expect(mockHistory.push).not.toHaveBeenCalled();
});
});
shallow
渲染时,Enzyme 默认会执行生命周期方法。如果你使用 mount
,则会更全面地模拟整个组件的生命周期和子组件的行为。componentWillMount
已经被标记为弃用。如果可能,考虑更新你的组件以使用推荐的生命周期方法或功能组件加Hooks。jest.fn()
来创建一个模拟函数,这对于验证函数是否被调用以及调用时使用的参数非常有用。领取专属 10元无门槛券
手把手带您无忧上云