testing-library / vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
http://testing-library.com/vue
MIT License
1.08k stars 110 forks source link

Setting image src from dynamic import in computed property is not reflected when test is run. #212

Closed DanielPe05 closed 3 years ago

DanielPe05 commented 3 years ago

Describe the bug A clear and concise description of what the bug is. I'm not sure if this is an issue with testing lib itself or just how vue's template compiler works but posting here in case someone using testing-library has run into it. I appreciate the help!

I have a component that is binding a computed property to an image's src attr. The computed property conditionally imports different images. It renders correctly when previewing in the browser however when I try to test it and verify that the correct image was loaded, it doesn't seem to have anything in the src attr.

To Reproduce Steps to reproduce the behavior: See the example below or here is a repo where the issue is happening: https://github.com/DanielPe05/testing-lib-vue-img-bug

Expected behavior The assertion should pass with the expected image path.

Screenshots

Related information:

Relevant code or config (if any)

// test
it('renders correct image', () => {
  const { getByTestId } = render(Component)
  expect(getByTestId('image')).toHaveAttribute('src', './images/default-logo.png')
})
// template
<img data-testid="image" :src="logoUrl" />

// script
...
data: () => ({ foo: true }),
computed: {
  logoUrl() {
    const imagePath = this.foo ? 'default-logo.png' : 'custom-logo.png'
    return require(`./images/${imagePath}`)
  }
}

Additional context I tried using waitFor but the result was the same.

afontcu commented 3 years ago

Hi! Thanks for filling this in 🙌 This is unlikely to be related to testing library, but rather to node's support for dynamic imports. You might have some luck mocking the import statement using Jest.

Also, some sort of polling might help:

import { waitFor } form '@testing-library/vue'

await waitFor(() => expect(getByTestId('image')).toHaveAttribute('src', './images/default-logo.png'))

Closing since this does not look related to VTL :) Feel free to reopen if you come up with a situation where testing lib could help!