[Bug]: Jest transformIgnorePatterns can't transpile vee-validate with pnpm

[theolavaux]

Version

28.1.1

Steps to reproduce

1. Create new Nuxt app with Jest
2. Configure pnpm
3. Install vee-validate and import validation rules
4. See tests fail

Expected behavior

I expect tests to pass

Actual behavior

What happened?

I have a Nuxt app that runs with pnpm and I'd like to test it using Jest and the vee-validate library. I tried to add the option transformIgnorePattern inside jest.config.js but it's not working at all.

This is what I tried:

transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)']

transformIgnorePatterns: ['/node_modules/(?!(.*vee-validate/dist/rules))/']

The only option that works for me is to import the UMD build but I lose all the benefit of tree-shaking.

Sources

https://github.com/logaretm/vee-validate/issues/2310 https://github.com/facebook/jest/issues/2081#issuecomment-699558143 https://qiita.com/tamonmon/items/6392c1680ef498a8c816

Reproduction steps

1. Setup a new Nuxt project with Jest
2. Install vee-validate and try to import validation rules
3. Launch tests

Version

Vue.js 2.x and vee-validate 3.x

Relevant log output

Whenever I launch my tests, I get this error:


FAIL  test/integration/components/ui/RegistrationForm.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /my-project/node_modules/.pnpm/[email protected][email protected]/node_modules/vee-validate/dist/rules.js:889
    export { alpha, alpha_dash, alpha_num, alpha_spaces, between, confirmed, digits, dimensions, double, email, excluded, ext, image, integer, is, is_not, length, max, max_value, mimes, min, min_value, numeric, oneOf, regex, required, required_if, size };
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      34 | } from '@nuxtjs/composition-api';
      35 | import { extend, ValidationProvider } from 'vee-validate';
    > 36 | import {
         | ^
      37 |   min_value as minValue,
      38 |   max_value as maxValue,
      39 | } from 'vee-validate/dist/rules';

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1796:14)
      at Object.<anonymous> (components/form/fields/CalendarField.vue:36:1)
      at Object.<anonymous> (components/form/fields/FormField.vue:14:1)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Additional context

No response

Environment

System:
  OS: macOS 12.4
  CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
  Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
  npm: 8.12.0 - ~/.nvm/versions/node/v16.14.2/bin/npm 
npmPackages:
  jest: 28.1.1 => 28.1.1

[leon]

I encountered this yesterday.

it's because pnpm installs libs to node_modules/.pnpm/vee-validate and symlinks them to the root. so the transformIgnorePattern doesn't find it directly under node_modules

So this will work:

transformIgnorePatterns: ['/node_modules/.pnpm/(?!vee-validate/dist/rules)']

but I would also like to find a better solution where the transformIgnorePattern doesn't have to know about pnpm.

[theolavaux]

I tried both of those but none seemed to work 😮‍💨 transformIgnorePatterns: ['/node_modules/.pnpm/(?!vee-validate/dist/rules)'] transformIgnorePatterns: ['/node_modules/(?!(.*vee-validate/dist/rules))/']

[leon]

It could be the slash in the beginning or something with the path to where the rules are. try it without

transformIgnorePatterns: ['node_modules/.pnpm/(?!vee-validate)']

[theolavaux]

Would you mind sharing your jest.config.js?

[leon]

I have a NX monorepo. so it's not really applicable to your setup, sorry

[theolavaux]

https://github.com/theolavaux/jest-vee-validate-rules Here is a repro

[jgeschwendt]

ran into this today migrating to pnpm, this is how i got around it

transformIgnorePatterns: [
  `node_modules/(?!(?:.pnpm/)?(${esmModules.join('|')}))`,
],

https://codesandbox.io/s/jest-transformignorepattern-czh44p?file=/src/index.ts

[aamir-mns]

ran into this today migrating to pnpm, this is how i got around it

transformIgnorePatterns: [
  `node_modules/(?!(?:.pnpm/)?(${esmModules.join('|')}))`,
],

https://codesandbox.io/s/jest-transformignorepattern-czh44p?file=/src/index.ts

THANKS. worked like charm for me. Here is my config

var esmModules = ['react-photoswipe-gallery', 'photoswipe'];

module.exports = {
  preset: '../../jest.preset.js',
  transform: {
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
  },
  transformIgnorePatterns: [
    // Before: 'node_modules/(?!(react-photoswipe-gallery|photoswipe)/)',
    // "After:"
    `node_modules/(?!(?:.pnpm/)?(${esmModules.join('|')}))`,
  ],
  setupFilesAfterEnv: ['../../jest.setup.ts'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
};

[SimenB]

Config issue, hopefully #13115 has made it clearer 🙂

[github-actions[bot]]

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.