Use of reserved word 'let' when running tests

Question

Started getting this error I just can't seem to fix, when running my tests.

09 04 2017 22:08:20.577:INFO [karma]: Karma v1.6.0 server started at http://0.0.0.0:9876/
09 04 2017 22:08:20.580:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
09 04 2017 22:08:20.602:INFO [launcher]: Starting browser PhantomJS
09 04 2017 22:08:23.661:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket SPM1D8Mj1w6ABbGuAAAA with id 7910462
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Use of reserved word 'let' in strict mode
  at test/browser/index.js:886

I believe this started happening during certain packages updating.

My Karma config looks like this :

require('babel-register');

const webpack = require('../webpack.config.babel.js');

module.exports = function(config) {
  config.set({
    basePath: '../',
    frameworks: ['mocha', 'chai-sinon'],
    browsers: ['PhantomJS'],
    files: ['test/browser/**/*.js'],
    preprocessors: {
      'test/**/*.js': ['webpack'],
      'src/**/*.js': ['webpack']
    },
    webpack,
    webpackMiddleware: { noInfo: true }
  });
};

Tests are pretty simple

import { h, render, rerender } from 'preact';
import { route } from 'preact-router';
import App from '../../src/components/app';

/*global sinon,expect*/
describe('App', () => {
  var scratch;

  before(() => {
    scratch = document.createElement('div');

    (document.body || document.documentElement).appendChild(scratch);
  });

  beforeEach(() => {
    scratch.innerHTML = '';
  });

  after(() => {
    scratch.parentNode.removeChild(scratch);
  });

  describe('routing', () => {
    it('should render the homepage', () => {
      render(<App />, scratch);
      expect(scratch.innerHTML).not.contain('Home');
    });

    it('should render the header', () => {
      render(<App />, scratch);
      expect(scratch.innerHTML).to.contain('header');
    });

    it('should render the footer', () => {
      render(<App />, scratch);

      expect(scratch.innerHTML).to.contain('footer');
    });

    it('should render the social media links', () => {
      render(<App />, scratch);

      expect(scratch.innerHTML).to.contain('a');
    });
  });
});

Any idea where I could even find out which "let" it is talking about ?

I am running this on Node v7.8.0

Not sure how I can access that file while the test is running. — StevieB, Apr 09 '17 at 21:40
That file should already be there according to your Karma config. I.e., what's in that directory? — Todd Chaffee, Apr 09 '17 at 21:42
Sorry that File above with the test is browser/index.js, my guess would be the "let" issue is within one of the files that gets imported — StevieB, Apr 09 '17 at 21:50
Have you tried any of the solutions for this similar question? [SyntaxError: Use of const in strict mode](http://stackoverflow.com/questions/22603078/syntaxerror-use-of-const-in-strict-mode) — gfullam, Apr 17 '17 at 14:23

score 1 · Answer 1 · answered Apr 19 '17 at 19:31

The problem is browser-specific. So, if you're not using Babel to compile your source code to ES5, then the tests simply won't run in PhantomJS. Webpack handles the compilation on-the-fly. Since I can't see the source of your Webpack configuration file, my guess is that the problem is a property value within "webpack.config.babel.js".

score 0 · Answer 2 · answered Apr 18 '17 at 12:36

This Might solve your issue. You need to add babel-polyfill and phantomjs-polyfill on your karma file as-

module.exports = function(config) {
  config.set({
    ....
    files: [
      './node_modules/babel-polyfill/dist/polyfill.js',
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       'test/browser/**/*.js'
    ],
    ....
  });
};

STEEL · Answer 3 · 2018-05-23T04:16:17.583

0

I was also facing same issue with Ubuntu Linux when running Karma test. The problem was with browsers field inside karma config.

I had Chrome, later I tried PhantomJS. But eventually found that using 'Chromeheadless' on Linux works and solves the issue. Since a machine running just console view cant run anything else than a headless app.

use Chromeheadless

browsers: ['ChromeHeadless'],

In addition, if you still face issues try flags: ['--no-sandbox'], inside your karma.conf.js

edited May 23 '18 at 04:16

answered May 22 '18 at 10:17

STEEL

8,955
9
67
89

Please elaborate your answer so that everyone can benefit from your post and learn. – Blip May 22 '18 at 12:50

score 0 · Answer 4 · answered Oct 09 '18 at 01:52

I just ran into a similar problem. As per @STEEL's answer, by installing npm install karma-chrome-launcher and changing the browser to ChromeHeadless, I was able to run the tests. However, I discovered that the reason that Chrome worked and PhantomJS didn't, was because I had Chrome in my babel.config.js file but not PhantomJS, so Karma was not transpiling to PhantomJS correctly. Once I added PhantomJS to the list of targets in my babel presets, then it compiled correctly. Here is what my babel.config.js file looks like:

const presets = [
  ["@babel/env", {
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67",
      safari: "11.1",
      phantomjs: "2.1.1"
    },
    useBuiltIns: "usage"
  }]
];

module.exports = { presets };

My configuration does not load settings from a webpack configuration file. Instead it sets webpack's configuration inside karma.config.js, using the following field:

webpack: {
  module: {
    rules: [
      { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  },
  watch: true,
  mode: 'none'
},

Use of reserved word 'let' when running tests

4 Answers4