aleclarson / vite-tsconfig-paths

Support for TypeScript's path mapping in Vite
MIT License
1.23k stars 44 forks source link

Tests file absolute paths are not being picked up #120

Closed eamonnprwalsh closed 1 year ago

eamonnprwalsh commented 1 year ago

Absolute paths work fine in non test components

eg

HomePage.tsx

import { Link } from 'react-router-dom';
import Feature1 from 'components/common/feature/Feature1';
import HomeFeature from 'components/home/HomeFeature';
import { IHomePage } from './interfaces';

const HomePage = ({ title }: IHomePage) => {
  return (
    <div>
      <h2>{title}</h2>
      <Link to="/results">Go to Results</Link>
      <Feature1 />
      <HomeFeature />
    </div>
  );
};

export default HomePage;

But for some reason they are not getting picked up in test files

eg

//HomePage.test.tsx

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

// THIS GIVES AN ERROR -> Cannot find module 'components/home/HomePage' or its corresponding type declarations.ts(2307)
import HomePage from 'components/home/HomePage';
import { describe, expect } from 'vitest';

describe('renders HomePage component with a link to Results', () => {
  it('should render the results correctly', () => {
    render(
      <MemoryRouter>
        <HomePage />
      </MemoryRouter>
    );

    const linkElement = screen.getByRole('link', { name: /go to results/i });
    expect(linkElement).toBeTruthy();
    expect(linkElement.getAttribute('href')).toBe('/results');
    expect(screen.getByText('Feature 1')).toBeTruthy();
    expect(screen.getByText('Feature 2')).toBeTruthy();
  });
});

Config for reference

vite.config.js

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
  plugins: [react(), viteTsconfigPaths()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/setUpTests.ts',
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowJs": true,
    "baseUrl": "./src",
    "types": ["vitest/globals"],

    /* Bundler mode */
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "alwaysStrict": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
eamonnprwalsh commented 1 year ago

My bad - this line caused it


  "exclude": ["src/**/*.test.tsx", "src/**/*.test.ts"],