Jest 找不到模块，但只有在 Github Actions 上运行时

Question

我的 Github 操作多次失败，之前运行良好，没有新的或修改过的测试，甚至我都没有修改页脚组件，唯一的变化是提供布局的方式，本地一切运行良好。

错误记录如下：

Run npm run test

> lasbrumasapp@0.1.0 test
> jest

"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer
FAIL __tests__/pages/signup.test.tsx
  ● Test suite failed to run

    Cannot find module '../footer/Footer' from 'components/layouts/Layout.tsx'

    Require stack:
      components/layouts/Layout.tsx
      pages/signup.tsx
      __tests__/pages/signup.test.tsx

       6 | const Layout = ({ children }: ChildrenInterface) => {
       7 |   return (
    >  8 |     <>
         |       ^
       9 |       <Navbar />
      10 |       <main>{children}</main>
      11 |       <Footer />

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (components/layouts/Layout.tsx:8:38)

FAIL __tests__/pages/login.test.tsx
  ● Test suite failed to run

    Cannot find module '../footer/Footer' from 'components/layouts/Layout.tsx'

    Require stack:
      components/layouts/Layout.tsx
      pages/login.tsx
      __tests__/pages/login.test.tsx

       6 | const Layout = ({ children }: ChildrenInterface) => {
       7 |   return (
    >  8 |     <>
         |       ^
       9 |       <Navbar />
      10 |       <main>{children}</main>
      11 |       <Footer />

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (components/layouts/Layout.tsx:8:38)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        2.555 s
Ran all test suites.

这是我的 jest.config.js

// jest.config.js
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    '^@/components/(.*)$': '<rootDir>/components/$1',

    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

这是我的项目结构：

这是我的 github 操作 yml：

name: Jest
on: pull_request
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '16.5.0'

      # Speed up subsequent runs with caching
      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-lasbrumas-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      # Install required deps for action
      - name: Install Dependencies
        run: npm install
        working-directory: ./lasbrumas-app

      # Finally, run our tests
      - name: Run the tests
        run: npm run test
        working-directory: ./lasbrumas-app

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

import React, { ReactElement } from 'react';
import { ChildrenInterface } from '../../interfaces/shared/ReactInterfaces';
import Footer from '../footer/Footer';
import { Navbar } from '../navbar/Navbar';

const Layout = ({ children }: ChildrenInterface) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  );
};

export const getLayout = (page: ReactElement) => <Layout>{page}</Layout>;

export default Layout;

Answer 1

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