InlineEdit组件测试用例报错

const events = wrapper.emitted('change') 这行events打印结果是undifined。不知道为什么会这样。

仓库地址https://git.imooc.com/mryq2104/lego.git

收起

1回答

张轩回答被采纳获得+3积分 2022-02-18 10:09:54

同学你好你这个不是测试结果错误，而是 ts 的类型错误，新版的 vue-test-utils 将 events 的返回有可能是 undefined, 所以我们需要使用一下 type guard，先判断一下。

const events = wrapper.emitted('change')
if (events && events.length > 0) {
    expect(events[0]).toEqual(['testnew'])
}

亲测可用～

ku咖啡不加糖提问者 #1

虽然可以这么写。但是测试代码应该执行不到expect(events[0]).toEqual(['testnew'])这一步。因为每次执行events 都是undefined，可是按课上讲的逻辑说，change应该被触发了才对(也就是events有值)。我看官方文档的用法也跟课程一样，不同的是我们的events木有返回值，需要怎样处理可以让它有值呢

2022-02-18 10:18:04
张轩回复提问者 ku咖啡不加糖 #2
同学你好抱歉我看的草率了我用你的重新试了，确实没有触发，你的版本是 2.0.0-rc1, 经查，这是这个版本的 bug，所有事件都没法触发，升级以后就可以了。
```
npm install @vue/test-utils@next --save-dev
```
现在是 rc18，可以正常使用。
```
  // 事件可以正常触发
    {
      click: [ [ [MouseEvent] ] ],
      input: [ [ [Event] ] ],
      change: [ [ 'testnew' ] ]
    }
```
如果不想用 if 跳过，（这是不好的实践，因为我们就想判断是否成功），可以使用类型断言。
```
const events = wrapper.emitted('change') as string[]
expect(events[0]).toEqual(['testnew'])
```
现在没问题了
2022-02-18 10:59:16
ku咖啡不加糖提问者回复张轩 #3

谢谢老师，亲测可行!

2022-02-18 22:28:39