CODEWITHSUNDEEP
reactjstypescriptnext.jsvitest
medev21
medev21

Reputation: 3041

Error in vitest config with NextJS13: failed to resolve import

I'm integrating vitest with a NextJS13 app, but running into problems with a simple test run.

vitest run error

Not sure what the problem is, I tried to do some tweaking with the vitest.config.ts but no luck. I tried adding the dir option, modified the include option to grab files from the source file but no luck.

I thought maybe it had to do with the tsconfig.json file, but it's still outputting the error.

This is the directory of the file

src directory

Here are the files in question:

vitest.config.ts

/// <reference types="vitest" />

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    setupFiles: 'setupTests.ts',
    // dir: './src'
    // includeSource: ['src/**/*.{js,ts,tsx}'],
  },
});

tsconfig.json

{
"compilerOptions": {
    "target": "ES2017",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNEXT",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "incremental": true,
    // "paths": {
    //     "src": ["./src/*"]
    // }
},
"exclude": ["node_modules"],
"include": ["vitest.config.ts","**/*.ts", "**/*.tsx", "next-env.d.ts", 
"next.config.js"]
}

DataTable.test.tsx - src/common/components/DataTable/DataTable.test.tsx

// components

import DataTable from 'src/common/components/DataTable';

// dependencies
import {describe, it} from 'vitest'
import {screen, render} from '@testing-library/react'

describe('DataTable test', () => {

    it('render the app', () => {
        // arrange
            render(<DataTable />)
        // act
            const assetText = screen.getByText("asset")
        // assert
            // expect(assetText).toBeInTheDocument()
    })
})

DataTable component - src/common/components/DataTable/DataTable.tsx

export const DataTable = () => {

    return (
        <div>
            <h1>assets</h1>
        </div>
    );
};

Index.tsx - src/common/components/DataTable/index.tsx

import { DataTable } from 'src/common/components/DataTable/DataTable';

export default DataTable;

I'm new to vitest and nextjs, your help/guidance will be appreciated.

Upvotes: 10

Views: 10474

Answers (1)

M. Desjardins
M. Desjardins

Reputation: 1044

There are two things needed here to make the import DataTable from 'src/common/components/DataTable'; import work:

  1. TypeScript needs the paths compilerOption set.
  2. Vite needs to have the same alias set.

The "paths" compilerOption in TypeScript will need a /* on the end of the "src" key to be able to resolve paths underneath the "src" directory (see tsconfig.json reference):

{
  "compilerOptions": {
    "paths": {
      "src/*": ["./src/*"]
    }
  }
}

Vite/Vitest will also need to know how to resolve "src/common/components/DataTable", and that would usually be done with the resolve.alias setting, but rather than duplicating the alias here, you could also use a plugin, like vite-tsconfig-paths, to add the path aliases found in relevant tsconfig.json files:

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default {
  plugins: [tsconfigPaths(), react()],
};

Upvotes: 19

Related Questions