如何使用Jest和Enzyme测试getDerivedStateFromProps

时间:2018-06-14 10:42:43

标签: javascript reactjs unit-testing jestjs enzyme

我有这个使用新SELECT a.OrderSuffix AS 'OrderSuffix', COUNT(1) AS 'CountNew' FROM dbo.Orders AS a, dbo.OrderStatus AS b WHERE b.Status = 'Finished' AND a.OrderSuffix = array 生命周期的简单代码:

getDerivedStateFromProps

这是测试:

static getDerivedStateFromProps(nextProps: Props, prevState: State) {
  if (nextProps.value !== prevState.value) {
    console.log('hello');
    return {
      value: nextProps.value
    };
  }

  return null;
}

但是我有这个错误,但我知道这是因为console.log()而调用的。

it('should call getDerivedStateFromProps', () => {
  const instance = shallow(mockComponent());

  instance.setProps({ value: 'test2' });

  expect(instance.state.value).toEqual('test2');
});

如何正确测试Expected value to equal: "test2" Received: undefined

我正在使用:

getDerivedStateFromProps

4 个答案:

答案 0 :(得分:7)

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

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

expect(result).toEqual({
  ...
})

我认为这是一种有效的方法,因为getDerivedStateFromProps不应该包含任何副作用并且是纯粹的 - 这意味着 - 给定相同的输入它将产生相同的输出。并且因为组件的实例在这里没有相关性,所以创建一个只会对内部进行反应。

这也与测试redux减速器的方法类似。

答案 1 :(得分:1)

根据我的经验,您不应直接调用“ getDerivedStateFromProps”函数来对其进行测试。这是组件生命周期的一部分,因此您要做的就是:

  1. 使用状态值初始化组件。
  2. 用新值更新道具。
  3. 检查状态(因为它将被更新,因为将自动调用“ 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;
}

答案 2 :(得分:0)

要测试静态的getDerivedStateFromProps,我们可以使用以下代码进行测试

let wrapper = shallow(      
        <Component {...props} />      
      );
const givenProps = {...};
const givenState = {...};
const result = wrapper.instance().constructor.getDerivedStateFromProps(givenProps , givenState );
expect(result).toEqual({
  ...
})

答案 3 :(得分:-2)

wrapper = shallow() wrapper.instance.getDerivedStateFromProps