[英]How to test getDerivedStateFromProps with Jest and Enzyme
我有一个使用新getDerivedStateFromProps
生命周期的简单代码:
static getDerivedStateFromProps(nextProps: Props, prevState: State) {
if (nextProps.value !== prevState.value) {
console.log('hello');
return {
value: nextProps.value
};
}
return null;
}
这是测试:
it('should call getDerivedStateFromProps', () => {
const instance = shallow(mockComponent());
instance.setProps({ value: 'test2' });
expect(instance.state.value).toEqual('test2');
});
但我有这个错误,但我知道这是因为 console.log() 调用。
Expected value to equal:
"test2"
Received:
undefined
如何正确测试getDerivedStateFromProps
?
我正在使用:
react: 16.4
react-Dom: 16.4
enzyme-adapter-react-16: 1.1.1
react-test-renderer: 16.4.1
它是一个没有依赖性的静态函数。 我认为您可以像其他所有功能一样单独测试它:
const givenProps = {...};
const givenState = {...};
const result = MyComponent.getDerivedStateFromProps(givenProps, givenState);
expect(result).toEqual({
...
})
我认为这是一种有效的方法,因为getDerivedStateFromProps
不应该包含任何副作用并且是纯的 - 这意味着 - 给定相同的输入它将产生相同的输出。 并且因为组件的实例在这里没有相关性,所以创建一个只会测试内部结构。
这也类似于您如何测试 redux reducer。
根据我的经验,您不应该直接调用“getDerivedStateFromProps”函数来测试它。 它是组件生命周期的一部分,因此您需要做的就是:
例如:
describe('getDerivedStateFromProps', () => {
it('new value arrived from props and state is updated', () => {
const newValue = 'NewVal';
const wrapper = createAndMountComponent(params); // here initiate your component wrapper
const instance = wrapper.instance();
wrapper.setProps({ value: newValue }); // update props
const { value, valueFromProps } = instance.state; // check if the value in state was updated
expect(value).toEqual(newValue);
expect(valueFromProps).toEqual(newValue);
});
});
这足以测试“getDerivedStateFromProps”函数。 当然,您不应忘记更新“getDerivedStateFromProps”函数中的值:
static getDerivedStateFromProps(props, state) {
const { value } = props;
const { valueFromProps } = state;
if (value !== valueFromProps) {
return {
value,
valueFromProps: value
};
}
return null;
}
要测试静态 getDerivedStateFromProps,我们可以使用以下代码进行测试
let wrapper = shallow(
<Component {...props} />
);
const givenProps = {...};
const givenState = {...};
const result = wrapper.instance().constructor.getDerivedStateFromProps(givenProps , givenState );
expect(result).toEqual({
...
})
包装器 = 浅() wrapper.instance.getDerivedStateFromProps
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.