title: How to reset tests in Vue with vitest+testing-library?
body: <p>I am learning how to test vue components using this combination of technologies, Vue, testing-library and vitest. My component is using vee-validate</p>
  <p><strong>TheLogin.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container mx-auto px-4 h-full&quot;&gt;
      &lt;div class=&quot;flex content-center items-center justify-center h-full&quot;&gt;
        &lt;div class=&quot;w-full lg:w-4/12 px-4&quot;&gt;
          &lt;VeeForm
            v-slot=&quot;{ handleSubmit, errors, isSubmitting }&quot;
            :validation-schema=&quot;schema&quot;
            as=&quot;div&quot;
          &gt;
            &lt;form @submit=&quot;handleSubmit($event, onSubmit)&quot; method=&quot;post&quot;&gt;
              &lt;div
                class=&quot;relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0&quot;
              &gt;
                &lt;div class=&quot;rounded-t mb-0 px-6 py-6&quot;&gt;
                  &lt;div class=&quot;text-center mb-3&quot;&gt;
                    &lt;h6 class=&quot;text-gray-600 text-sm font-bold&quot;&gt;Sign in with&lt;/h6&gt;
                  &lt;/div&gt;                               
                &lt;/div&gt;
                &lt;div class=&quot;flex-auto px-4 lg:px-10 py-10 pt-0&quot;&gt;
                   &lt;div v-if=&quot;loginError&quot; class=&quot;text-red-500&quot;&gt;{{loginError}}&lt;/div&gt;
                  &lt;div class=&quot;text-gray-500 text-center mb-3 font-bold&quot;&gt;
                    &lt;small&gt;Or sign in with credentials&lt;/small&gt;
                  &lt;/div&gt;                
                    &lt;div class=&quot;relative w-full mb-3&quot;&gt;
                      &lt;label
                        class=&quot;block uppercase text-gray-700 text-xs font-bold mb-2&quot;
                        for=&quot;email&quot;
                        &gt;Email&lt;/label
                      &gt;
                      &lt;Field
                        id=&quot;email&quot;
                        name=&quot;email&quot;
                        placeholder=&quot;email&quot;
                        class=&quot;border-0 px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full&quot;
                        style=&quot;transition: all 0.15s ease 0s&quot;
                        :disabled=&quot;isSubmitting&quot;
                        :class=&quot;{ 'border-red-500': errors.email }&quot;
                      /&gt;                      
                        &lt;ErrorMessage class=&quot;text-red-500 text-xs&quot; name=&quot;email&quot; /&gt;                                                                             
                    &lt;/div&gt;
                    &lt;div class=&quot;relative w-full mb-3&quot;&gt;
                      &lt;label
                        class=&quot;block uppercase text-gray-700 text-xs font-bold mb-2&quot;
                        for=&quot;password&quot;
                        &gt;Password&lt;/label
                      &gt;
                      &lt;Field
                        id=&quot;password&quot;
                        name=&quot;password&quot;
                        type=&quot;password&quot;
                        class=&quot;border-0 px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full&quot;
                        placeholder=&quot;Password&quot;
                        style=&quot;transition: all 0.15s ease 0s&quot;
                        :disabled=&quot;isSubmitting&quot;
                        :class=&quot;{ 'border-red-500': errors.password }&quot;
                      /&gt;                      
                        &lt;ErrorMessage
                        class=&quot;text-red-500 text-xs&quot;
                        name=&quot;password&quot;
                      /&gt;                                                                             
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;label class=&quot;inline-flex items-center cursor-pointer&quot;
                        &gt;&lt;input
                          id=&quot;customCheckLogin&quot;
                          type=&quot;checkbox&quot;
                          class=&quot;form-checkbox border-0 rounded text-gray-800 ml-1 w-5 h-5&quot;
                          style=&quot;transition: all 0.15s ease 0s&quot;
                        /&gt;&lt;span class=&quot;ml-2 text-sm font-semibold text-gray-700&quot;
                          &gt;Remember me&lt;/span
                        &gt;&lt;/label
                      &gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;text-center mt-6&quot;&gt;
                      &lt;button
                        class=&quot;bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full&quot;
                        type=&quot;submit&quot;
                        style=&quot;transition: all 0.15s ease 0s&quot;
                        :disabled=&quot;isSubmitting&quot;
                        v-text=&quot;isSubmitting ? 'Processing' : 'Sign In'&quot;
                      &gt;&lt;/button&gt;
                    &lt;/div&gt;                
                &lt;/div&gt;
              &lt;/div&gt;                
            &lt;/form&gt;
          &lt;/VeeForm&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot; setup&gt;
  import axios from &quot;axios&quot;;
  import { ErrorMessage, Form as VeeForm, Field } from &quot;vee-validate&quot;;
  import { ref } from &quot;vue&quot;;
  import * as yup from &quot;yup&quot;
  import { useRouter } from 'vue-router'
  
  const loading = ref(false)
  const loginError =ref('')
  const router = useRouter()
  
  const schema = yup.object({  
    email: yup.string().required().min(8).label(&quot;Email&quot;),
    password: yup.string().required().min(8).label(&quot;Password&quot;)  
  });
  
  const onSubmit = async (values, actions) =&gt; {
    loading.value = true;  
  
      const formData = {
        email: values.email,
        password: values.password
      };
  
      axios
        .post(&quot;backend-url&quot;, formData)
        .then((response) =&gt; {
          loading.value = false;        
          router.push({ name: &quot;products.index&quot; });
        })
        .catch((error) =&gt; {                
          actions.setErrors(error.response.data.errors);    
          loginError.value = error.message;    
        });
  
  };
  &lt;/script&gt;
  </code></pre>
  <p>And this is my test:</p>
  <pre><code>import { describe, it, expect, beforeEach, test } from 'vitest'
  import TheLogin from '@/Pages/TheLogin.vue'
  import flushPromises from 'flush-promises';
  import waitForExpect from 'wait-for-expect';    
  import {fireEvent, render, screen} from '@testing-library/vue'
  
  
  describe('TheLogin', () =&gt; {    
  
      test('renders error message if email is empty', async () =&gt; {                     
  
          const {getAllByRole, getByRole, findByRole } = render(TheLogin);
  
          const button = getByRole('button',  { name: /sign in/i })         
  
          await fireEvent.click(button)
  
          await flushPromises()
  
          await waitForExpect(() =&gt; {            
              const errorElement = getAllByRole('alert') 
              //this is better because the error message could change
              expect(errorElement[0].textContent).toBeTruthy()       
              //this also works
              //getByText('Email is a required field')            
          })        
      })
  
      test('renders error message if password is empty', async () =&gt; {
          const {getAllByRole, getByPlaceholderText, getByRole } = render(TheLogin)                 
  
          const button = getByRole('button',  { name: /sign in/i })  
  
          const emailInput = getByPlaceholderText(/email/i)
  
          await fireEvent.update(emailInput, 'test@gmail.com')
  
          await fireEvent.click(button)
  
          await flushPromises()
  
          await waitForExpect(() =&gt; {
              const errorElement = getAllByRole('alert')             
              expect(errorElement[0].textContent).toBeTruthy()                                   
          })
  
      })
  
  })
  </code></pre>
  <p>When I delete 1 test, it works fine, but when there are 2 o more tests it fails, the message says this:</p>
  <blockquote>
  <p>TestingLibraryElementError: Found multiple elements with the role
  &quot;button&quot; and name <code>/sign in/i</code></p>
  </blockquote>
  <p>The strange thing is that it looks like it is rendering the component twice, that's why I would like to know how to reset each test, I mean run each test in isolation, thanks.</p>