Jest 无法找到模块，但只能在 Github Actions 上运行时找到

Question

我的 Github 操作失败了好几次，之前工作正常，没有新的或修改的测试，甚至我没有修改页脚组件，唯一的变化是布局的服务方式，本地一切运行良好。

\n

错误记录如下：

\n

Run npm run test\n\n> lasbrumasapp@0.1.0 test\n> jest\n\n"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer\nFAIL __tests__/pages/signup.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'../footer/Footer\' from \'components/layouts/Layout.tsx\'\n\n    Require stack:\n      components/layouts/Layout.tsx\n      pages/signup.tsx\n      __tests__/pages/signup.test.tsx\n\n       6 | const Layout = ({ children }: ChildrenInterface) => {\n       7 |   return (\n    >  8 |     <>\n         |       ^\n       9 |       <Navbar />\n      10 |       <main>{children}</main>\n      11 |       <Footer />\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)\n      at Object.<anonymous> (components/layouts/Layout.tsx:8:38)\n\nFAIL __tests__/pages/login.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'../footer/Footer\' from \'components/layouts/Layout.tsx\'\n\n    Require stack:\n      components/layouts/Layout.tsx\n      pages/login.tsx\n      __tests__/pages/login.test.tsx\n\n       6 | const Layout = ({ children }: ChildrenInterface) => {\n       7 |   return (\n    >  8 |     <>\n         |       ^\n       9 |       <Navbar />\n      10 |       <main>{children}</main>\n      11 |       <Footer />\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)\n      at Object.<anonymous> (components/layouts/Layout.tsx:8:38)\n\nTest Suites: 2 failed, 2 total\nTests:       0 total\nSnapshots:   0 total\nTime:        2.555 s\nRan all test suites.\n

\n

这是我的 jest.config.js

\n

// jest.config.js\nconst nextJest = require(\'next/jest\');\n\nconst createJestConfig = nextJest({\n  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment\n  dir: \'./\',\n});\n\n// Add any custom config to be passed to Jest\nconst customJestConfig = {\n  setupFilesAfterEnv: [\'<rootDir>/jest.setup.js\'],\n  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias\' to work\n  moduleNameMapper: {\n    // Handle module aliases (this will be automatically configured for you soon)\n    \'^@/components/(.*)$\': \'<rootDir>/components/$1\',\n\n    \'^@/pages/(.*)$\': \'<rootDir>/pages/$1\',\n  },\n  moduleDirectories: [\'node_modules\', \'<rootDir>/\'],\n  testEnvironment: \'jest-environment-jsdom\',\n};\n\n// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async\nmodule.exports = createJestConfig(customJestConfig);\n\n

\n

这是我的项目结构：

\n

\n

这是我的 github 操作 yml：

\n

name: Jest\non: pull_request\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - name: Setup Node.js\n        uses: actions/setup-node@v1\n        with:\n          node-version: \'16.5.0\'\n\n      # Speed up subsequent runs with caching\n      - name: Cache node modules\n        uses: actions/cache@v2\n        env:\n          cache-name: cache-lasbrumas-node-modules\n        with:\n          # npm cache files are stored in `~/.npm` on Linux/macOS\n          path: ~/.npm\n          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles(\'**/package-lock.json\') }}\n          restore-keys: |\n            ${{ runner.os }}-build-${{ env.cache-name }}-\n            ${{ runner.os }}-build-\n            ${{ runner.os }}-\n\n      # Install required deps for action\n      - name: Install Dependencies\n        run: npm install\n        working-directory: ./lasbrumas-app\n\n      # Finally, run our tests\n      - name: Run the tests\n        run: npm run test\n        working-directory: ./lasbrumas-app\n\n

\n

这也是我的layout.tsx，奇怪的是，导航栏几乎与页脚相同，但这确实以某种方式很好地解决了。

\n

import React, { ReactElement } from \'react\';\nimport { ChildrenInterface } from \'../../interfaces/shared/ReactInterfaces\';\nimport Footer from \'../footer/Footer\';\nimport { Navbar } from \'../navbar/Navbar\';\n\nconst Layout = ({ children }: ChildrenInterface) => {\n  return (\n    <>\n      <Navbar />\n      <main>{children}</main>\n      <Footer />\n    </>\n  );\n};\n\nexport const getLayout = (page: ReactElement) => <Layout>{page}</Layout>;\n\nexport default Layout;\n\n

\n

Answer 1

我遇到了同样的问题，我的根本原因是重命名文件。如果您最近重命名了任何文件，您可能会遇到与我相同的问题。你可以在github上查看文件名，看看字母大小写是否有不同。如果是这样，您可以使用 Git CLI 更正文件名来修复。

如果这是因为重命名，请尝试：

git rm -r --cached . && git add --all .