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;
