CODEWITHSUNDEEP
reactjsfrontendvitevitest
Peroman86
Peroman86

Reputation: 81

Vitest not recognizing absolute import

I can't find what I'm doing wrong. I'm getting this error when I'm running vitest test.

It seems that import { Typography, icons } from 'ui-components'; not working for me.

src/tests/integration/layouts/SideBarLayout/UserProfile/UserProfile.test.tsx [ src/tests/integration/layouts/SideBarLayout/UserProfile/UserProfile.test.tsx ]
TypeError: Cannot read properties of undefined (reading 'general')
 ❯ src/ui-components/components/data-display/Table/CellRenderer/ActionCellRenderer.tsx:9:15
      7| 
      8| const iconMap = {
      9|        CREATE: icons.general.CirclePlus,
       |               ^
     10|        DELETE: icons.general.Delete,
     11|        UPDATE: icons.general.Update,
 ❯ async /Users/oleg/Dev/Port/apps/frontend/src/ui-components/components/data-display/Table/CellRenderer/CellRenderer.tsx:16:31
 ❯ async /Users/oleg/Dev/Port/apps/frontend/src/ui-components/components/data-display/Table/Table.tsx:18:31

UserProfile.test.tsx

import { render } from '@testing-library/react';
import UserProfile from 'layouts/SideBarLayout/UserProfile/UserProfile';

describe('UserProfile', () => {
    it('should create a new UserProfile', () => {
        render(<UserProfile displayDescription />);
    });
});

ActionCellRenderer.tsx

import { AuditLogAction } from 'api/types';
import { Typography, icons } from 'ui-components';

interface Props {
    action: AuditLogAction;
}

const iconMap = {
    CREATE: icons.general.CirclePlus,
    DELETE: icons.general.Delete,
    UPDATE: icons.general.Update,
    DEPLOY: icons.general.Delete,
    UPGRADE: icons.general.NewPage,
    ADD_RESOURCE: icons.general.CirclePlus,
};

export default function ActionCellRenderer(props: Props) {
    const Icon = iconMap[props.action];
    return (
        <div className="flex flex-row items-center justify-content gap-1 h-full">
            {Icon && <Icon className="min-w-[20px] min-h-[20px] opacity-inactive" />}
            <Typography variant="reg" emphasis="medium" className="truncate capitalize">
                {props.action?.toLocaleLowerCase()}
            </Typography>
        </div>
    );
}

vite.config.ts

//@ts-nocheck
/// <reference types="vitest" />
/// <reference types="vite/client" />
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        tsconfigPaths(),
        viteCommonjs(),
        svgrPlugin({
            svgrOptions: {
                icon: true,
            },
        }),
    ],
    define: {
        'process.env': {},
    },
    build: {
        sourcemap: false,
    },
    resolve: {
        alias: {
            'tailwind.config.js': path.resolve(__dirname, 'tailwind.config.js'),
        },
    },
    optimizeDeps: {
        include: ['tailwind.config.js'],
    },
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: ['./src/tests/vitest.setup.ts'],
    },
});

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
        "paths": {
            "tailwind.config.js": ["../tailwind.config.js"]
        },
        "types": ["vite-plugin-svgr/client", "vitest/globals"]
  },
  "include": ["./src", "src/tests/vitest.setup.ts"],
    "exclude": ["node_modules"]
}

Upvotes: 8

Views: 7849

Answers (2)

Malin Han&#225;k
Malin Han&#225;k

Reputation: 11

If you are using vite-tsconfig-paths in your vite.config.ts file as a plugin you don't need to add resolve alias unless you really want to I suppose. But for vitest you have to add the same plugin to that config, that solved it for me anyway.

import viteTsconfigPaths from 'vite-tsconfig-paths';
plugins: [viteTsconfigPaths()],

Upvotes: 1

tordans
tordans

Reputation: 33

I had to add the same resolve to my vitest.config.ts that I have in my vite.config.ts (and my tsconfig.json as well).

If anyone finds out how to harmonize those three places, please let me know :-).

My vite.config.ts:

import { defineConfig } from 'vite'
import path from 'path'

/** @type {import('vite').UserConfig} */
export default defineConfig({
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, './src/components/'),
      // …
    },
  },
  //…
})

My vite.config.ts:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, './src/components/'),
      // …
    },
  },
  // …
})

Upvotes: 3

Related Questions