Jest Vue: [Vue warn]: Failed to mount component: template or render function not defined. shallowMount or mount return empty html

I get the following error and shallowMount or mount return empty html

console.error node_modules/vue/dist/vue.js:634
      [Vue warn]: Failed to mount component: template or render function not defined.
      
      found in
      
      ---> <Anonymous>

My spec file


    import { shallowMount } from "@vue/test-utils";
    import Login from "./../../src/views/pages/Login.vue";

    describe("Login.vue", () => {
      it("Testing ", () => {
      const wrapper = shallowMount(Login);
      console.log(wrapper.html());
     });
   });

The component I’m trying to test is

    <template>
  <div>
    <div class="header-body text-center mb-1">
      <b-row class="justify-content-center">
        <div class="col"></div>
        <div class="col-10">
          <b-img
            alt="Image placeholder"
            src="img/brand/culmas-with-slogan.svg"
            class="img-fluid"
          />
        </div>
        <div class="col"></div>
      </b-row>
    </div>
    <b-container>
      <b-row class="justify-content-center">
        <b-col lg="6" md="8">
          <b-card no-body class="bg-secondary border-0">
            <div class="bg-transparent mt-3 pb-4">
              <div class="h4 text-center mt-2 mb-4">
                <strong>Sign in with</strong>
              </div>
              <div class="text-center">
                <a
                  href="#"
                  class="btn btn-secondary mr-4 btn-icon"
                  @click="googleSignIn"
                >
                  <span class="btn-inner--icon"><b-icon-google /> </span>
                  <span class="btn-inner--text">Google</span>
                </a>
                <a
                  href="#"
                  class="btn btn-secondary btn-icon"
                  @click="appleSignIn"
                >
                  <span class="btn-inner--icon"><b-icon-apple /> </span>
                  <span class="btn-inner--text">Apple ID</span>
                </a>
              </div>
              <div class="text-center">
                <a
                  href="#"
                  class="btn btn-secondary mt-4 btn-icon"
                  @click="facebookSignIn"
                >
                  <span class="btn-inner--icon"><b-icon-facebook /> </span>
                  <span class="btn-inner--text">Facebook</span>
                </a>
              </div>
            </div>
            <div class="row px-lg-5">
              <div class="col"><hr /></div>
              <div class="col-auto mt-3">Or</div>
              <div class="col"><hr /></div>
            </div>
            <b-card-body class="px-lg-5 py-lg-5 mt--3">
              <div class="text-center h4 mb-4">
                <strong class="test">Sign in with credentials</strong>
              </div>
              <validation-observer
                v-slot="{ handleSubmit }"
                ref="formValidator"
              >
                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                  <base-input
                    alternative
                    class="mb-3 cy-email"
                    prepend-icon="ni ni-email-83"
                    placeholder="Email"
                    name="Email"
                    :rules="{ required: true, email: true }"
                    v-model="model.email"
                  >
                  </base-input>

                  <base-input
                    alternative
                    prepend-icon="ni ni-lock-circle-open"
                    placeholder="Password"
                    type="password"
                    name="Password"
                    class="cy-password"
                    :rules="{ required: true, min: 6 }"
                    v-model="model.password"
                  >
                  </base-input>

                  <div class="text-center">
                    <b-button block type="submit" variant="primary" class="mt-4"
                      >Sign in</b-button
                    >
                    <span
                      class="text-center invalid-feedback"
                      style="display: block;"
                      >{{ error }}
                    </span>
                  </div>
                </b-form>
              </validation-observer>
              <div class="text-center h4 mb-1">
                <div class="h4 text-center mt-2 mb-1">
                  <router-link to="/reset-password">
                    <b-button variant="link" class="mt-4 text-decoration-none">
                      I forgot my Password
                    </b-button>
                  </router-link>
                </div>
              </div>
            </b-card-body>
          </b-card>
          <div class="text-center">
            <router-link to="/register">
              <b-button type="submit" variant="primary" class="mt-4"
                ><b-icon icon="vector-pen" aria-hidden="true"></b-icon> I don't
                have an account, sign me up</b-button
              >
            </router-link>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import * as firebase from "./../../firebase";

export default {
  name: "Login",
  data() {
    return {
      model: {
        email: "",
        password: ""
      },
      error: null
    };
  },
  methods: {
    onSubmit() {
      firebase.auth
        .signInWithEmailAndPassword(this.model.email, this.model.password)
        .then(data => {
          firebase.db
            .collection("users")
            .doc(data.user.uid)
            .get()
            .then(snapshot => {
              this.$store.commit("SET_USER", snapshot.data());
              this.$router.replace({ name: "Dashboard" });
            })
            .catch(err => {
              this.error = err.message;
            });
        })
        .catch(err => {
          this.error = err.message;
        });
    },

    googleSignIn() {
      firebase
        .googleAuth()
        .then(data => {
          this.$store.commit("SET_USER", data);
          this.$router.replace({ name: "Dashboard" });
        })
        .catch(err => {
          this.error = err.message;
        });
    },

    facebookSignIn() {
      firebase
        .facebookAuth()
        .then(data => {
          this.$store.commit("SET_USER", data);
          this.$router.replace({ name: "Dashboard" });
        })
        .catch(err => {
          this.error = err.message;
        });
    },

    appleSignIn() {
      firebase
        .appleAuth()
        .then(data => {
          this.$store.commit("SET_USER", data);
          this.$router.replace({ name: "Dashboard" });
        })
        .catch(err => {
          this.error = err.message;
        });
    }
  }
};
</script>

My package.json file

  "name": "bootstrap-vue-argon-dashboard-pro",
  "version": "1.0.0",
  "private": true,
  "description": "BootstrapVue Argon Dashboard PRO",
  "author": "Creative Tim - https://www.creative-tim.com/",
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "dev": "npm run serve"
  },
  "dependencies": {
    "@fullcalendar/core": "^4.0.2",
    "@fullcalendar/daygrid": "^4.0.1",
    "@fullcalendar/interaction": "^4.0.2",
    "@fullcalendar/timegrid": "^4.0.1",
    "@fullcalendar/vue": "^4.0.2-beta",
    "@vue/test-utils": "^1.1.3",
    "bootstrap": "4.3.1",
    "bootstrap-vue": "^2.5.0",
    "chart.js": "^2.9.3",
    "d3": "^5.7.0",
    "datamaps": "^0.5.9",
    "date-fns": "^1.30.1",
    "debounce": "^1.2.0",
    "dropzone": "^5.5.1",
    "element-ui": "2.4.11",
    "es6-promise": "^4.1.1",
    "eslint-plugin-cypress": "^2.11.2",
    "firebase": "^8.2.6",
    "flatpickr": "^4.5.7",
    "fuse.js": "^3.2.0",
    "google-maps": "^3.2.1",
    "nouislider": "^12.1.0",
    "perfect-scrollbar": "^1.3.0",
    "quill": "^1.3.6",
    "sweetalert2": "^9.5.4",
    "vee-validate": "^3.2.1",
    "vue": "^2.6.11",
    "vue-chartjs": "^3.5.0",
    "vue-class-component": "^7.2.6",
    "vue-clipboard2": "^0.3.0",
    "vue-flatpickr-component": "^8.1.2",
    "vue-router": "^3.0.6",
    "vue2-transitions": "^0.2.3",
    "vuefire": "^2.2.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@types/webpack-env": "^1.16.0",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-e2e-cypress": "^4.5.11",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^4.5.11",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.3",
    "babel-plugin-component": "^1.1.0",
    "cypress": "^6.4.0",
    "eslint": "^4.19.1",
    "jest": "^26.6.3",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^7.1.0",
    "ts-loader": "^8.0.17",
    "typescript": "^4.1.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      },
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      },
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    },
    "moduleNameMapper": {
      "vue$": "vue/dist/vue"
    },
    "transformIgnorePatterns": [
      "./node_modules/(?!bootstrap-vue)"
    ]
  }
}

vue.config file

const path = require("path");

function resolveSrc(_path) {
  return path.join(__dirname, _path);
}
// vue.config.js
module.exports = {
  lintOnSave: true,
  configureWebpack: {
    // Set up all the aliases we use in our app.
    resolve: {
      alias: {
        assets: resolveSrc("src/assets"),
        vue$: "vue/dist/vue.common.js"
      }
    },
    output: {
      libraryExport: "default"
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          include: /src/,
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            appendTsSuffixTo: [/\.vue$/]
          }
        },
        {
          test: /\.sass$/,
          use: [
            "vue-style-loader",
            "css-loader",
            {
              loader: "sass-loader",
              options: {
                indentedSyntax: true,
                // sass-loader version >= 8
                sassOptions: {
                  indentedSyntax: true
                }
              }
            }
          ]
        }
      ]
    }
  },
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== "production"
  }
};

I understand this error has been asked before on stackoverflow but none of the solutions could work for me, tried importing with default tried installing deps and changing shallowMount to mount.

Any help is appreciated. Thanks . I also asked here