我是 React Hooks 的新手,我想要实现的是测试一个 React 组件(称为 CardFooter),该组件包含对 useEffect 钩子(Hook)的调用,该钩子(Hook)被触发,全局上下文变量被修改。
CardFooter.js:
const CardFooter = props => {
const [localState, setLocalState] = useState({
attachmentError: false
});
const globalContext = useContext(GlobalContext);
React.useEffect(()=> {
setLocalState({
...localState,
attachmentError: globalContext.data.attachmentError
});
},[globalContext.data.attachmentError]);
}
CardFooter.test.js:
import Enzyme, { shallow } from 'enzyme';
Enzyme.configure({ adapter: new Adapter() });
describe('<CardFooter />', () => {
let useEffect;
const mockUseEffect = () => {
useEffect.mockImplementation(f => f());
};
useEffect = jest.spyOn(React, "useEffect");
mockUseEffect(); //
it('should render correctly with no props.', () => {
}
const mockUseEffect = () => {
useEffect.mockImplementation(f => f());
};
useEffect = jest.spyOn(React, "useEffect");
mockUseEffect();
const wrapper = shallow(<CardFooter />);
expect(toJson(wrapper)).toMatchSnapshot();
});
我在运行测试时遇到的错误是:
TypeError: Cannot read property 'attachmentError' of undefined
我尝试了这里介绍的方法:https://medium.com/@pylnata/testing-react-functional-component-using-hooks-useeffect-usedispatch-and-useselector-in-shallow-9cfbc74f62fb .然而,shallow 似乎没有选择模拟的 useEffect 实现。我还尝试模拟 useContext 和 globalContext.data.attachmentError。似乎没有任何效果。
最佳答案
试试这个。注意“jest.spyOn”被放置在“beforeEach”里面
beforeEach(() => {
jest.spyOn(React, "useEffect").mockImplementationOnce(cb => cb()());
// .... other things ....
}
关于javascript - useEffect 钩子(Hook)没有被 jest.spyOn mock ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59602135/