Vue3 script setup "export default { SyntaxError: Unexpected token 'export'"

[jairoblatt]

Hi there, i tried run an unit test in my btn.vue component but Jest catch this error.

I couldn't find anywhere about this error, so, sorry if this is the wrong place.

My current settings:

package.json

{

  "scripts": {
    ....
    "dev": "vite",
    "test:unit": "jest",
    "test:unit:watch": "jest --watchAll"
  },
  "dependencies": {
    ...
    "vue": "^3.2.16",
  },
  "devDependencies": {
    ...
    "@vue/test-utils": "^2.0.0-rc.16",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0",
    "vue3-jest": "^27.0.0-alpha.1"
  }
}

jest.config.js

module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/$1',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue3-jest',
  },
  testEnvironment: 'jsdom',
};

btn.unit.spec.ts

import { mount } from '@vue/test-utils';
import Btn from '../index.vue';

describe('Btn.vue', () => {
  function mountFunction(options = {}) {
    return mount(Btn, { ...options });
  }

  it('Should mount the component', () => {
    const wrapper = mountFunction();

    expect(wrapper.vm).toBeDefined();
    expect(wrapper.html()).toMatchSnapshot();
  });
});

btn.vue

<template>
// Btn template
</template>

<script lang="ts">
export default {
  name: 'Btn',
};
</script>

<script setup lang="ts">
import { PropType, computed, ref } from 'vue';
// Btn logic...
</script>

[jolting]

Reminds me of #408

[jairoblatt]

Thanks,

I just remove the vue3-jest of my packages and added @vue/vue3-jest

And update the vue transform in jest.config.js to @vue/vue3-jest

module.exports = {
 ...
  transform: {
    '^.+\\.ts$': 'ts-jest',
      '.*\\.(vue)$': '@vue/vue3-jest',
  },
...
};

It's working to me now.