Unexpected token: <

[CraigHarley]

I'm almost certain it's something to do with the way babel is set up but can't seem to put my finger on it. The component is being pulled into the test but it's not actually running vue-jest on it, or so it seems.

This is the error

Test suite failed to run

    C:/Users/craig.harley/Code/myComponent.vue: Unexpected token (1:0)
      > 1 | <template>

.babelrc

{
    "presets": ["env"],
    "plugins": ["transform-vue-jsx"]
}

relevant package.json:

"devDependencies": {
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "jest": "^22.4.2",
    "laravel-elixir": "^6.0.0-17",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "node-sass": "^4.5.3",
    "vue-jest": "^2.1.0",
    "vue-template-compiler": "^2.5.13",
    "vue-template-es2015-compiler": "^1.6.0"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    }
  }

test looks like this:

import Vue from 'vue';
import Component from './component.vue';

describe('app/components/component', () =>
    it('should match the snapshot', () => {
            const vm = new Vue({
                el: document.createElement('div'),
                render: function () {
                    return (
                        <Component
                            name="name"
                            product="product"
                            type="type"
                        />
                    )
                }
            });
            
            return expect(vm.$el).toMatchSnapshot();
        }
    )
);

Not sure what I'm missing here or if it's a bug with using laraval mix.

[eddyerburgh]

@CraigHarley Are you able to post a repo with a reproduction?

[lben]

I have a similar problem. I don't know which of the several moving parts is creating this problem so I opened an issue here: vuejs-templates/webpack#1335

As I said, I don't know if this is a webpack issue, vue-jest issue, jest issue, vue-test-utils issue, babel issue, etc... issue but any help would be really appreciated. Thanks

[eddyerburgh]

The issue is that Jest is not using vue-jest to transform the SFC. If you're seeing this issue, it's likely that your configuration is incorrect. For example, it could be caused by the regex you're using in transform.

[kenhan168]

I have just started learning Vue recently by following this post: https://medium.com/cleversonder/from-zero-to-hero-with-vue-advanced-components-parcel-dev-tools-fab980a62259

I have encountered the similar issue. As parcel complaints the tag is not valid in the vue file.

The completed source code for the tutorial by https://medium.com/@wesharehoodies is working from:
https://github.com/wesharehoodies/zero-to-hero-with-vue/tree/advanced-components-computed-props-watchers

However, if I delete the package-lock.json, delete the "node_modules" folder, and reinstall all packages again from package.json via "npm install", then the error occurs.

Therefore, it seems some of the dependent packages have broken the build process.