Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jest tests fail with "unexpected token" #8

Open
2 tasks done
omgoshjosh opened this issue Aug 30, 2024 · 10 comments
Open
2 tasks done

jest tests fail with "unexpected token" #8

omgoshjosh opened this issue Aug 30, 2024 · 10 comments

Comments

@omgoshjosh
Copy link

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: 1deb164#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

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

ReactQuill version

  • Other (fork)
@VaguelySerious
Copy link
Owner

@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
Copy link
Author

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
Copy link
Owner

VaguelySerious commented Aug 30, 2024

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
Copy link
Author

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

@omgoshjosh
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

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
Copy link

alextenb commented Nov 5, 2024

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?

@VaguelySerious
Copy link
Owner

Do you mean that I should try to import this file in the file where I use ReactQuill component?

@alextenb Yes that's correct. If that doesn't work - let me know

@alextenb
Copy link

alextenb commented Dec 2, 2024

That didn't work for me, but omgoshjosh's final step did:

* finally, i had to use [transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring) in order to [specifically target react-quill and its some things in the dependency chain](https://stackoverflow.com/a/73984834/1429544) (lodash-es, quill, and parchment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants