CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsjestjs
Sam
Sam

Reputation: 7048

Jest test 'unexpected token export'

I'm trying to get my jest tests to run. I am getting the error SyntaxError: Unexpected token export at the line export default configureStore..specifically on the word 'export'. To me this suggests redux-mock-store is not being transpiled by Babel, so how can I force this with Jest? I'm using jest-webpack.

ContractsActions.test.js

import * as contractsActions from './contractsActions';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk]
const mockStore = configureMockStore(middlewares);

describe('async actions', () => {
    const store = mockStore({})
    return store.dispatch(contractsActions.fetchAllContracts()).then(() => {
        //Do something
    })
});

package.json

...
  "scripts": {
    "test": "jest-webpack",
...
  "jest": {
    "transformIgnorePatterns": [
      "!node_modules/"
    ]
  }
...

webpack.config.js

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query:
            {
                presets:['es2015', 'react', 'stage-2']
            }
        }
    ]
},
resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
        react: path.resolve('./node_modules/react'),
    }
},

Upvotes: 0

Views: 2707

Answers (2)

Sam
Sam

Reputation: 7048

I ended up fixing this problem by creating a separate .babelrc file, instead of trying to set the babel configuration settings in package.json. I'm sure there are other steps I tried that may have contributed but this seemed to be the one that fixed it.

.babelrc

{
  "presets": [["es2015", {"modules": false}]],

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Upvotes: 0

connexo
connexo

Reputation: 56720

Take a look at the package.json from that package:

https://github.com/arnaudbenard/redux-mock-store/blob/master/package.json

You can see it offers different entry points:

"main": "dist/index-cjs.js",
"module": "dist/index-es.js",
"js:next": "dist/index-es.js",
"browser": "dist/index.min.js",

Check if your node_modules/redux-mock-store has a dist folder. If not, start the build that suits your requirements (also listed in package.json):

"build:cjs": "babel src --out-file dist/index-cjs.js",
"build:umd": "cross-env BABEL_ENV=es NODE_ENV=development rollup -f umd -c -i src/index.js -o dist/index-umd.js",
"build:umd:min": "cross-env BABEL_ENV=es NODE_ENV=production rollup -f umd -c -i src/index.js -o dist/index-umd.min.js",
"build:es": "cross-env BABEL_ENV=es NODE_ENV=development rollup -f es -c -i src/index.js -o dist/index-es.js",
"build": "npm run build:umd && npm run build:umd:min && npm run build:es && npm run build:cjs",

I don't know which of those versions buildable would be the right one for you, but I assume one of them will be. At worst, start npm i && npm run build:cjs in node_modules/redux-mock-store and resort to CommonJS require syntax:

const configureMockStore = require('redux-mock-store/dist/index-cjs.js');

Really hope this solves your problem, at least these are the steps I would try.

Upvotes: 0

Related Questions