Question

希尔

我想完成以下快照测试，但我不知道如何传入页面呈现所需的状态。

test('test renders as per snapshot', () => {
        const state = {
            orderNumber: 1000000001,
            userID: 1234567,
          }
        const tree = renderer
            .create(<Order location={ state }></Order>)
            .toJSON();
        expect(tree).toMatchSnapshot();
    });

我收到此错误

 TypeError: Cannot read property 'orderNumber' of undefined
> 40 |       this.props.location.state.orderNumber;

谁能告诉我如何将它传递给我的快照测试以使其不会失败？

Answer 1

您应该将组件作为 <Order location={{ state }}></Order> 传入（注意额外的花括号），因为它等于 <Order location={{ state: state }}></Order>

在您的帖子中，表示将 state 作为变量作为 'props' 传入，而 this.props.location.state 将是未定义的，从而导致您的错误。

Answer 2

您在状态对象中缺少状态，我认为重命名为“位置”更有意义：

test('test renders as per snapshot', () => {
        const location = {
            state: {
              orderNumber: 1000000001,
              userID: 1234567,
            }
          }
        const tree = renderer
            .create(<Order location={ location }></Order>)
            .toJSON();
        expect(tree).toMatchSnapshot();
    });

反应快照测试中的模拟状态？

2 个答案: