VaguelySerious / react-quill

A Quill component for React.
https://zenoamaro.github.io/react-quill/
MIT License
47 stars 15 forks source link

jest tests fail with "unexpected token" #8

Open omgoshjosh opened 2 months ago

omgoshjosh commented 2 months ago

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

ReactQuill version

VaguelySerious commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

omgoshjosh commented 2 months ago

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 commented 2 months ago

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').

VaguelySerious commented 2 months ago

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 commented 1 week ago

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?