CODEWITHSUNDEEP
reactjsjestjsnext.js
Marin
Marin

Reputation: 191

how test a component inside the _app from NextJS?

I have a bottomNavigation(footer) being rendered inside my _app from nextJS and the test return me the error: "cannot find module". How do I test this component?

the error:

9 | import '../styles/globals.css' Configuration error:

    Could not locate module ../styles/globals.css mapped as:
    C:\Users\__mocks__\styleMock.js.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^.+\.(css|sass|scss)$/": "C:\Users\__mocks__\styleMock.js"
      },
      "resolver": undefined
    }

MyApp in _app:

<Container sx={{ display: 'flex', justifyContent: 'center' }}>
      <SearchProvider>
        {animation ?
          <Container maxWidth="sm">
            <AnimationWalk />
            <Typography variant="h4">loading...</Typography>
          </Container>
          :
          <Component {...pageProps} />
        }
      </SearchProvider>
// the component that I want to get and test if he is render in all pages \/ //
      <Footer openAnimation={openAnimation} /> 
    </Container>

the test:

 import MyApp from "src/pages/_app";
    
      it("Bottom Navigation", () => {
       const tree = render(MyApp(<MyApp {...props}  />));
       expect(tree).toMatchSnapshot();
  });

jest.config.js:

module.exports = {
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
  ],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    "/\.(css|sass|scss)$/": "identity-obj-proxy",

    // Handle CSS imports (without CSS modules)
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,

    // Handle module aliases
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
  testEnvironment: 'jest-environment-jsdom',
  };

Upvotes: 0

Views: 963

Answers (1)

Shea Hunter Belsky
Shea Hunter Belsky

Reputation: 3218

The way your code is currently written, you are trying to resolve a file at this location: C:\Users\__mocks__\styleMock.js. Jest is complaining that this file doesn't exist (which it probably doesn't, have you checked your filesystem to confirm that it does? It's outside of your project so I doubt that it does.)

Jest documentation has a great section on mocking CSS/SCSS imports:

https://jestjs.io/docs/webpack#mocking-css-modules

Install the identity-obj-proxy package, then add this to your Jest configuration:

{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|sass|scss)$": "identity-obj-proxy"
    }
  }
}

Rerun your tests, and the CSS error should be reoslved.

Upvotes: 1

Related Questions