How to configure jest with quasar >/ 1.8.0 in a NEW vue-cli 4 project?

[Roland]

I created with vue-cli 4 UI a completely new project and I want to configure quasar 1.8.0 to work with jest.

Searching on google gives me old configurations which don’t work pretty well.

I have created that simple component:

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo" src="../assets/logo.png" />
    Counter: {{ counter }} Uid: {{ uid }}
  </q-page>
</template>

<style></style>

<script>
import { uid } from "quasar";

export default {
  name: "HelloWorld",

  data: () => ({
    counter: 0,
    uid: uid()
  })
};
</script>

And I just add a simple test which should pass:

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("pass", () => {
    const wrapper = shallowMount(HelloWorld);
    expect(true).toBe(true);
  });
});

But the test doesn’t pass and throws this error:

 SyntaxError: Unexpected token 'export'

       9 | 
      10 | <script>
    > 11 | import { uid } from "quasar";
         |                                   ^
      12 | 
      13 | export default {
      14 |   name: "HelloWorld",