Test时Cannot read the property 'state' of undefined

Question

老师您好，我在测试时遇到了一个问题， 咨询您一下。

就是有两个component A, B. A 和 B 都被您讲的withContext包起来。 其中B是A的子component。

当我测A时传了props， 也单独命名export A. 但是我monut(A), B中使用context（this.props.data.state…）的那一行报错Cannot read the property of ‘state’.图中那一行在B的文件中。

Answer 1

张轩 2020-08-02 09:18:54

同学你好 看了你给的例子 Child 的一些值是从 context 里面取得，但是在测试的时候，我们并没有 context 赋值，肯定会造成 Child，比如你的例子中 this.props.data.state.items 这个 data 是从 context 传入的，但是在测试中，这个根本是不存在的。

两个解决方法，我都试了一下

1，在 test 中使用 context 来包裹

const wrapper = mount(
    <AppContext.Provider value={{
        state: initData,
    }}>
        <Parent {...props}  />
    </AppContext.Provider>
)

2， 直接把值当props 传给 child，child 就不要用 context 了

• 提问者 慕雪5497580 #1

  老师您好，我也试了一下，真的可以了。我们组就我一个前端，我也没经验，老师的课程帮助太大了，基本覆盖了所有业务，良心课程。非常感谢。

• 张轩 回复 提问者 慕雪5497580 #2

  谢谢同学的支持 觉得有用可以给一个好评 ?

• 提问者 慕雪5497580 回复 张轩 #3

  哈哈哈，必须好评。哎，突然发现，已经错过了写评价的机会了，是默认好评。

Answer 2

张轩 2020-08-01 09:34:27

同学你好 

在容器组件在测试的时候 和context 是无关的，所以任何需要的数据都需要从 props 中注入，看错误是你在初始化这个组件的测试的时候，并没有传入 props.data.state 属性。 

• 提问者 慕雪5497580 #1

  老师您好
  我知道我描述的比较抽象， 我刚刚写了一个小demo，能麻烦您看一下嘛？就是Parent和Child都用了Context, 我不知道测parent时怎么给child传数据。
  https://github.com/Maggie216jie/parent-test
  问题就在文件Parent.test.js的第22行。

• 张轩 #2

  没问题同学 感谢你的源代码 我下午看看欧

• 提问者 慕雪5497580 回复 张轩 #3

  好的，不用急不用急，?谢谢。