我已经从互联网上的某处获取了useUsePrevious的代码。usePrevious的代码如下:
export const usePrevious = (value) => {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
};
现在,我正在测试与玩笑和酵素的反应。因此,我尝试测试usePrevious并遇到了一些问题。这是我的测试用例:
import React from 'react';
import { render } from 'enzyme';
import { usePrevious } from './customHooks';
const Component = ({ children, value }) => children(usePrevious(value));
const setup = (value) => {
let returnVal = '';
render(
<Component value={value}>
{
(val) => {
returnVal = val;
return null;
}
}
</Component>,
);
return returnVal;
};
describe('usePrevious', () => {
it('returns something', () => {
const test1 = setup('test');
const test2 = setup(test1);
expect(test2).toBe('test');
});
});
测试执行完成后,出现以下错误:
Expected: 'test', Received: undefined
任何人都可以让我知道为什么我变得未定义,这是测试响应中自定义挂钩的正确方法吗?
从@Dmitrii G的评论中提出建议后,我更改了代码以重新呈现该组件(以前我是重新安装该组件)。
这是更新的代码:
import React from 'react';
import PropTypes from 'prop-types';
import { shallow } from 'enzyme';
import { usePrevious } from './customHooks';
const Component = ({ value }) => {
const hookResult = usePrevious(value);
return (
<div>
<span>{hookResult}</span>
<span>{value}</span>
</div>
);
};
Component.propTypes = {
value: PropTypes.string,
};
Component.defaultProps = {
value: '',
};
describe('usePrevious', () => {
it('returns something', () => {
const wrapper = shallow(<Component value="test" />);
console.log('>>>>> first time', wrapper.find('div').childAt(1).text());
expect(wrapper.find('div').childAt(0).text()).toBe('');
// Test second render and effect
wrapper.setProps({ value: 'test2' });
console.log('>>>>> second time', wrapper.find('div').childAt(1).text());
expect(wrapper.find('div').childAt(0).text()).toBe('test');
});
});
但是我仍然遇到相同的错误
Expected: "test", Received: ""
引入settimeout时测试通过:
import React from 'react';
import PropTypes from 'prop-types';
import { shallow } from 'enzyme';
import { usePrevious } from './customHooks';
const Component = ({ value }) => {
const hookResult = usePrevious(value);
return <span>{hookResult}</span>;
};
Component.propTypes = {
value: PropTypes.string,
};
Component.defaultProps = {
value: '',
};
describe('usePrevious', () => {
it('returns empty string when component is rendered first time', () => {
const wrapper = shallow(<Component value="test" />);
setTimeout(() => {
expect(wrapper.find('span').text()).toBe('');
}, 0);
});
it('returns previous value when component is re-rendered', () => {
const wrapper = shallow(<Component value="test" />);
wrapper.setProps({ value: 'test2' });
setTimeout(() => {
expect(wrapper.find('span').text()).toBe('test');
}, 0);
});
});
我不是使用settimeout的忠实拥护者,所以我觉得我可能在做一些错误。如果有人知道不使用settimeout的解决方案,请随时在此处发布。谢谢。
引擎盖上的酶利用了React的浅层渲染器。并且它具有运行效果问题。不知道它是否会很快修复。解决方法setTimeout
令我感到惊讶,不知道它是否有效。不幸的是,这不是通用方法,因为您需要在案例重新呈现的任何更改中使用该方法。真脆弱。
作为解决方案,您可以使用mount()
。
另外,您可以通过模拟mount()
每个嵌套组件来模仿浅渲染:
jest.mock("../MySomeComponent.jsx", () =>
(props) => <span {...props}></span>
);
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句