我有这个使用新的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减速器的方式类似.