wechat miniprogram testing capture-catch:tap event

Question

I need to simulate the capture-catch:tap event in the wechat miniprogram tests with jest.

My component should receive the "tap" event, do something, and then fire the 'click' event. This is my code:

<!-- 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', {})
  })

On the one hand, the operation of the component is correct. When the miniprogram is run it works fine, however, when running the test with jest it fails, throwing this error:

 '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."'.

If in the wxml instead of using capture-catch:tap="onTap" I put bind:tap="onTap" then the test works.

I think that the error is when launching the event, perhaps when putting capture-catch:tap it cannot be done with input.instance.triggerEvent('tap', {}) but it must be another way. I have searched the official documentation and on the net and have not found it.

Answer 1

As I suspected, the error was in the way of launching the event. instead of doing it with: input.instance.triggerEvent('tap')

I do:

input.dispatchEvent('tap')

the tests work fine.

I really don't know the difference between one via and the other.