sybilrondeau Posted April 26, 2021 Share Posted April 26, 2021 Hi, I am trying to test a Nuxt app with jest. But on files with gsap, I have an error : Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/ScrollTrigger.js:650 export var ScrollTrigger = /*#__PURE__*/function () { ^^^^^^ SyntaxError: Unexpected token 'export' 43 | <script> 44 | import { gsap } from 'gsap'; > 45 | import { ScrollTrigger } from 'gsap/ScrollTrigger'; | ^ 46 | import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'; 47 | import IconButton from './icons/IconButton.vue'; 48 | import IconLab from './icons/IconLab.vue'; I am using gsap with the gsap-bonus.tgz file. Everything is working fine expect with jest. I use Static rendering (not SSR). This is my jest config : (it's already configured with babel-jest) I tried importing gsap via dist folder, as I read in the forum. But then I still have a problem with morphSVGPlugin : Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12 import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 11 | <script> 12 | import gsap from 'gsap'; > 13 | import MorphSVGPlugin from 'gsap/MorphSVGPlugin'; | ^ 14 | gsap.registerPlugin(MorphSVGPlugin); 15 | 16 | export default { What should I do ? module.exports = { // tell Jest to handle `*.vue` files moduleFileExtensions: ['js', 'json', 'vue'], watchman: false, moduleNameMapper: { '^~/(.*)$': '<rootDir>/$1', '^~~/(.*)$': '<rootDir>/$1', '^@/(.*)$': '<rootDir>/$1', }, transform: { // process js with `babel-jest` '^.+\\.js$': '<rootDir>/node_modules/babel-jest', // process `*.vue` files with `vue-jest` '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest', }, snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'], collectCoverage: true, collectCoverageFrom: [ '<rootDir>/components/**/*.vue', '<rootDir>/pages/*.vue', ], }; Link to comment Share on other sites More sharing options...
Rodrigo Posted April 26, 2021 Share Posted April 26, 2021 Have you tried adding the MorphSVG plugin directly into the static folder? In your dashboard, download the zip file with the bonus content, then extract the minified version of MorphSVG and it's corresponding map (or the uncompressed if you want) in the static folder. Then in your files you import them: import { MorphSVGPlugin } from "~/static/MorphSVGPlugin.min.js"; import { DrawSVGPlugin } from "~/static/DrawSVGPlugin.min.js"; I assume that you already have this in your Nuxt config file: build: { transpile: ['gsap'], }, This actually works for me, but I haven't ran tests on a Nuxt app before. Finally if this goes into a public repo, remember to add the route to those files in your .gitignore file. Happy Tweening!!! 1 1 Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 26, 2021 Author Share Posted April 26, 2021 Thank you for your help ! Unfortunately it's the same. I don't understand how it should be done... I shouldn't have to transpile gsap as I don't use SSR but Static rendering. (according to the doc). Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 27, 2021 Author Share Posted April 27, 2021 So I tried using import gsap from 'gsap/dist/gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import { MorphSVGPlugin } from 'gsap/dist/MorphSVGPlugin'; and now it failed on the converToPath method. Any idea ? Details: /Users/sybilrondeau/code/sybilrondeau/sybrlab-Nuxt/node_modules/gsap/MorphSVGPlugin.js:12 import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module Link to comment Share on other sites More sharing options...
Rodrigo Posted April 27, 2021 Share Posted April 27, 2021 Hi, The issues you've been reporting are happening just in the test process or also in the development process? I made a simple Nuxt app in my machine and it's working fine as long as I use the minified version of the MorphSVG file, if I use the normal version I get the same error you have in development. Also you can add this in your nuxt.config.js file in order to add the plugin before the closing <body> tag: head: { script: [ { src: '/MorphSVGPlugin.min.js', body: true } ] }, The file should be in the static folder. 1 Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 27, 2021 Author Share Posted April 27, 2021 Everything is working fine in dev mode, it's just when I run Jest. I tried what you said, still doesn't work... same error. Link to comment Share on other sites More sharing options...
Dipscom Posted April 28, 2021 Share Posted April 28, 2021 Hello, just to butt in with more question... Can I check which version of Node the two of you are using? I had issues the other day with dependency modules with a similar error: SyntaxError: Cannot use import statement outside a module That was caused because, if I remember rightly, anything below Node 14 cannot parse some modern thing or other that these dependencies have. I have Node > 15 and do not have the errors you are reporting. However, updating Node will NOT solve this issue as Jest is still complaining about Element and/or SvgElement not being of the correct type. This, I think might be an issue how it sees the GSAP object. I'll have a look and probably have @GreenSock himself have a look as it's probably going to take some brain power beyond mine to untangle this. 1 Link to comment Share on other sites More sharing options...
Dipscom Posted April 28, 2021 Share Posted April 28, 2021 Hello again! I've done some looking into the matter. It appears to be a combination of a few things together. 1) I am almost certain the errors you are reporting are to do with the Node version. 2) Once you actually get past the Node issue, you'll get the test failing still because on your mount lifecycle there are calls to $refs. The test fail because Jest expects those to be actual DOM elements but as they are $refs, they are not. This is an issue on this test because this is not a E2E test, it's only a unit test. I have no experience with Jest, the only way I managed to get around this is to not use the $refs but use GSAP's own selector engine and IDs. For example: use "#myRect" instead of "this.$refs.myRect". It appears the issue is not with GSAP at all but the fact that the test is trying to compute DOM elements that are not present due to the $refs. Actually, all of my comments are based on a sample project @Rodrigo gave me... But, hopefully it will be the same in your case @sybilrondeau 4 Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 28, 2021 Author Share Posted April 28, 2021 Hi ! Node version is V16.0.0. This is the code in the component I try to test. I didn't use $refs but actual classes. I tried with /dist or with file in the /static folder. Same error with convertToPath method. <script> import { gsap } from 'gsap/dist/gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import IconButton from './icons/IconButton.vue'; import IconLab from './icons/IconLab.vue'; import { MorphSVGPlugin } from '~/static/MorphSVGPlugin.min.js'; gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin); export default { components: { IconLab, IconButton, }, data() { return { isOpen: false, }; }, mounted() { const circle = MorphSVGPlugin.convertToPath('.circle'); this.navTl = gsap .timeline() .to(circle, { morphSVG: '.close-btn' }) .reverse(); }, methods: { openNav() { // toogle play and reverse on timeline this.navTl.reversed(!this.navTl.reversed()); this.isOpen = !this.isOpen; // class active on menu items function activeMenu(trigger, end, targets) { ScrollTrigger.create({ trigger, start: 'top bottom', end, toggleClass: { targets, className: 'active' }, }); } activeMenu('#section2', 'bottom 20%', '.nav-about'); activeMenu('#section3', 'bottom 20%', '.nav-portfolio'); activeMenu('#section4', 'bottom 20%', '.nav-skills'); activeMenu('#section5', '200% 20%', '.nav-contact'); }, }, }; </script> Link to comment Share on other sites More sharing options...
Dipscom Posted April 28, 2021 Share Posted April 28, 2021 Are you able to share a minimal implementation of your project that recreates the issue? Rodrigo gave me a basic Nuxt project he setup that had some issues on it. I was able to work around those issues. Maybe we can achieve something similar? 2 Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 28, 2021 Author Share Posted April 28, 2021 this is the repo on Github : https://github.com/sybilrondeau/sybrlab-Nuxt First steps for me on NuxT - Vue.js... Link to comment Share on other sites More sharing options...
Dipscom Posted April 28, 2021 Share Posted April 28, 2021 Thank you, I'll have a poke around at some point today and see if I can spot anything. Sybil, this repo does not seem to have a Jest test in it. Is this the correct repository? You were reporting having issues with the testing only. Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 28, 2021 Author Share Posted April 28, 2021 oh yes sorry I didn't push the last work. I do it now ! Link to comment Share on other sites More sharing options...
Solution Dipscom Posted April 28, 2021 Solution Share Posted April 28, 2021 I've had a poke around your repository. What Rodrigo suggested earlier on: using a local copy of the script from your statics folder seem to do the trick. You forgot to convert some of your code to account for that, the IconButton.vue was still referring to the .tgz version. Changing that to use the static folder version has made the error go away. The test pass now when I run it. There are other errors logged but I think they are other things for you to take care of, the test itself reports as passed. Another thing to mention is that I see you have been using Yarn. I didn't, I don't have it installed and wasn't going to bother downloading it, sorry. So I used NPM. I don't know if that will be an issue or not, thought I would mention here. 2 1 Link to comment Share on other sites More sharing options...
sybilrondeau Posted April 28, 2021 Author Share Posted April 28, 2021 Thank you very much for your time ! That's so obvious now ! Yes as it is my first step into the framework there is certainly a lot to care of . Thank you again ! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now