javascript - react CKeditor Jest 错误 : SyntaxError: Cannot use import statement outside a module

Question

应用程序是使用带有弹出功能的 CreateReactApp 创建的。 我正在尝试根据此文档使用 CKeditor CKeditor 5 几个小时后它工作正常，但更多的时间试图修复测试中的错误但没有成功! 当我运行 npm test 时出现此错误:

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';
    > 3 | import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

我的 package.json:

{
  "private": true,
  "dependencies": {
    "@babel/core": "7.4.3",
    "@ckeditor/ckeditor5-alignment": "^16.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^16.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.5",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
    "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
    "@ckeditor/ckeditor5-essentials": "^16.0.0",
    "@ckeditor/ckeditor5-heading": "^16.0.0",
    "@ckeditor/ckeditor5-link": "^16.0.0",
    "@ckeditor/ckeditor5-list": "^16.0.0",
    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
    "@ckeditor/ckeditor5-react": "^2.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^16.0.0",
    "@svgr/webpack": "4.1.0",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "axios": "^0.18.1",
    "babel-eslint": "10.0.1",
    "babel-jest": "24.7.1",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-preset-react-app": "^8.0.0",
    "base64url": "^3.0.1",
    "blueimp-load-image": "^2.21.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "cleave.js": "^1.4.10",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "file-loader": "3.0.1",
    "fingerprintjs2": "^2.1.0",
    "flow-typed": "^2.5.2",
    "fs-extra": "7.0.1",
    "google-map-react": "^1.1.4",
    "history": "^4.9.0",
    "html-react-parser": "^0.10.0",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.7.1",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.7.1",
    "jest-watch-typeahead": "0.3.0",
    "lint-staged": "^8.1.5",
    "mini-css-extract-plugin": "0.5.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.6.0",
    "postcss-safe-parser": "4.0.1",
    "qs": "^6.7.0",
    "raw-loader": "^3.1.0",
    "rc-slider": "^8.6.9",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.0",
    "react-avatar-editor": "^11.0.7",
    "react-dates": "^20.2.2",
    "react-dev-utils": "^9.0.0",
    "react-dom": "^16.8.6",
    "react-modal": "^3.8.1",
    "react-onclickoutside": "^6.8.0",
    "react-places-autocomplete": "^7.2.1",
    "react-redux": "^7.0.3",
    "react-responsive": "^6.1.2",
    "react-router-dom": "^5.0.0",
    "react-select": "^2.4.3",
    "react-slick": "^0.24.0",
    "react-test-renderer": "^16.8.6",
    "react-truncate": "^2.4.0",
    "react-with-direction": "^1.3.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "semver": "6.0.0",
    "slick-carousel": "^1.8.1",
    "style-loader": "0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "terser-webpack-plugin": "1.2.3",
    "url-loader": "1.1.2",
    "webpack": "4.29.6",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run test && flow"
    }
  },
  "proxy": "https://getrenty-qa.devopsready.tools",
  "scripts": {
    "start": "node scripts/start.js",
    "precommit": "npm test && lint-staged",
    "build": "node scripts/build.js",
    "test:lint:js": "eslint src/**/*.{js,jsx}",
    "test:lint:scss": "stylelint --config=.stylelintrc \"**/*.scss\"",
    "test:lint": "npm run test:lint:js && npm run test:lint:scss",
    "test:unit": "node scripts/test.js --env=jsdom",
    "test": "npm run test:lint && npm run test:unit",
    "test:ci": "node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.2.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-flowtype": "^3.11.1",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "flow-bin": "^0.98.0",
    "jest-junit": "^7.0.0",
    "prettier": "^1.17.0",
    "redux-devtools": "^3.5.0",
    "redux-devtools-extension": "^2.13.8",
    "stylelint-scss": "^3.6.1",
    "husky": "^2.1.0"
  },
  "jest": {
    "coverageReporters": [
      "text",
      "cobertura"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [
      "src/"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

组件代码:

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) => {
  const [editorData, setData] = useState(initialData || '');

  useEffect(() => {
    setData(initialData);
  }, [initialData]);

  const handleChange = (event, editor) => {
    const data = editor.getData();

    setData(data);
  };

  const resetEdit = () => {
    setData(initialData);
  };

  const handleSave = () => {
    onSave(editorData);
  };

  return (
    <div>
      <div className={styles.title_row}>
        <h5 className={styles.title}>{title}</h5>
        <button
          type="button"
          className={`button_small ${styles.to_right}`}
          onClick={resetEdit}
        >
          Reset
        </button>
        <button
          type="button"
          className="button_green_dark_short"
          onClick={handleSave}
        >
          Save
        </button>
      </div>
      <div className={styles.saving_status}>{savingStatus}</div>
      <div className={styles.rtf_wrapper}>
        <CKEditor
          config={editorConfig}
          editor={ClassicEditor}
          onChange={handleChange}
          data={editorData}
        />
      </div>
    </div>
  );
};

Editor.defaultProps = {
  initialData: '',
  title: '',
  savingStatus: '',
};

export default Editor;

我尝试修改 package.json 中的 jest.transformIgnorePatterns 但它再次失败。 有什么建议吗？？？？？

Answer 1

发生这种情况是因为您使用的是未捆绑版本的 ckeditor，jest 不理解 es6，所以您必须更改 transformIgnorePatterns，这样 jest 才能为您编译文件。

这是一个标准的 jest 配置(例如 jest.config.js)和 .babelrc

*如果您使用的是 .babelrc，请尝试将其更改为 babel.config.js

在你的 jest 配置文件中包含这个:

{
      moduleNameMapper: {
        '^~/(.*)': '<rootDir>/src/$1',
        '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
      },
      transformIgnorePatterns: ['/node_modules/(?!@ckeditor)/.+\\.js$']
}

如果您在 React 应用程序中使用 craco，请像这样使用它:

jest: {
    configure(config) {
      config.moduleNameMapper = {
        '^~/(.*)': '<rootDir>/src/$1',
        '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
      };

      ...

      config.transformIgnorePatterns = ['/node_modules/(?!@ckeditor)/.+\\.js$'];
      return config;
    },
  },

ckeditor 构建的版本现在有问题，我希望他们能尽快修复它...