Cannot mock ApplicationInsights in Jest tests

[pviotti]

Hi,

I'm trying to use this plugin to write Jest mock tests for Application Insights, which does not support CommonJS. Unfortunately I can't manage to make it work: for some reason it throws a ReferenceError: define is not defined when importing Application Insights.

The code of my very small project is at this branch: https://github.com/pviotti/react-appinsights/tree/testing-babel-converter

Here's the relevant configuration (mostly taken from the example project in this repo):

jest.config.js

'use strict';

const webpackConfig = require('./webpack.config');

module.exports = {
    moduleNameMapper: webpackConfig.resolve.alias,
    transformIgnorePatterns: [
        "node_modules/(?!(applicationinsights-js)/)"
      ],
    setupTestFrameworkScriptFile:  "<rootDir>/test/setupTests.js"
}

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'react-appinsights.bundle.js'
      },
    module: {
        rules: [
          {
            test: /.js$/,
            loader: 'babel-loader'
          }
        ]
    },
    resolve: {
      alias: {
        'applicationinsights-js': path.resolve(process.cwd(), './node_modules/applicationinsights-js/bundle/ai.module.js'),
      }
    }
};

.babelrc

{
  "presets": [ "@babel/preset-env", "@babel/preset-react"],
  "env": {
    "test": {
      "plugins": [
        "transform-amd-to-commonjs"
      ]
    }
}
}

[msrose]

Hmm I'll take a closer look at this when I'm out of work (will probably have to inspect the source code of ApplicationInsights), but it's possible it will be addressed by #44, which has yet to be released. Take a look at the restrictToTopLevelDefine option as well and see if enabling it gives you a different error message. Once #65 is addressed I will cut a new release, so I'll work a bit faster to get that out if it turns out it's a blocker for you.

[msrose]

Here's a link to the options for this plugin, with details about restrictToTopLevelDefine https://github.com/msrose/babel-plugin-transform-amd-to-commonjs#options

[msrose]

I confirmed that the plugin is transforming the ApplicationInsights dist correctly, so you can disregard my comments from above. I figured it was something to do with your config, so I did a bit of digging and came across this issue jestjs/jest#6053 (comment).

I was able to get your tests passing by deleting the file in __mocks__(there are still some errors in there), renaming .babelrc to babel.config.js, and changing the babel.config.js contents so that it was exported:

module.exports={
  "presets": [ "@babel/preset-env", "@babel/preset-react"],
  "env": {
    "test": {
      "plugins": [
        "transform-amd-to-commonjs"
      ]
    }
}
}

Hope that helps; closing this issue because it isn't related to transforming AMD to commonjs.

[pviotti]

Awesome! Thank you so much for this and for the plugin! 👍