Using ES6 classes with ES5 code

Question

I'm finally hopping on board with the ES6 train. I've written a small Node.js application using ES6 and Babel for compilation. I'm writing the tests using Mocha, which as far as I have read, you shouldn't use ES6 with just yet.

I'm trying to test some functions of an object class I've made. So in Mocha I'm doing the following:

var assert = require('assert');
var Icon = require('../lib/icon');

describe('Icons', function() {
  describe('#save()', function() {
    it('should return a success message & save the icon', function() {
        var icon = new Icon('https://cdn4.iconfinder.com/data/icons/social-media-2070/140/_whatsapp-128.png', 'icon-test');
        var result = Icon.save();

        if(result !== '_whatsapp-128.png saved successfully.') return false;

        return fs.existsSync('icon-test/_whatsapp-128.png');
    });
  });
});

Which clearly won't work because of the line:

var icon = new Icon('https://cdn4.iconfinder.com/data/icons/social-media-2070/140/_whatsapp-128.png', 'icon-test');

I'm not quite sure how to be able to instantiate the ES6 object using ES5 and then test the function. Any help would be greatly appreciated.

** EDIT - ADDED ICON FILE **

import fs from 'fs';
import https from 'https';
import path from 'path';

class Icon {
    constructor(source, destination) {
        this.source = source;
        this.destination = path.resolve(destination);
    }

    save() {
        console.log(this.source);
        // Fetching the icon.
        let request = https.get(this.source, (response) => {

            // Splitting the file information.
            let fileInfo = path.parse(this.source);

            // Creating the directory, if it does not already exist.
            if(!fs.existsSync(this.destination)) {
                fs.mkdirSync(this.destination);
                console.log('Destination directory created.\n');
            }

            // Piping the icon data & saving onto disk.
            let iconFile = fs.createWriteStream(this.destination + '/' + fileInfo.base);
            response.pipe(iconFile);
            return `${fileInfo.base} saved successfully.`;
        });
    }
}

export default Icon;

"Which clearly won't work because of the line" Why not? Objects exist in ES5, it's just the `class` syntax that's new. — Ajedi32, Nov 08 '16 at 14:30
It doesn't make sense to oppose 'ES6' to 'ES5'. It's JS. Please, provide the details on what the problem is. Error message and a listing for `../lib/icon` would help. It is unlikely that a class could be successfully imported as `var Icon = require('../lib/icon')` from ES6 module. — Estus Flask, Nov 08 '16 at 14:40
Then it can be trusted - it's not. It may be ES6 module. Which is an object and not a constructor. It is you who can log it and check it, not anyone else. The question doesn't contain enough details and encourages guesswork. — Estus Flask, Nov 08 '16 at 14:49

score 1 · Accepted Answer · answered Nov 08 '16 at 14:56

1

../lib/icon is ES6 module that has default export.

require('../lib/icon') returns ES6 module object. To require default export it should be

var Icon = require('../lib/icon').default;

answered Nov 08 '16 at 14:56

Estus Flask

206,104
70
425
565

score -1 · Answer 2 · answered Nov 08 '16 at 14:34

Use es6-shim or es5-shim (see here https://github.com/paulmillr/es6-shim) to get it working in ECMA Script 5. If doesn´t work with that, include also the other libraries to gain legacy support as you may find here https://github.com/es-shims for polyfills and all that other stuff.

Hope that helps.

Using ES6 classes with ES5 code

2 Answers2