Jump to content
Search Community

Testing with Jest in Nuxt

sybilrondeau test
Moderator Tag

Go to solution Solved by Dipscom,

Recommended Posts

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

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!!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

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?

  • Like 2
Link to comment
Share on other sites

  • Solution

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...