jest tests fail with "unexpected token"

[omgoshjosh]

i noticed my builds were failing and when looking into it, jest and babel are having trouble and i think it's because of this change here: https://github.com/VaguelySerious/react-quill/commit/1deb164663facea2d2efc8859dd87de197310f92#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L16

i am trying to get a code sandbox that shows the issue, but i am having trouble, so i wanted to get this issue open in the mean time.

  ● Test suite failed to run

    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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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:

    /path/to/my/app/node_modules/react-quill/lib/index.js:5
    import React, { createRef } from 'react';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import React, { useState, useEffect, useRef, useMemo, useContext } from 'react';
      3 | import { useSelector } from 'react-redux';
    > 4 | import ReactQuill from 'react-quill';
        | ^
      5 | import Delta from "quill-delta";
      6 | import classNames from 'classnames';
      7 | import { UppyFile } from '@uppy/core';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (app/components/some/FailingComponent.tsx:4:1)

Ticket due diligence

• [x] I have verified that the issue persists under ReactQuill v2.0.0-beta.2

ReactQuill version

• [x] Other (fork)

[VaguelySerious]

@omgoshjosh The migration guide in the README goes over this. Quill >= 2.0 moves to native ES modules, and so ReactQuill did too. If your bundle doesn't support native ES modules, you will need to use babel to transpile it.

It looks like you're using webpack with babel-loader, so the only thing you need to do is make sure babel-loader actually picks up react-quill-new.

Your webpack config should look something like this:

module.exports = {
  entry: {
    // your entry points
  },
  module: {
    rules: [
      // ... other loaders
      {
        test: /\.(js|jsx|ts|tsx|cjs)$/,
        exclude: /node_modules\/(?!(react-quill-new)\/).*/,
        loader: 'babel-loader',
        options: {
          plugins: [
            /* your plugins */
          ],
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
      // ... other loaders
    ],
  },
};

with special note to the exclude clause, which says to not transpile node_modules, except for react-quill-new

[omgoshjosh]

thanks for the response @VaguelySerious, i will keep banging my head on it! but yeah it actually works fine during local development with webpack... it is only with jest that it does not work... it seems like it's because we don't use webpack with jest to run tests, we use jest-babel which uses the same config as the babel-loader that webpack is using, but without all the overhead of webpack... maybe i need to update babel to use webpack which we avoided for a long time.

[VaguelySerious]

Hmm, I can't tell you whether your jest setup needs webpack as a pre-processor, but it probably shouldn't? If you can't get the babel-loader to work well with jest, it might be worth a shot to migrate to vitest instead. Its a drop-in replacement for jest, a lot of faster, and it doesn't require babel. I've migrated a few codebases from jest to vitest and it was very smooth every time.

[omgoshjosh]

thanks for the tip, i'll close this out for now.

[omgoshjosh]

ok, so i have attempted a LOT of hoop jumping to no avail. is there any way we can bring back the build artifact? looking at quill... it doesn't seem like they stopped shipping build artifacts that are "plain js"... in other words, just using quill v2 does not have the same issue that react-quill v3 has now. when i've tried to make it work, i start running into all sorts of problems. for instance once i enable transform on react-quill, it starts complaining about quill and lodash (inside of react-quill).

[omgoshjosh]

one more update with details as to what has gotten my first test to pass and now i'll have to look into the other 54 or so tests that are failing (they all seem to be the same issue, front end models not working on a call like expect(instantiatedModel).toHaveOwnProperty('id').

• i had a separate issue with quill-mention that twisted me up was unrelated to react-quill but similar in that it had to be transformed.
  • i also had to transform the right mjs file for quill-mention with moduleNameMapper
• in order to transform react-quill, i had to make a separate babel config since our webpack build with babel ships to a browser (not node) and there was an incompatibility with the preset options { "exclude": ["transform-classes"] }
  • the exclude transform-classes was needed to run in the browser properly (issue with quill.js) but would not run in node
  • i may look into this some more and make a single config that supports different envs
• finally, i had to use transformIgnorePatterns in order to specifically target react-quill and its some things in the dependency chain (lodash-es, quill, and parchment).

[VaguelySerious]

Apologies for the delayed response. I can see that using react-quill-new with Jest is a significant hurdle beyond expectations. I was under the impression that configuring transformIgnorePatterns correctly should mitigate all the issue, as it essentially produces what would otherwise be the "plain JS" build previously produced by webpack, and that this would have been easy to do.

It looks like those assumptions weren't correct, so I just added back the standalone plain JS build in react-quill-new@3.3.1, and have re-opened the issue for now.

Please let me know if using dist/react-quill.js in the new package version is more compatible with your setup, and if there are any other issues. If your problem is solved with this, feel free to close the issue again.

[alextenb]

Hello, I'm also running into this issue. I have a number of ignored modules in transformIgnorePatterns but adding react-quill-new to the list doesn't seem to change anything. How would I go about trying to use dist/react-quill.js as you suggest? Do you mean that I should try to import this file in the file where I use ReactQuill component?