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



  • 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",
    
    
    

Log in to reply