Error testing vue component that uses ckeditor5-vue

[upadhb]

Hi all,

I have a vue project where I am using vue-test-utils and Jest for unit testing. While trying to run test on my component that has ckEditor5, I get the following error originating from \node_modules@ckeditor\ckeditor5-editor-classic\src\classiceditor.js:10

I followed the documentation for configuring vue.config.js. Is there some sort of configuration required for jest.config.js as well?

Please help

This is how I am using the editor:
In main.js

import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use(CKEditor);

I created a mixin (like below) that I import in my component:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import List from '@ckeditor/ckeditor5-list/src/list';

export default {
    data() {
        return {
            editor: ClassicEditor,
            editorConfig: {
                plugins: [
                    EssentialsPlugin,
                    BoldPlugin,
                    ItalicPlugin,
                    Underline,
                    LinkPlugin,
                    ParagraphPlugin,
                    Heading,
                    Alignment,
                    List,
                ],

                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        '|',
                        'numberedList',
                        '|',
                        'bulletedList',
                        '|',
                        'link',
                        '|',
                        'alignment',
                        '|',
                        'undo',
                        'redo',
                    ],
                },
            },
        };
    },
};

[FilipTokarski]

Hi! Thanks for the report, unfortunately I can confirm this. When running tests using vue-test-utils & Jest I get the same error:

import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
           ^^^^^^

    SyntaxError: Unexpected identifier

       7 | <script>
       8 | import CKEditor from "@ckeditor/ckeditor5-vue";
    >  9 | import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
         | ^
      10 | import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
      11 | import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
      12 | import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at src/components/CKEditor.vue:9:1
      at Object.<anonymous> (src/components/CKEditor.vue:57:3)

Mentioned previously here: #50 (comment)

cc @oleq

[upadhb]

Is there a way to resolve this??

[oleq]

@upadhb Have you tried suggestions in #50?

[FilipTokarski]

I'm closing this due to lack of activity.

[rafapaulin]

Still not solved =/ same problem here

[JarvisH]

Finally got this working, although I'm not sure what did the trick.

What I did:

1. Update all CKeditor dependencies to 27.1.0
2. Add vue.config.js Webpack configuration per the CKeditor documentation
3. Adjust transformIgnorePatterns in jest.config.js like this:

  transformIgnorePatterns: [
    '/node_modules/(?!lodash-es)(?!@ckeditor/*)(?!ckeditor5/*)', // transform all ckeditor dependencies
    '\\.pnp\\.[^\\/]+$'
  ],

4. If you are mocking static files: make sure svgs from CKeditor are not being mocked/stubbed in moduleNameWrapper:

  moduleNameMapper: {
    // Don't add 'svg' here...
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 
      '<rootDir>/__mocks__/fileMock.ts',
    // instead only add entry for svgs which are part of your project
    // adjust to fit your svg paths
    '(assets\\/svg\\/.*\\.svg)$': '<rootDir>/__mocks__/fileMock.ts'
  },

[RahulRawat1994]

Still not working