微信小程序测试capture-catch:tap事件

Question

我需要用jest模拟微信小程序测试中的capture-catch:tap事件

我的组件应该接收“tap”事件，执行某些操作，然后触发“click”事件。这是我的代码：

<!-- WXML -->
<view
  ...
  class='edit-component'
  capture-catch:tap="onTap"
  >
  <!-- other things -->
</view>



// .TS
methods: {
    onTap(event){
      console.log('onTap event')
       //...
       that.triggerEvent("click",event.detail)
    }
}

//test .js file
const path = require('path')
const simulate = require('miniprogram-simulate');

  it('test capture-catch:tap event', done => {
    let id = simulate.load(path.resolve(__dirname, '../../ui/controls/edit/edit'))
    let component = simulate.render(id)
    let input = component.querySelector('.edit-component')
    component.addEventListener('click', evt => {
      done()
    })
    input.instance.triggerEvent('tap', {})
  })

一方面，组件的运行是正确的。当小程序是运行时，它工作正常，但是，当运行用 jest 测试时它失败了，抛出这个错误：

 'thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."'.

如果在 wxml 中而不是使用 capture-catch:tap="onTap" 我将 bind:tap="onTap"然后测试工作。

我认为错误是在启动事件时，也许在放置 capture-catch:tap 时无法用 input.instance.triggerEvent( 'tap', {}) 但一定是另一种方式。找了官方文档和网上都没有找到

Answer 1

如我所料，错误是在启动事件的过程中发生的。而不是这样做： input.instance.triggerEvent('tap')

我愿意：

input.dispatchEvent('tap')

测试工作正常。

我真的不知道一个和另一个之间的区别。

微信小程序测试capture-catch:tap事件

wechat miniprogram testing capture-catch:tap event

wechat

jestjs

wechat-miniprogram