根组件的集成测试

Question

关于根组件的测试，如果是用函数组件来编写老师有建议
可以采用像是react-testing-library的测试方法，着重关注界面而不是内部数据
感觉有点像是根组件做集成测试
有遇到一个困难点，因為创建跟编辑没办法向原本那样查看state，
也找不到相关可以访问确认context provider的用法
所以只好跳回首页看条目有无增加更新
前面getEditData有mock api的关系，所以首页会检视失败
所以只好开新的test case去接真的api，老师这样也可以算是根组件的测试完成吗

Answer 1

张轩 2021-01-16 16:24:32

同学你好 假如是全都使用 function component，而且使用 react-testing-library，它更重视的是界面，所以测试主要的 App 有点像测试整个APP， 所以改成 E2E 测试，更加形象一点, 但是这样就麻烦一点。

第二种方法，将数据操作的过程单独拿出来，做成一系列的操作数据的函数，但是不和 组件的 state 等产生具体的强绑定，你如果使用过 redux ，肯定就会知道它的 store 是可以单独测试的，我们这里可以使用同样的思路。

// 创建一个 dataOps.js
function getEditData(id) {

}
然后测试函数的返回是否符合逻辑

• 提问者 慕瓜5414566 #1

  谢谢老师的提点~! 这几天在融会贯通思考老师的意思，每个页面(Home,Create)可以个别做整合测试，但如果全部加起来(APP)，整套测试还是比较麻烦的(几乎等于E2E测试，用人工或是cypress)，所以我们改采用单元测试的角度，我们不一定要在app根组件去做整个APP测试，还是可以拆开getEditData有没有正确返回数据跟context(or redux)改变有无正确显示分开测(同样的思路)

• 提问者 慕瓜5414566 #2

  老师~~~~

• 张轩 回复 提问者 慕瓜5414566 #3

  哈哈 看到你的评价啦 希望以后有二次回复有新的问题的话 可以开一个新的问题 回复的话不是特别好追踪 谢谢～

点开查看后面1条评论