quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
180 stars 65 forks source link

Jest Unit Test Demo can't be passed #228

Closed goforu closed 2 years ago

goforu commented 2 years ago

Software version

OS: MacOS Node: 16.6.1 NPM: 7.24.0 Any other software related to your bug:

What did you get as the error?

quasar ext add @quasar/testing-unit-jest@alpha

The auto generated demo MyButton and MyDialog can't get passed when running yarn test:unit:ci it logs:

image

What were you expecting?

demo unit test can be passed

What steps did you take, to get the error?

yarn test:unit:ci

goforu commented 2 years ago

The auto generated file is

// MyDialog.spec.js
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'
import { beforeEach, describe, expect, it } from '@jest/globals'
import { DOMWrapper, mount } from '@vue/test-utils'
import MyDialog from './demo/MyDialog'

installQuasarPlugin()

describe('MyDialog', () => {
  beforeEach(() => {
    mount(MyDialog, {
      data: () => ({
        isDialogOpen: true,
      }),
    })
  })

  it('should mount the document body and expose for testing', () => {
    const wrapper = new DOMWrapper(document.body)

    expect(wrapper.find('.q-dialog').exists()).toBeTruthy()
  })

  it('can check the inner text of the dialog', () => {
    const wrapper = new DOMWrapper(document.body)

    expect(wrapper.find('.q-dialog').html()).toContain(
      'Custom dialog which should be tested',
    )
  })
})
// MyButton.spec.ts
import { describe, expect, it } from '@jest/globals'
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'
import { mount, shallowMount, config } from '@vue/test-utils'
import MyButton from './demo/MyButton'
// Specify here Quasar config you'll need to test your component
installQuasarPlugin()

describe('MyButton', () => {
  it('has increment method', () => {
    const wrapper = mount(MyButton)
    const { vm } = wrapper

    expect(typeof vm.increment).toBe('function')
  })

  it('can check the inner text content', () => {
    const wrapper = mount(MyButton)
    const { vm } = wrapper

    expect((vm.$el as HTMLElement).textContent).toContain('rocket muffin')
    expect(wrapper.find('.content').text()).toContain('rocket muffin')
  })

  it('sets the correct default data', () => {
    const wrapper = mount(MyButton)
    const { vm } = wrapper

    expect(typeof vm.counter).toBe('number')
    expect(vm.counter).toBe(0)
  })

  it('correctly updates counter when button is pressed', async () => {
    const wrapper = shallowMount(MyButton)
    const { vm } = wrapper
    const button = wrapper.findComponent(QBtn)
    await button.trigger('click')
    expect(vm.counter).toBe(1)
  })
})

It seems installQuasarPlugin not working properly

goforu commented 2 years ago

reinstall package resolved the issue