documentation of babelConfig field is wrong?

[sbbird]

The document says we can use a js babel config file in babelConfig

module.exports = {
  // [...]
  globals: {
    'ts-jest': {
      babelConfig: 'babel.config.js'
    }
  }
};

This doesn't work, it gives me

SyntaxError: JSON5: invalid character 'm' at 1:1

     at syntaxError (node_modules/ts-jest/node_modules/json5/lib/parse.js:1083:17)
     at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:366:63)
     at ConfigSet.babel (node_modules/ts-jest/dist/util/memoize.js:43:24)
     at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:589:29)
     at ConfigSet.jsonValue (node_modules/ts-jest/dist/util/memoize.js:43:24)
     at ConfigSet.get [as cacheKey] (node_modules/ts-jest/dist/config/config-set.js:598:25)

Expected behavior :

The correct usage is

'ts-jest': {
  babelConfig: require('./babel.config.js')
}

Shall we update the document accordingly?

[ahnpnl]

Hi,

Your not working example isn't the same as your expectation code. In your not working code, babel file is babelrc.test.js while expectation code is babel.config.js.

I've checked on babel doc and I couldn't find babel support for .test.js. Does babel really support .test.js ?

If you switch your babel config file to either .babelrc or babel.config.js it should work. Those 2 files are defined in babel doc

[sbbird]

Ah sorry, I just copied the code snippet from https://kulshekhar.github.io/ts-jest/user/config/babelConfig.
Let me put it clear.
The code not working is

'ts-jest': {
      babelConfig: 'babel.config.js'
    }

The error is

SyntaxError: JSON5: invalid character 'm' at 1:1

     at syntaxError (node_modules/ts-jest/node_modules/json5/lib/parse.js:1083:17)
     at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:366:63)
     at ConfigSet.babel (node_modules/ts-jest/dist/util/memoize.js:43:24)
     at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:589:29)
     at ConfigSet.jsonValue (node_modules/ts-jest/dist/util/memoize.js:43:24)
     at ConfigSet.get [as cacheKey] (node_modules/ts-jest/dist/config/config-set.js:598:25)

The working code is

'ts-jest': {
  babelConfig: require('./babel.config.js')
}

I will update the issue description.

[ahnpnl]

would you please also provide your babel.config.js content ?

[sbbird]

Sure, it's not a crazy one.

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        ['@babel/plugin-transform-react-jsx'],
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-json-strings',
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ],
        '@babel/plugin-proposal-function-sent',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-proposal-numeric-separator',
        '@babel/plugin-proposal-throw-expressions'
    ],
    env: {
        test: {
            plugins: ['@babel/plugin-transform-runtime', 'dynamic-import-node'],
            sourceMaps: 'both'
        },
        production: {
            plugins: ['transform-react-remove-prop-types']
        }
    }
};

[chasel34]

when I use the code below

'ts-jest': {
  babelConfig: require('./babel.config.js')
}

I got an error on transform jsx

my babel.config.js

const utils = require('./build/util');

module.exports = function(api) {
    const isTest = api.env('test');
    let presets = [];

    if (isTest) {
        presets = ['@babel/preset-env', '@babel/preset-react'];
    } else {
        presets = [
            '@babel/preset-react',
            [
                '@babel/preset-env',
                {
                    targets: {
                        browsers: ['last 2 versions', 'ie >= 11'],
                    },
                    modules: false,
                    useBuiltIns: 'entry',
                    corejs: 3,
                },
            ],
        ];
    }
    const plugins = [
        'react-hot-loader/babel',
        '@babel/plugin-syntax-dynamic-import',
    ];
    api.cache(true);
    return {
        presets,
        plugins,
    };
};

am I using it the wrong way？

@sbbird
@ahnpnl

[chasel34]

it works when I use the code below

babelConfig: true,

[ahnpnl]

Hi @chasel34,

Use babelConfig: true means ts-jest will automatically locate babel config file at default path (which is on root level). So it usually works. If specifying babelConfig: <file_path> like @sbbird , it means the babel config locates at another place other than default path.

I'll check why babelConfig: babel.config.js doesn't work for @sbbird .

[sbbird]

Any updates? I am happy to send a pull request to fix the documentation if that is what you want.

[ahnpnl]

I confirmed this is indeed an issue. There are 2 issues here:

• Documentation is wrong.
• Using babelConfig: require(./babel.config.js) doesn't work for me and @chasel34 . However it works for @sbbird .

Does babelConfig: require(./babel.config.js) always work for you @sbbird ?
I think this issue is the same as #933

[ahnpnl]

close via #1332

[sbbird]

Thanks for fixing it.

[chasel34]

Thanks for fixing it.😊

[sunny-mittal]

If others run into this and are using typescript, keep in mind that babelConfig: true just tells ts-jest to look for a default babel config, which would be babel.config.js. If you are using a babel.config.ts file, you will need to specify the the name. In my case, I also had to use require('./babel.config.ts') for reasons I can't yet figure out but it works so moving on :)