New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unexpected token on import(); in react-boilerplate #997

Closed
joshmeads opened this Issue Feb 7, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@joshmeads

joshmeads commented Feb 7, 2017

I'm trying to add a wallaby config for react-boilerplate. However, they're using dynamic import() statements. Webpack & babel handle them fine, but wallaby seems to be failing on them.

Any insights? Thanks

Error message:

Failed to parse app/app.js, SyntaxError: Unexpected token (97:12)
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  at process._tickCallback (internal/process/next_tick.js:98:9)
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  at process._tickCallback (internal/process/next_tick.js:98:9)

The section where it is failing:

if (!window.Intl) {
  (new Promise((resolve) => {
    resolve(import('intl')); // line 97
  }))
    .then(() => Promise.all([
      import('intl/locale-data/jsonp/en.js'),
    ]))
    .then(() => render(translationMessages))
    .catch((err) => {
      throw err;
    });
} else {
  render(translationMessages);
}

Wallaby.js configuration file

const wallabyWebpack = require('wallaby-webpack');
const webpackConfig = require('./internals/webpack/webpack.dev.babel');
const webpackPostprocessor = wallabyWebpack(webpackConfig);

module.exports = (wallaby) => ({
  files: [
    { pattern: 'app/**/*.js', load: false },
  ],

  tests: [
    { pattern: 'app/**/__tests__/*.test.js', load: false },
  ],

  env: {
    type: 'node',
    runner: 'node',
  },

  testFramework: 'jest',

  compilers: {
    '**/*.js': wallaby.compilers.babel(require('./package.json').babel), // eslint-disable-line global-require
  },

  postprocessor: webpackPostprocessor,

  setup() {
    const jestConfig = require('./package.json').jest; // eslint-disable-line global-require
    jestConfig.rootDir = wallaby.projectCacheDir;
    wallaby.testFramework.configure(jestConfig);
    window.__moduleBundler.loadTests(); // eslint-disable-line
  },

});

IDE and OS

Atom v1.12.6
OSX Sierra

Jest Config

"jest": {
    "collectCoverageFrom": [
      "app/**/*.{js,jsx}",
      "!app/**/*.test.{js,jsx}",
      "!app/*/RbGenerated*/*.{js,jsx}",
      "!app/app.js",
      "!app/routes.js"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 98,
        "branches": 91,
        "functions": 98,
        "lines": 98
      }
    },
    "moduleDirectories": [
      "node_modules",
      "app"
    ],
    "moduleNameMapper": {
      ".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
    "testRegex": "__tests__/.*\\.test\\.js$"
  },

Babel Config

"babel": {
    "presets": [
      [
        "latest",
        {
          "es2015": {
            "modules": false
          }
        }
      ],
      "react",
      "stage-0"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }
  },

@ArtemGovorov ArtemGovorov changed the title from Unexpected token on import(); to Unexpected token on import(); in react-boilerplate Feb 8, 2017

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Feb 8, 2017

Member

First of all, you don't need webpack, Jest (and wallaby running Jest) doesn't need it, so I got rid of it.

I've also cleaned up the files/tests patterns to reflect the repo structure (there're no __tests__ folders there).

And finally added the setting to let babel know that the test environment should be used (the fist line of the config below). It was causing the error that you've been observing and have reported.

Here's the working config for the react-boilerplate repo:

process.env.BABEL_ENV = 'test';

module.exports = (wallaby) => ({
  files: [
    'app/**/*.js',
    'app/**/*.json',
    'package.json',
    '!app/**/*.test.js'
  ],

  tests: [
    'app/**/*.test.js'
  ],

  env: {
    type: 'node',
    runner: 'node',
  },

  testFramework: 'jest',

  compilers: {
    '**/*.js': wallaby.compilers.babel(require('./package.json').babel), // eslint-disable-line global-require
  },

  setup() {
    const jestConfig = require('./package.json').jest; // eslint-disable-line global-require
    wallaby.testFramework.configure(jestConfig);
  },

});

Let me know if the config is working for you.

Member

ArtemGovorov commented Feb 8, 2017

First of all, you don't need webpack, Jest (and wallaby running Jest) doesn't need it, so I got rid of it.

I've also cleaned up the files/tests patterns to reflect the repo structure (there're no __tests__ folders there).

And finally added the setting to let babel know that the test environment should be used (the fist line of the config below). It was causing the error that you've been observing and have reported.

Here's the working config for the react-boilerplate repo:

process.env.BABEL_ENV = 'test';

module.exports = (wallaby) => ({
  files: [
    'app/**/*.js',
    'app/**/*.json',
    'package.json',
    '!app/**/*.test.js'
  ],

  tests: [
    'app/**/*.test.js'
  ],

  env: {
    type: 'node',
    runner: 'node',
  },

  testFramework: 'jest',

  compilers: {
    '**/*.js': wallaby.compilers.babel(require('./package.json').babel), // eslint-disable-line global-require
  },

  setup() {
    const jestConfig = require('./package.json').jest; // eslint-disable-line global-require
    wallaby.testFramework.configure(jestConfig);
  },

});

Let me know if the config is working for you.

@joshmeads

This comment has been minimized.

Show comment
Hide comment
@joshmeads

joshmeads Feb 8, 2017

Thank you very much Artem, that works great!

The tests was my own preference.

joshmeads commented Feb 8, 2017

Thank you very much Artem, that works great!

The tests was my own preference.

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Feb 9, 2017

Member

Awesome, thanks for the update!

The tests was my own preference.

I thought so, but just in case :)

Member

ArtemGovorov commented Feb 9, 2017

Awesome, thanks for the update!

The tests was my own preference.

I thought so, but just in case :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment