代码之家  ›  专栏  ›  技术社区  ›  Albert Olivé Corbella

如何用jest和酶测试getderivedstatefromprops

  •  3
  • Albert Olivé Corbella  · 技术社区  · 8 年前

    我有一个简单的代码,它使用新的 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
    
    2 回复  |  直到 8 年前
        1
  •  8
  •   Tomasz Mularczyk    8 年前

    它是一个没有依赖关系的静态函数。我想你可以像其他功能一样单独测试它:

    const givenProps = {...};
    const givenState = {...};
    const result = MyComponent.getDerivedStateFromProps(givenProps, givenState);
    
    expect(result).toEqual({
      ...
    })
    

    我认为这是一个有效的方法,因为 getDerivedStateFromProps 不应该包含任何副作用,应该是纯的——这意味着——给定相同的输入,它将产生相同的输出。而且,由于组件的实例与此无关,因此在这里创建一个组件只会测试内部组件。

    这也将类似于如何测试redux还原器。

        2
  •  -2
  •   Pawan Gangwani    8 年前

    包装器=浅() 包装器.instance.getderivedstatefromprops