title: How to write Jest unit test for a Vue form component which uses a Vuex store?
body: <p>I have a login form. When I fill out the login form with data and the login button is clicked:</p>
  
  <ul>
  <li>form data (username, password) is sent to the server and a response is
  returned</li>
  <li>If the form data is invalid, a message is displayed by the <code>&lt;flash-message&gt;</code> component</li>
  <li>If the form data is valid, the user is redirected to the dashboard</li>
  </ul>
  
  <p>Since this component heavily depends on the Vuex store, I'm unable to think of some valid test cases for this component.</p>
  
  <ul>
  <li>Is this component testable? </li>
  <li>If it <em>is</em> testable, how do I write a unit test in jest?</li>
  <li>Which part(s) of my component should I mock?</li>
  <li>Should I use the vue-test-utils mount/shallowMount methods to wrap my component?</li>
  <li>My component uses Bootstrap-Vue UI components. How do I deal with them?</li>
  </ul>
  
  <p>I don't have experience with JavaScript ecosystem, so a verbose explanation would be appreciated. </p>
  
  <p><strong>Login.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;b-col sm="6" offset-sm="3"&gt;
      &lt;h1&gt;&lt;span class="fa fa-sign-in"&gt;&lt;/span&gt; Login&lt;/h1&gt;
      &lt;flash-message&gt;&lt;/flash-message&gt;
      &lt;!-- LOGIN FORM --&gt;
      &lt;div class="form"&gt;
          &lt;b-form-group&gt;
              &lt;label&gt;Email&lt;/label&gt;
              &lt;input type="text" class="form-control" name="email" v-model="email"&gt;
          &lt;/b-form-group&gt;
  
          &lt;b-form-group&gt;
              &lt;label&gt;Password&lt;/label&gt;
              &lt;input type="password" class="form-control" name="password" v-model="password"&gt;
          &lt;/b-form-group&gt;
  
          &lt;b-btn type="submit" variant="warning" size="lg" @click="login"&gt;Login&lt;/b-btn&gt;
      &lt;/div&gt;
  
      &lt;hr&gt;
  
      &lt;p&gt;Need an account? &lt;b-link :to="{name:'signup'}"&gt;Signup&lt;/b-link&gt;&lt;/p&gt;
      &lt;p&gt;Or go &lt;b-link :to="{name:'home'}"&gt;home&lt;/b-link&gt;.&lt;/p&gt;
    &lt;/b-col&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        email: '',
        password: ''
      }
    },
    methods: {
      async login () {
        this.$store.dispatch('login', {data: {email: this.email, password: this.password}, $router: this.$router})
      }
    }
  }
  &lt;/script&gt;
  </code></pre>