La librería de pruebas de Vue no volverá a renderizar el DOM cuando cambie el estado.

Tengo un componente con un botón de edición directo. El botón de edición llama a un método que establece isEditing en verdadero.

Hay algunos elementos de entrada con v-if=”isEditing”, por lo que estoy probando que esos elementos de entrada sean visibles después de hacer clic en el botón de edición.

Cuando mi prueba ejecuta fireEvent.click(screen.getByRole(‘& # 39; link & # 39 ;, {name: ‘& # 39; Edit & # 39;})), se está actualizando isEditing a verdadero (según mis mensajes de console.log antes/después del evento .click ), pero no parece volver a representar los componentes dentro de la prueba (basado en el DOM representado en mi terminal después de que getByRole falla).

Funciona según lo esperado en el navegador, pero parece que no actualiza el DOM para la especificación. Estoy usando Vue2, Vue Testing Library y Jest.

Implementación:

…
métodos: {
startEdit: () => {
this.isEditing = true
}
}

Especificación:

describe('FormComponent', () => {
  beforeEach(() => {
    render(FormComponent)
  })

it('muestra etiquetas de entrada' () => {
    fireEvent.click(screen.getByRole('link', {name: 'Editar'}))
    expect(screen.getByRole('input')).toBeInTheDocument()
  })

})