unit-testingpathviteaureliavitest

Vitest config - Path import error - Does the file exist?


I have a trouble in a repo where I'm using Aurelia and Vitest. The structure is like this:

project-root
│
├── src
│   ├── services
│   │   └── api.js
│   │   └── auth.js
│   ├── views
│   │   └── messages
│   │       ├── messages.js
│   │       └── messages.test.js
│
├── vite.config.ts
├── vitest.config.ts
├── vitest.setup.ts
├── package.json
└── node_modules

messages.js:

import { activationStrategy } from 'aurelia-router';
import { I18N } from 'aurelia-i18n';
import { Api, Auth } from 'services/api';
import { User } from 'services/user';
import { KaDialog } from 'ka-components';

export class VMMessages {
  endpoint = 'messages';

  static inject = [I18N, Api, Auth, User, KaDialog];
  constructor(i18n, api, auth, user, dialog) {
    this.i18n = i18n;
    this.api = api;
    this.auth = auth;
    this.user = user;
    this.dialog = dialog;
  }
}

messages.test.js:

import { beforeAll, describe, it, expect, vi } from 'vitest';
import { VMMessages } from './messages';

const messages = new VMMessages({}, {}, {}, {}, {});

it('should return a string', () => {
  expect(true).toBe(true);
});

vite.config.js:

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

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'services': path.resolve(__dirname, 'src/services')
    },
  },
  server: {
    port: 3903
  },
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

vitest.config.js:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: 'vitest.setup.js',
    environment: 'jsdom',
    reporters: ['verbose'],
  }
});

vitest.setup.js:

import { resolve } from 'path';
import * as dotenv from 'dotenv';
global.ENVIRONMENT = dotenv.config({
  debug: true,
  processEnv: global.ENVIRONMENT,
  path: resolve(__dirname, `./src/environments/test.env`)
});

Now, when i try to run the tests, i receive this error: Failed to resolve import "services/api" from "src/views/messages/messages.js". Does the file exist?

Everything seems correct so I have no clue why its not working, suggestions? What am I missing? Obviously what I expect to happen is that vitest imports correctly the view model (with his dependencies) that I wanna test and have no failed errors.


Solution

  • Problem solved after some hours of troubleshooting. Main 3 fixes:

    1. Remove vite.config.js, the project doesn't need it - webpack present.

    1. vitest.config.js needs this:

        alias: {
          services: path.resolve(__dirname, './src/services')
        }
    

    Instead of this:

        alias: {
          '@': path.resolve(__dirname, 'src'),
          'services': path.resolve(__dirname, 'src/services')
        }
    
    1. In messages.test.js I have to mock all the dependencies:

        vi.mock('services/api', () => {
          return {
            Api: class {},
            Auth: class {}
          }
        });
        vi.mock('services/user', () => {
          return {
            User: class {}
          }
        });
        vi.mock("aurelia-i18n", () => {
          return {
            I18N: {}
          }
        });
        vi.mock("ka-components", () => {
          return {
            KaDialog: {}
          }
        });