Jest找不到Docusaurus主题/布局模块

Question

我正在使用Docusaurus构建一个文档站点。在一个react插件页面中，我使用了来自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';

我已经和babel.config.js一起设置了jest.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手动链接Layout.js，但我找不到它。我甚至不确定Docusaurus最初是如何链接它的。

Answer 1

我只是使用一个空组件模拟布局，因为布局来自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>
    )
}