Doesn't Recognize "@" in NEXT

[haari006]

I'm using Nextjs and it's not recognizing imports with "@" but if i change to traditional import, it does recognize. Is there any way to define the "@" imports for safetest?

` FAIL src/app/tests/spec.safetest.tsx ● Test suite failed to run

Cannot find module '@/app/server-actions/firebase/profile' from 'src/app/_components/profile/profile-form.tsx'

Require stack:
  src/app/_components/profile/profile-form.tsx      
  src/app/__tests__/spec.safetest.tsx

  3 | import React, { useEffect, useRef, useState } from "react";
  4 | import { UserCircleIcon } from "@heroicons/react/20/solid";
> 5 | import {
    | ^
  6 |   update,
  7 |   userDetails,
  8 |   verifyEmail,

  at Resolver.resolveModule (../../../node_modules/jest-resolve/build/resolver.js:324:11)
  at Object.<anonymous> (src/app/_components/profile/profile-form.tsx:5:1)
  at Object.<anonymous> (src/app/__tests__/spec.safetest.tsx:4:1)
  at TestScheduler.scheduleTests (../../../node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (../../../node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.275 s`

[kolodny]

This is due to the fact that only Next knows how to import the @ imports. SafeTest also runs jest (or vitest) which doesn't know how to import those. You can either change them to traditional imports or you can add this to your package.json and rerun npm install to get a symlink on @

{
  "dependencies": {
    "@": "file:."
  }
}

[Urriel]

Hi @kolodny,

In jest we can specify name mappers like this.

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }

[kolodny]

@Urriel Good point. So digging in a bit more, it seems that just using the setup from the NextJS docs actually takes care of that alias. I updated the NextJS example to have this alias set using Vitest as well as Jest

[haari006]

@kolodny Thanks man