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

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>

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

Answer 2

状态对象中缺少状态，我认为重命名为 'location':

更有意义

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();
    });

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

Mock state in react snapshot test?

unit-testing

snapshot

reactjs

react-testing-library