Test sweetalert2 displays content in Vue + Mochapack

I have a project in Laravel/Vue with mocha+mochapack for testing, it uses the sweetalert2 plugin to show modals. it works, but I am not quite sure how to testing it.

This is the component:

<template>
    <tr>
        <th ></th>
        <td></td>
        <td></td>
        <td>
            <a class="show-confirm-dialog text-success mr-2" @click.prevent="open" href="#">
                <i class="nav-icon i-Pen-2 font-weight-bold"></i>
            </a>        
        </td>
    </tr> 
</template>
<script>

  import axios from 'axios';
  import Swal from 'sweetalert2';
  import { RESERVATION_CONFIRM, 
           RESERVATION_CANCEL, 
           RESERVATION_DELETE,
           FETCH_RESERVATION
  } from '../store/actions.type';
  import store from "../store";

    export default{

    name: "Item", 

        props:{
            reservation:{
                type: Object,
                required: true
            }
        },      

        methods:{

            open(){                                                     
                      
        Swal.fire({
          title: 'Details',
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: `Confirm`,                     
          denyButtonText: `Cancel`,
          cancelButtonText: `Close`,
          html: `<div class="card o-hidden mb-4">                    
                    <div class="card-body">
                        <p class="card-text">Name: ${this.reservation.client_name}</p>
                        <p class="card-text">Email: ${this.reservation.client_email}</p>
                        <p class="card-text">Phone number: ${this.reservation.phone_number}</p>
                        <p class="card-text">Booking date: ${this.reservation.booking_date}</p>
                        <p class="card-text">Number of guests: ${this.reservation.number_of_guests}</p>
                        <p class="card-text">Message: ${this.reservation.message}</p>                                                    
                    </div>
                  </div>`
        }).then((result) => {
          
          if (result.isConfirmed) {                            

              .....

          } else if (result.isDenied) {

              .......

          }

        })
                           
      }

      }

    }   
</script>

And this is my test

Item.spec.js

......
    beforeEach(() => {        

    store = new Vuex.Store()

    wrapper = shallowMount(Item, { store, localVue, propsData: {
      reservation: {
        id: 1,
        name: 'test name',
        email: 'test email',
        booking_date: '2020-12-01',
        number_of_guests: 15,
        message: 'test message'
       }
     }
   });

   }) 
   ...

  it.only('can display the reservation detail', async () => {         

    wrapper.find('.show-confirm-dialog').trigger('click');

    await wrapper.vm.$nextTick();

    expect(wrapper.html()).toContain('Name: test name');
    

  });

...

My test fails because does not find the word: Name: test name. What can I do? thank you.