title: React CKeditor Jest error: SyntaxError: Cannot use import statement outside a module
body: <p>App was created using CreateReactApp with ejecting.
  I'm trying to use CKeditor according to this doc <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html" rel="nofollow noreferrer">CKeditor 5</a>
  After few hours it works fine, but much more hours trying to fix error in test finished unsuccessfully!
  When I run <code>npm test</code> I got this error:</p>
  <pre><code>node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10
      import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
     
      SyntaxError: Cannot use import statement outside a module
  
        1 | import React, { useState, useEffect } from 'react';
        2 | import CKEditor from '@ckeditor/ckeditor5-react';
      &gt; 3 | import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  </code></pre>
  <p>my package.json:</p>
  <pre><code>{
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;7.4.3&quot;,
      &quot;@ckeditor/ckeditor5-alignment&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-basic-styles&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-dev-utils&quot;: &quot;^12.0.5&quot;,
      &quot;@ckeditor/ckeditor5-dev-webpack-plugin&quot;: &quot;^8.0.5&quot;,
      &quot;@ckeditor/ckeditor5-editor-classic&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-essentials&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-heading&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-link&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-list&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-paragraph&quot;: &quot;^16.0.0&quot;,
      &quot;@ckeditor/ckeditor5-react&quot;: &quot;^2.0.0&quot;,
      &quot;@ckeditor/ckeditor5-theme-lark&quot;: &quot;^16.0.0&quot;,
      &quot;@svgr/webpack&quot;: &quot;4.1.0&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;1.6.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;1.6.0&quot;,
      &quot;axios&quot;: &quot;^0.18.1&quot;,
      &quot;babel-eslint&quot;: &quot;10.0.1&quot;,
      &quot;babel-jest&quot;: &quot;24.7.1&quot;,
      &quot;babel-loader&quot;: &quot;8.0.5&quot;,
      &quot;babel-plugin-named-asset-import&quot;: &quot;^0.3.2&quot;,
      &quot;babel-preset-react-app&quot;: &quot;^8.0.0&quot;,
      &quot;base64url&quot;: &quot;^3.0.1&quot;,
      &quot;blueimp-load-image&quot;: &quot;^2.21.0&quot;,
      &quot;case-sensitive-paths-webpack-plugin&quot;: &quot;2.2.0&quot;,
      &quot;cleave.js&quot;: &quot;^1.4.10&quot;,
      &quot;css-loader&quot;: &quot;2.1.1&quot;,
      &quot;dotenv&quot;: &quot;6.2.0&quot;,
      &quot;dotenv-expand&quot;: &quot;4.2.0&quot;,
      &quot;enzyme&quot;: &quot;^3.9.0&quot;,
      &quot;enzyme-adapter-react-16&quot;: &quot;^1.12.1&quot;,
      &quot;file-loader&quot;: &quot;3.0.1&quot;,
      &quot;fingerprintjs2&quot;: &quot;^2.1.0&quot;,
      &quot;flow-typed&quot;: &quot;^2.5.2&quot;,
      &quot;fs-extra&quot;: &quot;7.0.1&quot;,
      &quot;google-map-react&quot;: &quot;^1.1.4&quot;,
      &quot;history&quot;: &quot;^4.9.0&quot;,
      &quot;html-react-parser&quot;: &quot;^0.10.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;4.0.0-beta.5&quot;,
      &quot;identity-obj-proxy&quot;: &quot;3.0.0&quot;,
      &quot;is-wsl&quot;: &quot;^1.1.0&quot;,
      &quot;jest&quot;: &quot;24.7.1&quot;,
      &quot;jest-environment-jsdom-fourteen&quot;: &quot;0.1.0&quot;,
      &quot;jest-resolve&quot;: &quot;24.7.1&quot;,
      &quot;jest-watch-typeahead&quot;: &quot;0.3.0&quot;,
      &quot;lint-staged&quot;: &quot;^8.1.5&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;0.5.0&quot;,
      &quot;moment&quot;: &quot;^2.24.0&quot;,
      &quot;node-sass&quot;: &quot;^4.12.0&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;5.0.1&quot;,
      &quot;pnp-webpack-plugin&quot;: &quot;1.2.1&quot;,
      &quot;postcss-flexbugs-fixes&quot;: &quot;4.1.0&quot;,
      &quot;postcss-loader&quot;: &quot;3.0.0&quot;,
      &quot;postcss-normalize&quot;: &quot;7.0.1&quot;,
      &quot;postcss-preset-env&quot;: &quot;6.6.0&quot;,
      &quot;postcss-safe-parser&quot;: &quot;4.0.1&quot;,
      &quot;qs&quot;: &quot;^6.7.0&quot;,
      &quot;raw-loader&quot;: &quot;^3.1.0&quot;,
      &quot;rc-slider&quot;: &quot;^8.6.9&quot;,
      &quot;react&quot;: &quot;^16.8.6&quot;,
      &quot;react-app-polyfill&quot;: &quot;^1.0.0&quot;,
      &quot;react-avatar-editor&quot;: &quot;^11.0.7&quot;,
      &quot;react-dates&quot;: &quot;^20.2.2&quot;,
      &quot;react-dev-utils&quot;: &quot;^9.0.0&quot;,
      &quot;react-dom&quot;: &quot;^16.8.6&quot;,
      &quot;react-modal&quot;: &quot;^3.8.1&quot;,
      &quot;react-onclickoutside&quot;: &quot;^6.8.0&quot;,
      &quot;react-places-autocomplete&quot;: &quot;^7.2.1&quot;,
      &quot;react-redux&quot;: &quot;^7.0.3&quot;,
      &quot;react-responsive&quot;: &quot;^6.1.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.0.0&quot;,
      &quot;react-select&quot;: &quot;^2.4.3&quot;,
      &quot;react-slick&quot;: &quot;^0.24.0&quot;,
      &quot;react-test-renderer&quot;: &quot;^16.8.6&quot;,
      &quot;react-truncate&quot;: &quot;^2.4.0&quot;,
      &quot;react-with-direction&quot;: &quot;^1.3.0&quot;,
      &quot;redux&quot;: &quot;^4.0.1&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
      &quot;resolve&quot;: &quot;1.10.0&quot;,
      &quot;sass-loader&quot;: &quot;7.1.0&quot;,
      &quot;semver&quot;: &quot;6.0.0&quot;,
      &quot;slick-carousel&quot;: &quot;^1.8.1&quot;,
      &quot;style-loader&quot;: &quot;0.23.1&quot;,
      &quot;stylelint&quot;: &quot;^10.0.1&quot;,
      &quot;stylelint-config-standard&quot;: &quot;^18.3.0&quot;,
      &quot;terser-webpack-plugin&quot;: &quot;1.2.3&quot;,
      &quot;url-loader&quot;: &quot;1.1.2&quot;,
      &quot;webpack&quot;: &quot;4.29.6&quot;,
      &quot;webpack-dev-server&quot;: &quot;3.2.1&quot;,
      &quot;webpack-manifest-plugin&quot;: &quot;2.0.4&quot;,
      &quot;workbox-webpack-plugin&quot;: &quot;4.2.0&quot;
    },
    &quot;husky&quot;: {
      &quot;hooks&quot;: {
        &quot;pre-commit&quot;: &quot;npm run test &amp;&amp; flow&quot;
      }
    },
    &quot;proxy&quot;: &quot;https://getrenty-qa.devopsready.tools&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;node scripts/start.js&quot;,
      &quot;precommit&quot;: &quot;npm test &amp;&amp; lint-staged&quot;,
      &quot;build&quot;: &quot;node scripts/build.js&quot;,
      &quot;test:lint:js&quot;: &quot;eslint src/**/*.{js,jsx}&quot;,
      &quot;test:lint:scss&quot;: &quot;stylelint --config=.stylelintrc \&quot;**/*.scss\&quot;&quot;,
      &quot;test:lint&quot;: &quot;npm run test:lint:js &amp;&amp; npm run test:lint:scss&quot;,
      &quot;test:unit&quot;: &quot;node scripts/test.js --env=jsdom&quot;,
      &quot;test&quot;: &quot;npm run test:lint &amp;&amp; npm run test:unit&quot;,
      &quot;test:ci&quot;: &quot;node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage&quot;,
      &quot;flow&quot;: &quot;flow&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;eslint&quot;: &quot;^5.16.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^17.1.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^4.2.0&quot;,
      &quot;eslint-config-react-app&quot;: &quot;^4.0.1&quot;,
      &quot;eslint-loader&quot;: &quot;^2.2.1&quot;,
      &quot;eslint-plugin-flowtype&quot;: &quot;^3.11.1&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.18.0&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.0.1&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.14.2&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^1.6.1&quot;,
      &quot;flow-bin&quot;: &quot;^0.98.0&quot;,
      &quot;jest-junit&quot;: &quot;^7.0.0&quot;,
      &quot;prettier&quot;: &quot;^1.17.0&quot;,
      &quot;redux-devtools&quot;: &quot;^3.5.0&quot;,
      &quot;redux-devtools-extension&quot;: &quot;^2.13.8&quot;,
      &quot;stylelint-scss&quot;: &quot;^3.6.1&quot;,
      &quot;husky&quot;: &quot;^2.1.0&quot;
    },
    &quot;jest&quot;: {
      &quot;coverageReporters&quot;: [
        &quot;text&quot;,
        &quot;cobertura&quot;
      ],
      &quot;collectCoverageFrom&quot;: [
        &quot;src/**/*.{js,jsx,ts,tsx}&quot;,
        &quot;!src/**/*.d.ts&quot;
      ],
      &quot;setupFiles&quot;: [
        &quot;react-app-polyfill/jsdom&quot;
      ],
      &quot;setupFilesAfterEnv&quot;: [
        &quot;&lt;rootDir&gt;/src/setupTests.js&quot;
      ],
      &quot;testMatch&quot;: [
        &quot;&lt;rootDir&gt;/src/**/__tests__/**/*.{js,jsx,ts,tsx}&quot;,
        &quot;&lt;rootDir&gt;/src/**/*.{spec,test}.{js,jsx,ts,tsx}&quot;
      ],
      &quot;testEnvironment&quot;: &quot;jest-environment-jsdom-fourteen&quot;,
      &quot;transform&quot;: {
        &quot;^.+\\.(js|jsx|ts|tsx)$&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;,
        &quot;^.+\\.css$&quot;: &quot;&lt;rootDir&gt;/config/jest/cssTransform.js&quot;,
        &quot;^(?!.*\\.(js|jsx|ts|tsx|css|json)$)&quot;: &quot;&lt;rootDir&gt;/config/jest/fileTransform.js&quot;
      },
      &quot;transformIgnorePatterns&quot;: [
        &quot;[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$&quot;,
        &quot;^.+\\.module\\.(css|sass|scss)$&quot;
      ],
      &quot;modulePaths&quot;: [
        &quot;src/&quot;
      ],
      &quot;moduleNameMapper&quot;: {
        &quot;^react-native$&quot;: &quot;react-native-web&quot;,
        &quot;^.+\\.module\\.(css|sass|scss)$&quot;: &quot;identity-obj-proxy&quot;
      },
      &quot;moduleFileExtensions&quot;: [
        &quot;web.js&quot;,
        &quot;js&quot;,
        &quot;web.ts&quot;,
        &quot;ts&quot;,
        &quot;web.tsx&quot;,
        &quot;tsx&quot;,
        &quot;json&quot;,
        &quot;web.jsx&quot;,
        &quot;jsx&quot;,
        &quot;node&quot;
      ],
      &quot;watchPlugins&quot;: [
        &quot;jest-watch-typeahead/filename&quot;,
        &quot;jest-watch-typeahead/testname&quot;
      ]
    },
    &quot;babel&quot;: {
      &quot;presets&quot;: [
        &quot;react-app&quot;
      ]
    }
  }
  </code></pre>
  <p>component code:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import CKEditor from '@ckeditor/ckeditor5-react';
  import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  import Link from '@ckeditor/ckeditor5-link/src/link';
  import List from '@ckeditor/ckeditor5-list/src/list';
  import styles from './rtf.module.scss';
  
  const editorConfig = {
    plugins: [
      Essentials,
      Alignment,
      Bold,
      Italic,
      Paragraph,
      Heading,
      Link,
      List,
    ],
    toolbar: [
      'heading',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      'alignment',
    ],
  };
  
  type Props = {
    initialData?: string,
    onSave: Function,
    title?: string,
    savingStatus?: string,
  };
  
  const Editor = ({ initialData, onSave, title, savingStatus }: Props) =&gt; {
    const [editorData, setData] = useState(initialData || '');
  
    useEffect(() =&gt; {
      setData(initialData);
    }, [initialData]);
  
    const handleChange = (event, editor) =&gt; {
      const data = editor.getData();
  
      setData(data);
    };
  
    const resetEdit = () =&gt; {
      setData(initialData);
    };
  
    const handleSave = () =&gt; {
      onSave(editorData);
    };
  
    return (
      &lt;div&gt;
        &lt;div className={styles.title_row}&gt;
          &lt;h5 className={styles.title}&gt;{title}&lt;/h5&gt;
          &lt;button
            type=&quot;button&quot;
            className={`button_small ${styles.to_right}`}
            onClick={resetEdit}
          &gt;
            Reset
          &lt;/button&gt;
          &lt;button
            type=&quot;button&quot;
            className=&quot;button_green_dark_short&quot;
            onClick={handleSave}
          &gt;
            Save
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div className={styles.saving_status}&gt;{savingStatus}&lt;/div&gt;
        &lt;div className={styles.rtf_wrapper}&gt;
          &lt;CKEditor
            config={editorConfig}
            editor={ClassicEditor}
            onChange={handleChange}
            data={editorData}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  Editor.defaultProps = {
    initialData: '',
    title: '',
    savingStatus: '',
  };
  
  export default Editor;
  </code></pre>
  <p>I have tried modify jest.transformIgnorePatterns in package.json but it failed again.
  Any advices?????</p>