import { describe, it, expect, beforeEach, afterEach } from 'vitest'; import * as fs from 'node:fs'; import * as path from 'node:path'; import * as os from 'node:os'; import { CodeGraph } from '../src'; /** * JSX written outside a named function, method or component (#2587): in an * entry file's `createRoot(el).render()`, a top-level * `const ICONS = { a: }`, or a test's `it('…', () => render())`. * A plain call in those places is attributed to the file node or the `const`; * a tag is attributed the same way. */ describe('JSX outside a named function (#2587)', () => { let dir: string; let cg: any; beforeEach(() => { dir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsx-outside-')); fs.writeFileSync(path.join(dir, 'package.json'), '{"dependencies":{"react":"^18.0.0"}}'); }); afterEach(() => { cg?.close?.(); fs.rmSync(dir, { recursive: true, force: true }); }); const write = (rel: string, body: string) => { const p = path.join(dir, rel); fs.mkdirSync(path.dirname(p), { recursive: true }); fs.writeFileSync(p, body); }; /** Every jsx-render edge, as `source kind:name@file -> target name@file`. */ async function renders(): Promise { cg = await CodeGraph.init(dir, { silent: true }); await cg.indexAll(); const db = (cg as any).db.db; return db .prepare( `SELECT s.kind || ':' || s.name || '@' || s.file_path || ' -> ' || t.name || '@' || t.file_path AS e FROM edges e JOIN nodes s ON s.id = e.source JOIN nodes t ON t.id = e.target WHERE json_extract(e.metadata, '$.synthesizedBy') = 'jsx-render' ORDER BY e` ) .all() .map((r: any) => r.e); } const CARD = [ 'export function Card() { return
card
; }', 'export function Icon() { return ; }', 'export function Cell() { return ; }', '', ].join('\n'); it('links a tag at module scope from the file', async () => { write('src/Card.tsx', CARD); write('src/main.tsx', [ 'import { createRoot } from "react-dom/client";', 'import { Card } from "./Card";', 'createRoot(document.getElementById("root")!).render();', '', ].join('\n')); expect(await renders()).toEqual(['file:main.tsx@src/main.tsx -> Card@src/Card.tsx']); }); it('links a tag in a top-level const from the const', async () => { write('src/Card.tsx', CARD); write('src/icons.tsx', [ 'import { Icon } from "./Card";', 'export const ICONS = {', ' a: ,', '};', '', ].join('\n')); const out = await renders(); expect(out).toHaveLength(1); expect(out[0]).toMatch(/^(constant|variable):ICONS@src\/icons\.tsx -> Icon@src\/Card\.tsx$/); }); it('links a tag in a test callback from the file', async () => { write('src/Card.tsx', CARD); write('src/Card.test.tsx', [ 'import { it } from "vitest";', 'import { render } from "@testing-library/react";', 'import { Card } from "./Card";', 'it("renders", () => {', ' render();', '});', '', ].join('\n')); expect(await renders()).toEqual(['file:Card.test.tsx@src/Card.test.tsx -> Card@src/Card.tsx']); }); it('keeps a tag inside a function on that function only', async () => { write('src/Card.tsx', CARD); write('src/Table.tsx', [ 'import { Cell, Card } from "./Card";', 'export const Row = () => ;', 'export function Table() {', ' return ;', '}', 'export const ROWS = [1].map(() => );', '', ].join('\n')); const out = await renders(); expect(out).toContain('function:Table@src/Table.tsx -> Card@src/Card.tsx'); expect(out.filter((e) => e.startsWith('file:'))).toEqual([]); expect(out.filter((e) => e.endsWith('-> Cell@src/Card.tsx'))).toHaveLength(1); expect(out.filter((e) => e.endsWith('-> Card@src/Card.tsx'))).toHaveLength(1); }); it('links an entry whose tags share lines with router routes', async () => { write('src/Card.tsx', CARD); write('src/main.tsx', [ 'import { createRoot } from "react-dom/client";', 'import { BrowserRouter, Routes, Route } from "react-router-dom";', 'import { Card, Icon } from "./Card";', 'createRoot(document.getElementById("root")!).render(', ' ', ' ', ' } />', ' } />', ' ', ' ', ');', '', ].join('\n')); expect(await renders()).toEqual([ 'file:main.tsx@src/main.tsx -> Card@src/Card.tsx', 'file:main.tsx@src/main.tsx -> Icon@src/Card.tsx', ]); }); it('is not shadowed by a parameter of another function, or by its own import', async () => { write('src/Card.tsx', CARD); write('src/Card.test.tsx', [ 'import { it } from "vitest";', 'import { render } from "@testing-library/react";', 'import { Icon, Card, Cell } from "./Card";', 'function wrap(Card: any) { return Card; }', 'it("renders", () => {', ' render();', '});', '', ].join('\n')); expect((await renders()).filter((e) => e.startsWith('file:'))).toEqual([ 'file:Card.test.tsx@src/Card.test.tsx -> Card@src/Card.tsx', ]); }); it('does not link a name a test callback binds itself', async () => { write('src/Card.tsx', CARD); write('src/Card.test.tsx', [ 'import { it, vi } from "vitest";', 'import { render } from "@testing-library/react";', 'it("renders a stub", () => {', ' const Card = vi.fn(() => null);', ' render();', '});', '', ].join('\n')); expect(await renders()).toEqual([]); }); it('gives a line two top-level values share to neither', async () => { write('src/Card.tsx', CARD); write('src/icons.tsx', [ 'import { Icon, Cell } from "./Card";', 'export const a = , b = ;', '', ].join('\n')); expect(await renders()).toEqual([]); }); it('does not credit a value with a statement written after it on its line', async () => { write('src/Card.tsx', CARD); write('src/main.tsx', [ 'import { createRoot } from "react-dom/client";', 'import { Card } from "./Card";', 'const root = createRoot(document.body); root.render();', '', ].join('\n')); expect((await renders()).filter((e) => e.includes(':root@'))).toEqual([]); }); it('links every entry of an icon map keyed by component name', async () => { write('src/Card.tsx', CARD); write('src/icons.tsx', [ 'import { Icon, Cell } from "./Card";', 'export const ICONS = {', ' Icon: ,', ' Cell: ,', '};', '', ].join('\n')); expect((await renders()).map((e) => e.replace(/^\w+:/, ''))).toEqual([ 'ICONS@src/icons.tsx -> Cell@src/Card.tsx', 'ICONS@src/icons.tsx -> Icon@src/Card.tsx', ]); }); it('links a component a test also passes as a value', async () => { write('src/Card.tsx', CARD); write('src/Card.test.tsx', [ 'import { it, expect } from "vitest";', 'import { render } from "@testing-library/react";', 'import { Card } from "./Card";', 'expect(Card).toBeDefined();', 'it("renders", () => render());', '', ].join('\n')); expect(await renders()).toEqual(['file:Card.test.tsx@src/Card.test.tsx -> Card@src/Card.tsx']); }); it.each([ ['a block comment before it', '/* note */ export const A = ;\n'], ['a block comment after it', 'export const A = ; /* x */\n'], ['a line comment and CRLF', 'export const A = ; // the icon\r\n'], ])('keeps a value its own line with %s', async (_label, line) => { write('src/Card.tsx', CARD); write('src/a.tsx', `import { Icon } from "./Card";\n${line}`); expect((await renders()).map((e) => e.replace(/^\w+:/, ''))).toEqual(['A@src/a.tsx -> Icon@src/Card.tsx']); }); it('does not attribute a class field tag to the file', async () => { write('src/Card.tsx', CARD); write('src/Panel.tsx', [ 'import { Icon } from "./Card";', 'export class Panel {', ' static icon = ;', '}', '', ].join('\n')); expect((await renders()).filter((e) => e.startsWith('file:'))).toEqual([]); }); });