CODEWITHSUNDEEP
unit-testingpathviteaureliavitest
dbonafin
dbonafin

Reputation: 1

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.

Upvotes: 0

Views: 521

Answers (1)

dbonafin
dbonafin

Reputation: 1

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: {}
      }
    });

Upvotes: 0

Related Questions