将 Docusaurus v2 部署到 GitHub 页面时,Travis CI 中未定义笑话

Jest not defined in Travis CI when deploying Docusaurus v2 to GitHub pages

我目前正在 GitHub 页面上设置 Docusaurus v2 站点。我为自己的组件编写了自己的 Jest 和 Enzyme 测试。目前 Jest 被列为 devDependency 而我的 .travis.yml 如下:

# .travis.yml
language: node_js
node_js:
  - '10'
branches:
  only:
    - master
cache:
  npm: true
install:
  npm i
script:
  - git config --global user.name "${GH_NAME}"
  - git config --global user.email "${GH_EMAIL}"
  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
  - npm t && GIT_USER="${GH_NAME}" npm run deploy

我已经更新了我的 package.json 脚本部分以调用相对于 node_modules 的笑话,如下所示:

"test": "cross-env NODE_ENV=test ./node_modules/jest/bin/jest.js --detectOpenHandles"

这在 travis 中运行得非常好,我看到我所有的测试都通过了。我遇到的问题是当它尝试将站点部署到 GitHub 页面时,如 .travis.ymlscripts 部分的最后一行所示:npm t && GIT_USER="${GH_NAME}" npm run deploy。我随后收到以下错误:

ReferenceError: jest is not defined
(undefined) ReferenceError: jest is not defined
    at Module.module.exports.Object.defineProperty.value (main:26124:1)
    at __webpack_require__ (main:21:30)
    at Promise.resolve.then (main:79206:682)
Error: Failed to compile with errors.
    at compiler.run (/home/travis/build/myorg/myrepository/node_modules/@docusaurus/core/lib/commands/build.js:37:24)
    at finalCallback (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:254:12)
    at runWithDependencies.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:277:6)
    at done (/home/travis/build/myorg/myrepository/node_modules/neo-async/async.js:2931:13)
    at runCompilers (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:181:48)
    at err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:188:7)
    at compiler.run (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/MultiCompiler.js:270:7)
    at finalCallback (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/travis/build/myorg/myrepository/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/home/travis/build/myorg/myrepository/node_modules/webpack/lib/Compiler.js:678:31)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-repository@1.0.0 deploy: `docusaurus deploy`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-repository@1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我可能是错的,但我相信这是因为我的测试是作为代码库的一部分部署的,而开玩笑是 devDependency 它在这个阶段不存在;因此 webpack 在我的 *.spec.js 文件中使用时找不到它,即 jest.mock(...)。因此,我认为将 jest 添加为正常依赖项可以解决此问题,尽管您可以理解这既不理想也不是正确的方法。作为参考,我的测试文件不在 __TESTS__ 或任何形式的测试目录中。因为我遵循容器模式,所以我所有的规范文件都与他们正在测试的内容相邻。其中的结构类似这样:

components
  - Header
    - HeaderComponent.js
    - HeaderComponent.spec.js
    - HeaderContainer.js
    - HeaderContainer.spec.js
    - Header.module.css

快速旁注: 并不是我的所有组件都有容器,这要归功于反应钩子,但有一些确实利用了多个状态位、事件处理程序等;在这些情况下,我觉得将它们拆分到一个容器中会更干净。

除了让 jest 成为常规依赖之外,我还有更好的方法来解决这个问题吗?我之后的设置是:

  1. 用户提出拉取请求 & Travis 构建分支(仅通过 PR 进行合并)。
  2. 一旦 PR 进入 master,Travis 就会运行上面的脚本并部署到 Github 个页面。

任何帮助将不胜感激:)

这里是 Docusaurus 维护者!

webpack 提取测试文件很奇怪。您是否将组件放在页面目录中?如果是这样,它可能会导致 Docusaurus 认为测试是页面本身。

你的回购是 public 吗?分享它肯定会有所帮助。 src/pages 内的所有 JS 文件都将成为路由,因此请确保 src/pages 内的所有 JS 文件都可以转换为页面并导出 React 组件。您的 components 目录不在 src/pages 中。它应该在 src/components.