Val Town Code SearchReturn to Val Town

5## Overview
6
7The application uses **Deno** as the test runner with **React Testing Library** for component testing. Tests are written in TypeScript and follow modern testing practices with proper mocking and isolation.
8
9## Quick Start
28
29- **Test Runner**: Deno Test
30- **Component Testing**: React Testing Library
31- **Assertions**: Deno Standard Library Assert
32- **Mocking**: Custom utilities + built-in Deno mocks
50
51```typescript
52/** @jsxImportSource https://esm.sh/react@18.2.0 */
53import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
54import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
55import React from "https://esm.sh/react@18.2.0";
56import { createMockMessage } from "../utils/test-helpers.ts";
57import ComponentToTest from "../../frontend/components/ComponentToTest.tsx";
363### Common Issues
364
3651. **Import Errors**: Ensure React version pinning in imports
3662. **Component Not Rendering**: Check required props
3673. **Async Issues**: Use proper async/await patterns
431
432```typescript
433/** @jsxImportSource https://esm.sh/react@18.2.0 */
434import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
435import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
436import React from "https://esm.sh/react@18.2.0";
437import { createMockMessage } from "../utils/test-helpers.ts";
438import NewComponent from "../../frontend/components/NewComponent.tsx";
454
455- [Deno Testing Documentation](https://deno.land/manual/testing)
456- [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)
457- [Deno Standard Library Assert](https://deno.land/std/assert)
458- [ESM.sh for React Dependencies](https://esm.sh/)
459
460## Contributing

71```typescript
72import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
73import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
74
75Deno.test("Component Name - Test Category", async (t) => {
102The test environment includes:
103
104- **React Testing Library**: For component testing
105- **Deno Standard Library**: For assertions
106- **Mock DOM**: Simulated browser environment
138### Common Issues
139
140- **Import Errors**: Ensure all imports use the correct ESM URLs with React version pinning
141- **Component Not Rendering**: Check that all required props are provided
142- **Mock Issues**: Verify that mocks are properly set up in setup.ts

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { assertEquals, assertExists, assertStringIncludes } from "https://deno.land/std@0.208.0/assert/mod.ts";
3import { render } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
4import { cleanup } from "https://esm.sh/@testing-library/react@14.0.0/cleanup?deps=react@18.2.0,react-dom@18.2.0";
5import React from "https://esm.sh/react@18.2.0";
6import MessageComponent from "../../frontend/components/Message.tsx";
7import type { Message } from "../../frontend/components/App.tsx";

16    "mcp",
17    "chat",
18    "react",
19    "typescript"
20  ],
22  "license": "MIT",
23  "devDependencies": {
24    "@types/react": "^18.2.0",
25    "@types/react-dom": "^18.2.0"
26  },
27  "dependencies": {
28    "react": "^18.2.0",
29    "react-dom": "^18.2.0"
30  }
31}

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1declare module 'react' {
2  export interface ReactElement {
3    type: string | ComponentClass<any>;
4    props: any;
6  }
7
8  export type ReactNode = 
9    | string
10    | number
11    | ReactElement
12    | null
13    | undefined
14    | ReactNode[];
15
16  export interface ComponentProps<T> {
17    children?: ReactNode;
18  }
19
31    type: string | ComponentClass<any>,
32    props?: any,
33    ...children: ReactNode[]
34  ): ReactElement;
35
36  export function useState<S>(initialState: S | (() => S)): [S, (newValue: S) => void];
37
38  export const StrictMode: ComponentClass<{ children?: ReactNode }>;
39
40  export namespace JSX {
49      props: any,
50      key?: string | number
51    ): ReactElement;
52  }
53
56      container: Element | Document | null
57    ): {
58      render(element: ReactElement): void;
59      unmount(): void;
60    };

1import App from './src/App';
2
3const root = window.ReactDOM.createRoot(document.getElementById('root')!);
4root.render(
5  window.React.createElement(window.React.StrictMode, {}, 
6    window.React.createElement(App as typeof window.React.Component, {}, undefined)
7  )
8);

1/**
2 * @jsxImportSource https://esm.sh/react@18.2.0
3 */
4

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.