Vue Testing Library: Property 'updateProps' does not exist on type 'RenderResult' / rerender not updating props

[linkurzweg]

Hello! I am trying to test a Modal component in my Vue project. I want to test if the modal is rendered when the corresponding prop is set to true. The documentation states that the render result from Vue Testing Library should expose a helper method called updateProps. But it doesn't, I get an error that it does not exist when I try to use it:

So I don't know if the documentation is wrong or this is a bug in the library. One or the other should be corrected, I think. I then instead tried to use the rerender method, but it does not seem to work:

Relevant code or config:

it('renders the modal when modelValue is changed to true ', async () => {
  const { queryByTestId, rerender } = render(UnverifiedFilesModal, {
    global: {
      plugins: [createTestingPinia()],
    },
    props: {
      modelValue: false,
    },
  })

  const modal = queryByTestId('unverified-files-modal')
  expect(modal).not.toBeInTheDocument()
  await rerender({ modelValue: true })
  expect(modal).toBeInTheDocument()
})

I get the error that element could not be found:

Error: expect(received).toBeInTheDocument()

received value must be an HTMLElement or an SVGElement. Received has value: null

If I render the component with the prop initially set to true, it gets rendered without problems. But rerendering with the updated prop does not work. Any help would be very appreciated!

[afontcu]

Hi,

looks like you're using Vue 3 version of Vue Testing Library, but docs are focused on the Vue 2 version. We'll update them as soon as Vue 3 versions gets out of beta, so for now you should trust TS and its types instead of docs. Check out https://github.com/testing-library/vue-testing-library/issues/176 for additional changes between Vue 2 and Vue 3 versions

[linkurzweg]

@afontcu Thanks! You're right, I'm using the Vue 3 version, didn't think about that. Any tips on how I should go about checking updating the props/emitting the value of my component?

[DannyFeliz]

For those looking for how to upgrade props, updateProps is now called rerender in Vue 3 to align with other Testing Lib libraries.