Jest 找不到 Docusaurus theme/Layout 模块

Question

我正在使用 Docusaurus 构建文档站点。在其中一个反应插件页面中，我使用 https://docusaurus.io/docs/using-themes

中的 import Layout from '@theme/Layout';

但是，当我编写生产测试时，模块无法被 Jest 拾取。

  ● Test suite failed to run

    Cannot find module '@theme/Layout' from 'src/pages/key-fields-filter.js'

    Require stack:
      src/pages/key-fields-filter.js
      src/pages/key-fields-filter.test.js

       98 | import clsx from 'clsx';
       99 | import styles from './key-fields-filter.module.css';
    > 100 | import Layout from '@theme/Layout';
          | ^
      101 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

我已经设置了 jest.config.js 和 babel.config.js。根据 Docusaurus 文档，@theme 别名指向以下路径：（这里我用的是Layout.js不是Navbar.js，但应该是一样的。）

website
├── node_modules
│   └── docusaurus-theme
│       └── theme
│           └── Navbar.js
└── src
    └── theme
        └── Navbar.js

所以，我设置jest.config.js如下：

moduleDirectories: [
    "node_modules",
    "node_modules/docusaurus-theme/theme",
    "src/theme"
  ],

但是还是不行。任何人都知道 Docusaurus 在这种情况下是如何工作的？我试图从 node_modules 手动 link 到 Layout.js，但我找不到它。我什至不确定 Docusaurus link 最初是如何处理它的。

Answer 1

我只是使用空组件模拟 Layout，因为 Layout 来自 docusaurus，它不需要对我的项目进行测试。

在jest.config.js

moduleNameMapper: {
    ...,
    '@theme/Layout': '<rootDir>/tests/layout-mock.js'
  },

布局中-mock.js

import React from 'react';
export default function Layout(props) {
    return (
        <div>{props.children}</div>
    )
}

Jest 找不到 Docusaurus theme/Layout 模块

Docusaurus theme/Layout module cannot be found by Jest

reactjs

jestjs

docusaurus