Using export { default } from with Jest

Question

I’m using an index.js file to export several files from the same folder (objects/Rectangle) :

// index.js
export { default } from './RectangleBuilder'
export { default as Rectangle } from './Rectangle'
export { default as MovableRectangle } from './MovableRectangle'

everything works fine, expect when I’m running tests: Jest is trying to run this piece of code

import RectangleBuilder from 'objects/Rectangle'
import Point from 'objects/Point'
import TrapSystem from 'objects/TrapSystem'
import Interval from 'objects/Interval'
import Color from 'effects/Color'

const spawn = new RectangleBuilder(20 * 2, 100 * 2, 80 * 2, 80 * 2)
  .withColor(new Color('lightblue'))
  .build()

and It’s giving me this error :

TypeError: _Rectangle2.default is not a constructor

   6 | 
   7 | console.log(RectangleBuilder)
>  8 | const spawn = new RectangleBuilder(20 * 2, 100 * 2, 80 * 2, 80 * 2)
     |               ^
   9 |   .withColor(new Color('lightblue'))
  10 |   .build()
  11 |

RectangleBuilder is indeed undefined.

Is there a way to get Jest to import that correctly, just as when I’m running the code in the browser ?

EDIT :

Jest needs es6 imports to be transpiled into commonJS imports as it is running in node. Could this be coming from my config?

// .babelrc
{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "test": "./test",
          "underscore": "lodash"
        }
      }
    ]
  ],
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}


// webpack.config.babel.js
module.exports = {
  entry: './src/sketch.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

Albizia Albizia · Accepted Answer · 2019-07-19T18:50:23

I was able to solve this issue using mocks.

For example I was getting this error from my test file physics.spec.js

TypeError: _RectangleBuilder.default is not a constructor

   5 | import Color from 'effects/Color'
   6 | 
>  7 | const spawn = new RectangleBuilder(20 * 2, 100 * 2, 80 * 2, 80 * 2)
     |               ^
   8 |   .withColor(new Color('lightblue'))
   9 |   .build()
  10 | 

  at Object.<anonymous> (src/maps/1.js:7:15)
  at Object.<anonymous> (src/sketch.js:23:1)
  at Object.<anonymous> (src/engine/physics.js:5:1)
  at Object.<anonymous> (src/objects/Rectangle/Rectangle.js:2:1)
  at Object.<anonymous> (src/objects/Rectangle/RectangleBuilder.js:1:1)
  at Object.<anonymous> (src/objects/Rectangle/index.js:1:1)
  at Object.<anonymous> (src/engine/__tests__/physics.spec.js:1:1)

The main problem I had was with those chains of imports. one file imports another file, which imports another file I do not need for the test:

// physics.spec.js
import {
  isPointInRectangle,
  segmentIntersectsCircle,
  circleIntersectsRectangle
} from '../physics.js'

// physics.js
import { WIDTH, HEIGHT } from 'sketch.js'

the only thing I had to do is add this line :

jest.mock('sketch.js')

in physics.spec.js so that it completely ignore this file during tests.

Using export { default } from with Jest

1 Answers