Configure to test in Mocha and also run on browser

[maiya 0 Likes (Newbie)]

Hi -

 

I am working on an app that uses GSAP to do animation inside of React class components.

 

I started the app with a boilerplate that already had webpack, babel, and mocha set up.  When I run the app on a browser, it works fine;  but when I try to run the Mocha tests, it seems that it is breaking because the webpack/babel is not set up to compile any ES6 in the node_modules folder (?).  I am a complete novice at webpack and babel.  I get the basic concepts of these two tools, but all of my attempts at fixing this problem have lead to my app breaking in one way or another.  

 

The closest I got to fixing it: the tests were running fine and it was running in the browser, but every single time I made any change whatsoever to my files, I had to run the build script (which takes a long time), in order for the change to show up in the browser.  (I'm guessing that the 'watch' option might have been affected? But don't know how to fix that).  I've been playing around with different versions and different syntax, and I'm basically lost.  When I looked at a few other modules in the node_modules folder, it seemed like they had their own internal builds or were written with standard module.export = {} syntax. 

 

Is it possible to get help with this issue?  I'm trying to not break my app, and be able to test it with Mocha and Chai.

 

Basic folder structure:

 

- /client

- /node_modules

- /server

- package.json

- webpack.config.js

- .babelrc

 

gsap version:

"gsap": "^2.1.3",

 

start and test and build scripts in package.json

"build-client": "webpack",

"start": "node server",

"start-dev": "NODE_ENV='development' npm run build-client-watch & NODE_ENV='development' npm run start-server",

"start-server": "nodemon server -e html,js,scss --ignore public --ignore client",

"test": "NODE_ENV='test' mocha \"./server/**/*.spec.js\" \"./client/**/*.spec.js\" \"./script/**/*.spec.js\" --require @babel/polyfill --require @babel/register"

 

import statements in React code / animation.js

import React, { Component } from 'react'

import { connect } from 'react-redux'

 

import { TimelineMax, CSSPlugin, AttrPlugin, Power0, Draggable } from 'gsap'

// without this line, CSSPlugin and AttrPlugin may get dropped by your bundler, because of 'tree shaking'

const plugins = [CSSPlugin, AttrPlugin]

 

animation.spec.js

import { expect } from 'chai'

import React from 'react'

import enzyme, { shallow } from 'enzyme'

import Adapter from 'enzyme-adapter-react-16'

import { Animation } from './animation'

 

const adapter = new Adapter()

enzyme.configure({ adapter })

 

describe('animation', () => {

let timeline

 

beforeEach(() => {

animation = shallow(<Animation />)

})

 

it('renders the correct text in an h3', () => {

expect(timeline.find('h3').text()).to.be.equal('this is an h3 tag')

})

})

 

error message:

Quote

/Volumes/Seagate/app_title/node_modules/gsap/all.js:12
import TweenLite, {Ease, Power0, Power1, Power2, Power3, Power4, Linear, _gsScope} from "./TweenLite.js";
       ^^^^^^^^^
SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)

 

 

 

Is there any straight forward way to fix this?  I get that the error has something to do with not being able to read the ES6 code, but I don't get how to actually fix it in the settings. 

 

Thanks for your time.