'duplicated modules' error when running tests in Jest

[alicewriteswrongs]

Hello! I'm running into an issue that is cropping up only when my React-based CKEditor setup is running in Jest. The same component runs without issue on a basic test page in my application.

A bit about the setup:

• I have built a custom CKEditor build from source following the guide here. The CKEditor-specific webpack configuration all seems to be working great, after ironing out some difficulties.
• I am using the <CKEditor> react component from this package to create an editor component to use elsewhere in my application.

The issue I'm seeing is only when running a very basic test in Jest. I'm using enzyme as part of my testing setup, and I have one test which basically tests whether the component can mount without errors. When the test runs I get this error:

  ● Test suite failed to run

    CKEditorError: ckeditor-duplicated-modules
    Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

    > 1 | import ClassicEditorBase from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"
        | ^
      2 | import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials"
      3 | import UploadAdapterPlugin from "@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter"
      4 | import AutoformatPlugin from "@ckeditor/ckeditor5-autoformat/src/autoformat"

      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-utils/src/version.js:149:8)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-utils/src/emittermixin.js:15:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-utils/src/collection.js:10:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/viewcollection.js:11:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/view.js:11:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js:12:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js:11:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/dropdown/button/dropdownbuttonview.js:10:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js:12:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js:20:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js:13:1)
      at Object.<anonymous> (node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:15:1)
      at Object.<anonymous> (static/js/lib/ckeditor/CKEditor.ts:1:1)
      at Object.<anonymous> (static/js/components/MarkdownEditor.tsx:5:1)
      at Object.<anonymous> (static/js/components/MarkdownEditor.test.tsx:4:1)

PASS static/js/pages/App.test.tsx

Test Suites: 1 failed, 7 passed, 8 total
Tests:       9 passed, 9 total
Snapshots:   0 total
Time:        4.689 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

The code for this is all open source. You can see the branch where I've been working on these tests here: https://github.com/mitodl/ocw-studio/compare/ap/ckeditor-add-tests

A few key things (I think):

• the markdown editor component: https://github.com/mitodl/ocw-studio/compare/ap/ckeditor-add-tests#diff-4fdd4b49a19d58d4eb5c36065b25a83a44f6f09b2145f33a57ac912c29d0617a
• our CKEditor implementation from source: https://github.com/mitodl/ocw-studio/compare/ap/ckeditor-add-tests#diff-59338aaaff104db3fc45d9c4c7191a8c41017acfdb7c15c34293186d9f9fa43a

I've seen a few other issues on this repo with similar error messages, but after trying some of the fixes mentioned in those issues I haven't been able to resolve the issue. Any idea what might be going on? I thought perhaps something with multiple tests running, but it's only a single test. I'm also not depending on a pre-built distribution of CKEditor, but writing a custom class extending @ckeditor/ckeditor5-classic-editor. Anyhow, I'm sort of stumped!

Thanks for any help you can offer, and lmk if more info would be helpful. The project I'm working on is open source - it's a django project but for diagnostic purposes it should be possible to clone and run JS tests and so on without messing with any of that stuff.

[pomek]

Hi @aliceriot,

I am sorry for the late response. We're in the middle of the testing phase/release process. We'll plan to release the next version of CKEditor 5 on Wed, Mar 3rd.

After the release, I'll be able to take a look at the issue and give you more attention.

[pomek]

@aliceriot, I've checked the issue using the code from the provided repository.

Unfortunately, I don't understand why the error occurs. I checked the yarn.lock file and I didn't find anything that could be causing the duplication error. There is no nested node_modules/ directory inside ckeditor5-* packages.

It looks like Jest has some issues when transforming CKEditor sources.

If you will comment out the code (node_modules/@ckeditor/ckeditor5-utils/src/version.js)

	throw new CKEditorError(
		'ckeditor-duplicated-modules',
		null
	);

Jest will end with another error:

 RUNS  static/js/components/MarkdownEditor.test.tsx
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "CKEditorError: Cannot read property 'to' of undefined
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-Cannot read property 'to' of undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
error Command failed with exit code 1.

If it is possible in your project, I'd suggesting changing the test runner. E.g. Karma + Webpack.

[alicewriteswrongs]

hey @pomek, thanks for following up about this. I was worried that we'd have to switch away from jest...it's such a nice test runner. I may take a little more time to try and see if I can get to the bottom of what's going on, if I find anything useful I'll let you know.

These issues seem possibly to be something to do with the combination of Jest and React btw. I wrote some tests here for a custom Markdown plugin which we wrote: mitodl/ocw-studio#99

To use markdown in our project we need to be able to add support for extended markdown syntax, so I wrote a little pluggable API where plugins can define new markdown syntax. Anyhow, in testing this it I didn't have any problems with running some tests in Jest. So I'll try to investigate a little bit if perhaps the issue is enzyme or something.

[alicewriteswrongs]

actually, small update: it seems like this an issue somewhere in the implementation of this package. I switched to using a custom React wrapper, attaching the CKEditor instance to a ref, and the error goes away. For my purposes this fixes the issue, although it's not clear why it's happening here.

scratch that, was too optimistic!

[Reinmar]

I may be wrong here, but one of the issues with running tests that I had in the past was that if there are multiple input JS files, and each of them is compiled separately and then they are all loaded into one process, that means that the piece of code that checks the window.CKEDITOR_VERSION global is also executed multiple times.

In Karma, we worked around this by having a single input file (generated on the fly), that aggregates all other files. 

However, resolving this issue, would be just the first step of many. The bigger problem is that Jest does not use a real browser, but JSDOM. I described this issue here: #225.

[orlandovallejos]

For anyone who may be experiencing a similar issue: I had the "duplicated modules" error today after installing Mentions.
I installed it like this in my package.json:

"@ckeditor/ckeditor5-mention": "^31.0.0",

because I want to get updates and fixes for that version, BUT after running out of ideas (and checking my yarn.lock file) I just used the specific version like this:

"@ckeditor/ckeditor5-mention": "31.0.0",

And it worked!

It may not be the solution for this specific issue, but that was the solution for me.