Docusaurus：找不到“@Docusaurus/Router”模块。开玩笑时

Question

我正在尝试为我们的Docusaurus实例设置单元测试。在测试过程中，我无法加载任何Docusaurus模块。另一个用户的@theme/Layout 错误。

但是，当我尝试测试使用@docusaurus/router 的任何组件时，我也会遇到错误。我在代码中使用路由器进行某些页面重定向，因此我需要能够在测试中与之互动。

我敢肯定这是我在设置开玩笑的方式上做错了什么。我怀疑我使用 react-scripts 可能是导致螃蟹的原因。

我能够使用以下步骤来复制此内容：

npx create-docusaurus@latest unit-tests classic --typescript
yarn add @testing-library/react @types/jest jest react-scripts react-dom --dev

将测试脚本添加到 package.json 。

  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "typecheck": "tsc",
    "test": "react-scripts test"
  },

然后添加一个简单的单元测试：

import { render } from '@testing-library/react';
import Home from './index';

describe('<index>', () => {
    it('should', () => {
        render(<Home />);
    });
});

这是我的整个 package.json

{
  "name": "unit-tests",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "typecheck": "tsc",
    "test": "react-scripts test"
  },
  "dependencies": {
    "@docusaurus/core": "2.0.0-beta.18",
    "@docusaurus/preset-classic": "2.0.0-beta.18",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.1.1",
    "prism-react-renderer": "^1.3.1",
    "react": "^17.0.2",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
    "@testing-library/react": "^13.1.1",
    "@tsconfig/docusaurus": "^1.0.5",
    "@types/jest": "^27.4.1",
    "jest": "^27.5.1",
    "react-scripts": "^5.0.1",
    "typescript": "^4.6.3"
  },
  "jest": {
    "coverageReporters": [
      "json",
      "text",
      "lcov"
    ],
    "resetMocks": false
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑 它不是 react-scripts 。我将纱线脚本更改为“ test”：“ jest” ，我立即收到此错误：

  ● Test suite failed to run

    src/pages/index.tsx:3:20 - error TS2307: Cannot find module '@theme/Layout' or its corresponding type declarations.

    3 import Layout from '@theme/Layout';
                         ~~~~~~~~~~~~~~~
    src/pages/index.tsx:4:18 - error TS2307: Cannot find module '@docusaurus/Link' or its corresponding type declarations.

    4 import Link from '@docusaurus/Link';
                       ~~~~~~~~~~~~~~~~~~
    src/pages/index.tsx:5:34 - error TS2307: Cannot find module '@docusaurus/useDocusaurusContext' or its corresponding type declarations.

    5 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    src/pages/index.tsx:6:20 - error TS2307: Cannot find module './index.module.css' or its corresponding type declarations.

    6 import styles from './index.module.css';
                         ~~~~~~~~~~~~~~~~~~~~

Answer 1

我在docusaurus jest configs中找到了一个提示。
使用 modulenamemapper 我们可以将任何模块映射到任何文件，因此我在项目中创建了 Mockusedocusaruscontext 。

在模拟中，您可以导入实际配置并提供它。
尽管我在尝试渲染需要实际上下文的元素时遇到了问题，因此我最终在索引页面的测试用例中使用了浅渲染。

可能有一种方法可以转换导入或其他Jest配置以使其正常工作。

// /jest/mockUseDocusarusContext.ts
import config from "../docusaurus.config.js";

export default function mockDocusaurusContext() {
  return {
    siteConfig: config,
  };
}

// /jest.config.ts
export default {
//<other props>
moduleNameMapper: {
    // Jest can't resolve CSS or asset imports
    '^.+\\.(css|jpe?g|png|svg|webp)
// /src/pages/__tests__/index.test.tsx
import { expect, test } from "@jest/globals";
import React from "react";
import ShallowRenderer from "react-test-renderer/shallow";
import HomepageFeatures from "../../components/HomepageFeatures";
import Index, { HomepageHeader } from "../index";

const renderer = new ShallowRenderer();

test("changes the class when hovered", () => {
  const component = renderer.render(<Index />);
  const result = renderer.getRenderOutput();

  expect(result.props.children).toEqual([
    <HomepageHeader />,
    <main>
      <HomepageFeatures />
    </main>,
  ]);
});

: '<rootDir>/jest/emptyModule.ts',

    '@docusaurus/(use.*)':
    '<rootDir>/jest/mockUseDocusarusContext.ts',

    '@docusaurus/(BrowserOnly|ComponentCreator|constants|ExecutionEnvironment|Head|Interpolate|isInternalUrl|Link|Noop|renderRoutes|router|Translate)':
      '@docusaurus/core/lib',
    '@generated/.*': '<rootDir>/jest/emptyModule.ts',
    '@theme/(.*)': '@docusaurus/theme-classic/lib',
    '@site/(.*)': '<rootDir>/$1',
  },
}