transformIgnorePatterns setting doesn't work when using a .babelrc instead of babel.config.js

[amclin]

🐛 Bug Report

Jest fails to respect the transformIgnorePatterns setting in package.json when when babel is configured using .babelrc. However, if .babelrc is converted to babel.config.js then Jest runs just fine.

To Reproduce

Steps to reproduce the behavior:

1. Setup a project using a .babelrc

{
  "presets": [
    [
      "next/babel",
      {
        // This tells the preset to look for browserslist in package.json
        // See: https://babeljs.io/docs/en/babel-preset-env#browserslist-integration
        "useBuiltIns": "entry"
      }
    ]
  ],
  "plugins": [
    "graphql-tag"
  ],
  "env": {
    "production": {
      "plugins": [
        "jsx-remove-data-test-id"
      ]
    }
  }
}

2. Include an npm package that needs transpiling
   • npm install --save @bau-design/components-react
   • import { Card } from '@bau-design/comopnents-react
   • https://github.com/bau-design-system/bau/blob/master/packages/components-react/src/components/index.js
3. Setup Jest and specify the package be transformed using the transformIgnorePattern in package.json

  "jest": {
    "setupFilesAfterEnv": [
      "jest-expect-message"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,jsx,ts,tsx}"
    ],
    "coverageReporters": [
      "clover",
      "json",
      "json-summary",
      "lcov",
      "text"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 44,
        "functions": 38,
        "lines": 29,
        "statements": 29
      }
    },
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/html/sites/",
      "/out/",
      "/.next/",
      "/.github/"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/coverage/",
      "<rootDir>/sql/",
      "<rootDir>/html/",
      "/__mocks__/",
      "/out/",
      "/.next/",
      "/.github/"
    ],
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(@bau-design/components-react|@bau-design)/)"
    ]
  },

3. run jest

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/amclin/Documents/git/anthonymclin.com/node_modules/@bau-design/components-react/src/components/index.js:1
    export { Card } from './molecules/card'
    ^^^^^^

    SyntaxError: Unexpected token 'export'
        at compileFunction (<anonymous>)

      4 | import PropTypes from 'prop-types'
      5 | import parse from 'parse-md'
    > 6 | import { Card } from '@bau-design/components-react'
        | ^

Expected behavior

Expect Jest to work the same for either a .babelrc or babel.config.js. If the .babelrc is replaced with the equivalent babel.config.js, then things magically start working:

module.exports = {
  presets: [
    [
      'next/babel',
      {
        // This tells the preset to look for browserslist in package.json
        // See: https://babeljs.io/docs/en/babel-preset-env#browserslist-integration
        useBuiltIns: 'entry'
      }
    ]
  ],
  plugins: ['graphql-tag'],
  env: {
    production: {
      plugins: ['jsx-remove-data-test-id']
    }
  }
}

Link to repl or repo (highly encouraged)

envinfo

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 869.08 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.6.0 - ~/.nvm/versions/node/v13.6.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/Documents/git/anthonymclin.com/node_modules/.bin/npm
  Managers:
    Homebrew: 2.4.1 - /usr/local/bin/brew
    Maven: 3.6.3 - /usr/local/bin/mvn
    pip3: 19.0.3 - /usr/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.24.3 - /usr/bin/git
    Clang: 1103.0.32.62 - /usr/bin/clang
    Subversion: 1.10.4 - /usr/bin/svn
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  Virtualization:
    Docker: 19.03.8 - /usr/local/bin/docker
    Parallels: 15.1.2 - /usr/local/bin/prlctl
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.1 - /usr/bin/vim
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.18.4 - /usr/bin/perl
    PHP: 7.3.11 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.7.3 - /usr/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Brave Browser: 83.1.10.97
    Chrome: 83.0.4103.116
    Safari: 13.1.1

[ChiefORZ]

thanks! saved me a lot of time debugging

[josokinas]

Thanks!

Can't believe this is still an issue!

Was causing me a lot of headache today... 😞

EDIT: probably good to read README: https://github.com/facebook/jest#using-babel

[leandrooriente]

Thanks!

[SimenB]

This (transpiling node_modules) is documented by babel: https://babeljs.io/docs/en/configuration#whats-your-use-case

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.