DEV Community

[Comment from a deleted post]
Collapse
 
rhymes profile image
rhymes

I have been using Jest to test "pure" JS code and Vue.js.

Test functions can be async so you can do stuff like:

describe('getData()', () => {
  it('should get the data', async () => {
    const response = await api.getData()
    expect(response.data).toEqual("...")
  })
})

So you can use async / await. In some cases I don't have direct control on the promises the tested call generates so I use flush-promises to get the results. This is an actual test I have for a component that uploads images (using uppy that internally uses promises to do it):

  it('should mock upload an image', async () => {
    const url = 'http://dummyimage.com/100x100'
    const uppy = {
      upload: jest.fn(() => {
        vm.onUploadSuccess({}, {}, url)
      }),
    }

    wrapper.setData({ images: [image], uppy })
    wrapper.setProps({ autoUpload: false })

    const button = wrapper.find('button.upload')
    button.trigger('click')

    // 1. it should emit an empty input (to reset the value upstream)
    let inputEvent = wrapper.emitted('input')
    expect(inputEvent).toBeTruthy()
    expect(inputEvent[0]).toEqual([''])

    // triggers all the promises
    await flushPromises()

    // 2. it should emit the URL as the last input event
    inputEvent = wrapper.emitted('input')
    expect(inputEvent).toBeTruthy()
    expect(inputEvent.slice(-1)[0]).toEqual([url])
  })