测试时用ckeditor问题进行开玩笑测试

Question

我试图测试我的项目，该项目配置了 vite (Typescript)。我用的是玩笑。该项目使用ckeditor。测试时显示以下错误； [![在此处输入图像描述][1]][1]

package.json

{
  "name": "test-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky install",
    "test": "jest --clearCache && jest --transformIgnorePatterns"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-autoformat": "^38.1.0",
    "@ckeditor/ckeditor5-basic-styles": "^38.1.0",
    "@ckeditor/ckeditor5-block-quote": "^38.1.0",
    "@ckeditor/ckeditor5-editor-classic": "^38.1.0",
    "@ckeditor/ckeditor5-essentials": "^38.1.0",
    "@ckeditor/ckeditor5-heading": "^38.1.0",
    "@ckeditor/ckeditor5-link": "^38.1.0",
    "@ckeditor/ckeditor5-list": "^38.1.0",
    "@ckeditor/ckeditor5-paragraph": "^38.1.0",
    "@ckeditor/ckeditor5-react": "^6.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^38.1.0",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-slot": "^1.0.1",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.6",
    "@reduxjs/toolkit": "^1.9.3",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "class-variance-authority": "^0.6.0",
    "cmdk": "^0.2.0",
    "date-fns": "^2.30.0",
    "dom-to-code": "^1.5.4",
    "dotenv": "^16.0.3",
    "framer-motion": "^10.12.16",
    "html2canvas": "^1.4.1",
    "lucide-react": "^0.214.0",
    "maplibre-gl": "^3.0.1",
    "react": "^18.2.0",
    "react-day-picker": "^8.7.1",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.4",
    "react-query": "^3.39.3",
    "react-query-devtools": "^2.6.3",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.10.0",
    "react-spinners": "^0.13.8",
    "react-toastify": "^9.1.3",
    "recharts": "^2.6.2",
    "tailwind-merge": "^1.12.0",
    "uuid": "^9.0.0",
    "vite-plugin-show-proxy": "^0.0.8",
    "yup": "^1.1.1"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^4.29.4",
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "^14.0.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.4",
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.5",
    "@typescript-eslint/parser": "^5.59.5",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "husky": "^8.0.0",
    "jest": "^29.6.4",
    "jest-environment-jsdom": "^29.6.4",
    "jest-localstorage-mock": "^2.4.26",
    "jest-transform-css": "^6.0.1",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "^13.2.2",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.1",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --cache --write"
    ]
  },
  "moduleDirectories": [
    "node_modules",
    "src"
  ]
}

jest.config.ts

import { pathsToModuleNameMapper, JestConfigWithTsJest } from 'ts-jest';
import { compilerOptions } from './tsconfig.json';

const jestConfig: JestConfigWithTsJest = {
  preset: 'ts-jest',
  moduleDirectories: ['node_modules', './src/'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  testEnvironment: 'jsdom',
  coverageReporters: ['html'],
  transform: {
    '.+\\.(css|scss|sass|png|jpg|svg)$': 'jest-transform-stub',
    '^.+\\\\.(js|jsx|ts|tsx)$': 'ts-jest',
  },
  transformIgnorePatterns: ['node_modules/(?!(axios|react-toastify|jest-transform-css|maplibre-gl))', '@ckeditor'],
  setupFiles: ['<rootDir>/src/__test__/jest.stub.ts'],
};

export default jestConfig;

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "checkJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./src/",
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "strictBindCallApply": true,
    "noImplicitReturns": true,
    "strictPropertyInitialization": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "paths": {
      "@Atoms/*": ["ui/atoms/*"],
      "@Molecules/*": ["ui/molecules/*"],
      "@Organisms/*": ["ui/organisms/*"],
      "@Templates/*": ["ui/templates/*"],
      "@Pages/*": ["ui/pages/*"],
      "@CustomComponents/*": ["ui/customComponents/*"],
      "@Assets/*": ["assets/*"],
      "@Utils/*": ["utils/*"],
      "@Store/*": ["store/*"],
      "@Constants/*": ["constants/*"],
      "@Hooks/*": ["hooks/*"],
      "@Api/*": ["api/*"],
      "@Schemas/*": ["schemas/*"],
      "@Services/*": ["api/services/*"],
      "@Queries/*": ["api/queries/*"],
      "@Routes/*": ["routes/*"],
      "@Validators/*": ["validators/*"],
      "@Animations/*": ["animations/*"],
      "@Ui/*": ["ui/*"],
      "@Interceptors/*": ["interceptors/*"]
    }
  },
  "include": [".eslintrc.cjs", "src", "src/**/*.ts"],
  "exclude": ["node_modules", "dist"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "types": ["node", "jest", "@testing-library/jest-dom", "@types/jest"]
}

我尝试了互联网上的解决方案，但我无法弄清楚出了什么问题。我该如何解决它？ [1]：

Answer 1

我今天才遇到这个问题

transformIgnorePatterns: ["node_modules\\/\\.pnpm\\/(?!(@ckeditor))"

将使您签入除@ckeditor之外的所有节点模块（因此之后您可能需要添加一些其他要忽略的包，例如@ckeditor可能使用的

lodash

）

现在我们不会忽略这些模块，我们需要告诉他们如何编译它们。

transform: {  [`node_modules\\/\\.pnpm\\/${includePatterns}`]: 'babel-jest' }

重要注意事项

• \\

  逃离

  /

  很重要
• 我正在使用

  pnpm

  你可能不需要这个文件夹，然后删除这部分

  \\/\\.pnpm

• 我使用类型脚本，所以我需要为 ts 文件添加转换（在更改此忽略配置之前不需要）

const includePatterns = [
    '@ckeditor',
    'ckeditor',
    'lodash',
    'vanilla-colorful',
].join('|');

module.exports = {
    setupFiles: ['<rootDir>/tests/lib/set-up.ts'],
    testEnvironment: 'node',
    transform: {
      '^.+\\.(tsx?|ts)$': 'ts-jest',
      [`node_modules\\/\\.pnpm\\/${includePatterns}`]: 'babel-jest',
    },
    transformIgnorePatterns: [
      `node_modules\\/\\.pnpm\\/(?!(${includePatterns}))`,
    ],
    moduleNameMapper: {
      '.*\\.(css|png|svg)$': '<rootDir>/tests/lib/dummy.ts',
    },
};

之后我设法让它发挥作用。然而，为了能够测试

ClassicEditor

，我必须使用

jsdom

来模拟一些东西（我没有在jsdom模式下测试，我的测试在

node

模式下运行）

global.window.ResizeObserver = jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
}));
global.document = jsdom.window.document;
global.HTMLElement = jsdom.window.HTMLElement;
global.HTMLTextAreaElement = jsdom.window.HTMLTextAreaElement;
global.MutationObserver = jsdom.window.MutationObserver;
global.DOMParser = jsdom.window.DOMParser;
global.Node = jsdom.window.Node;

现在正在工作和编译，仍在插入数据并开始修改 DOM。