vue.js - How to simulate the behavior of closing v-dialog in Vitest? - Stack Overflow

admin管理员组

文章数量:1318563

I try the fireEvent to click outside or emitted 'update:modelValue' but the v-dailog element still visible. So how can I correctly simulate the closing behavior of v-dialog ? Thanks in advance for your help!

// ImportFile.test.js
it('opens and closes dialog when button is clicked', async () => {
    // render the component
    const wrapper = render(ImportFile, {
      global: {
        plugins: [createTestingPinia({createSpy: vi.fn}), vuetify],
      },
      attachTo: document.body
    })
    
    // check if the button is in the document
    const button = wrapper.getByText('Import')
    expect(button).toBeInTheDocument()
  
    // ensure the dialog is not initially visible
    const dialog = screen.queryByRole('dialog')
    expect(dialog).not.toBeInTheDocument()
    console.log(`before click: ${dialog}`)
  
    // simulate a click event
    await fireEvent.click(button);
  
    // check if the dialog is now visible
    const dialogAfterClick = screen.queryByRole('dialog')
    expect(dialogAfterClick).toBeInTheDocument()
    console.log(`after click: ${dialogAfterClick === null ? 'hidden' : 'visible'}`)

    // triggering dialog close
    wrapper.emitted('update:modelValue', false)
    await waitFor(() => {
      const dialogAfterClose = screen.queryByRole('dialog')
      console.log(`after close: ${dialogAfterClose === null ? 'hidden' : 'visible'}`)
    })
  })

本文标签： vuejsHow to simulate the behavior of closing vdialog in VitestStack Overflow