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