Jest cannot find module but only when running on Github Actions

My Github actions has failed several times, it was working fine before and there hasn't been new or modified tests, not even have I modified the footer component, the only change has been the way layout is being served, locally everything runs good.

The error is logged as follows:

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.

Here is my 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);

And here is my project structure:

And here is my github action 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

This is also my layout.tsx, weirdly enough navbar is almost the same as Footer, but that does resolve fine somehow.

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;

I had the same issue and my root cause was renaming file. If you rename any files recently, you might have the same issue with me. You can check file name on github to see whether there is any different in letter case. If so you can fix by using Git CLI to correct the file name.

If this is because of renaming then try:

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