Export each and and every member of ES class

Question

I am migrating a react app to use ES6 syntax. I have a file Utils.js as follows:

export default class Utils {

  static getParameterByName(name) {
    const paramName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    const regex = new RegExp('[\\?&]' + paramName + '=([^&#]*)');
    const results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  }

  static getArrayOfIndices(text, char) {
    const resultArray = [];
    let index = text.indexOf(char);
    const lastIndex = text.lastIndexOf(char);
    while (index <= lastIndex && index !== -1) {
      resultArray.push(index);
      if (index < lastIndex) {
        index = text.substr(index + 1).indexOf(char) + index + 1;
      } else {
        index = lastIndex + 1999; // some random addition to fail test condition on next iteration
      }
    }
    return resultArray;
  }
}

This previously was in javascript and I had jest unit tests written for them. However,when I run the tests now I get the error

  Utils.getArrayOfIndices is not a function

To run the jest tests on es6 code, I am using the package babel-jest, which transpiles the code so that jest can run it.

When debugging the jest test, when I hover and inspect the Utils object I see that the functions are there but they appear greyed out so perhaps not accessible from outside.

How do I export all these functions using ES6?

====EDIT 1====

After the comments, I changed the file to use default module, as follows:

export default {

  getParameterByName: function getParameterByName(name) {
    const paramName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    const regex = new RegExp('[\\?&]' + paramName + '=([^&#]*)');
    const results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  },

  getArrayOfIndices: function getArrayOfIndices(text, char) {
    const resultArray = [];
    let index = text.indexOf(char);
    const lastIndex = text.lastIndexOf(char);
    while (index <= lastIndex && index !== -1) {
      resultArray.push(index);
      if (index < lastIndex) {
        index = text.substr(index + 1).indexOf(char) + index + 1;
      } else {
        index = lastIndex + 1999; // some random addition to fail test condition on next iteration
      }
    }
    return resultArray;
  },

}

However, the issue may be by how I am importing the file. I have tried different things. Before the change, the Utils module was referenced in the beforeEach method using require

Utils = require('../Utils')

Later on with the ES6 syntax, I imported the module once at the top of the file as

import Utils from '../Utils';

However, this also throws the same error, albeit with a slightly different message.

TypeError: _Utils2.default.getArrayOfIndices is not a function

I am not quite sure what am I doing wrong.

This may be interesting for you: http://stackoverflow.com/questions/29893591/es6-modules-export-single-class-of-static-methods-or-multiple-individual-method — yeouuu, Jan 14 '16 at 14:26
How are you importing the class? If you the class only has static methods, why have a class at all? Why not export the functions as named exports? Don't "abuse" classes as method bags. There is no need for something like that in JavaScript. — Felix Kling, Jan 14 '16 at 14:56
Not quite sure why that is not working, but it would be better to export each of the functions independently, as named exports, as in `export function GetParameterByName() {...`. Then import it as `import {GetParameterByName} from...`. — , Jan 15 '16 at 19:35

score 0 · Accepted Answer · answered Jan 16 '16 at 18:40

0

Eventually, I exported and imported each function individually as suggested by torazaburo in the comments.

Also, instead of using import, use require as mentioned here:

https://github.com/babel/babel-jest/issues/16

answered Jan 16 '16 at 18:40

shashi

4,616
9
50
77

Export each and and every member of ES class

1 Answers1