Closed eamonnprwalsh closed 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
//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" }] }
My bad - this line caused it
"exclude": ["src/**/*.test.tsx", "src/**/*.test.ts"],
Absolute paths work fine in non test components
eg
HomePage.tsx
But for some reason they are not getting picked up in test files
eg
//HomePage.test.tsx
Config for reference
vite.config.js
tsconfig.json