From 970e0f40648a81b9ec1b145cffdcf3db5d7fcdaa Mon Sep 17 00:00:00 2001 From: Vladimir Date: Thu, 3 Oct 2024 14:10:40 +0200 Subject: [PATCH] refactor: remove jsx examples in favour of browser examples (#6630) --- README.md | 2 +- examples/preact/index.html | 12 ------ examples/preact/package.json | 28 ------------- examples/preact/src/App.css | 23 ----------- examples/preact/src/App.test.tsx | 18 --------- examples/preact/src/App.tsx | 39 ------------------- examples/preact/src/hooks/useCount.test.ts | 12 ------ examples/preact/src/hooks/useCount.ts | 10 ----- examples/preact/src/main.css | 13 ------- examples/preact/src/main.tsx | 5 --- examples/preact/test/setup.ts | 5 --- examples/preact/tsconfig.json | 24 ------------ examples/preact/tsconfig.node.json | 9 ----- examples/preact/vite.config.ts | 20 ---------- examples/react/components/Link.tsx | 32 --------------- examples/react/package.json | 26 ------------- examples/react/test/basic.test.tsx | 22 ----------- examples/react/tsconfig.json | 21 ---------- examples/react/vitest.config.ts | 10 ----- examples/react/vitest.setup.ts | 7 ---- examples/solid/components/Hello.jsx | 11 ------ examples/solid/package.json | 19 --------- examples/solid/test/Hello.test.jsx | 28 ------------- .../test/__snapshots__/Hello.test.jsx.snap | 5 --- examples/solid/vite.config.mjs | 28 ------------- 25 files changed, 1 insertion(+), 428 deletions(-) delete mode 100644 examples/preact/index.html delete mode 100644 examples/preact/package.json delete mode 100644 examples/preact/src/App.css delete mode 100644 examples/preact/src/App.test.tsx delete mode 100644 examples/preact/src/App.tsx delete mode 100644 examples/preact/src/hooks/useCount.test.ts delete mode 100644 examples/preact/src/hooks/useCount.ts delete mode 100644 examples/preact/src/main.css delete mode 100644 examples/preact/src/main.tsx delete mode 100644 examples/preact/test/setup.ts delete mode 100644 examples/preact/tsconfig.json delete mode 100644 examples/preact/tsconfig.node.json delete mode 100644 examples/preact/vite.config.ts delete mode 100644 examples/react/components/Link.tsx delete mode 100644 examples/react/package.json delete mode 100644 examples/react/test/basic.test.tsx delete mode 100644 examples/react/tsconfig.json delete mode 100644 examples/react/vitest.config.ts delete mode 100644 examples/react/vitest.setup.ts delete mode 100644 examples/solid/components/Hello.jsx delete mode 100644 examples/solid/package.json delete mode 100644 examples/solid/test/Hello.test.jsx delete mode 100644 examples/solid/test/__snapshots__/Hello.test.jsx.snap delete mode 100644 examples/solid/vite.config.mjs diff --git a/README.md b/README.md index 0d0b20ad2fe4..1779c5f589a5 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ Next generation testing framework powered by Vite. - [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies. - [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking - [Browser Mode](https://vitest.dev/guide/browser/) for running component tests in the browser -- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse), [Marko](https://github.com/marko-js/examples/tree/master/examples/library-ts)) +- Components testing ([Vue](https://github.com/vitest-tests/browser-examples/tree/main/examples/vue), [React](https://github.com/vitest-tests/browser-examples/tree/main/examples/react), [Svelte](https://github.com/vitest-tests/browser-examples/tree/main/examples/svelte), [Lit](./examples/lit), [Marko](https://github.com/marko-js/examples/tree/master/examples/library-ts)) - Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina)) - Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench) - [Workspace](https://vitest.dev/guide/workspace) support diff --git a/examples/preact/index.html b/examples/preact/index.html deleted file mode 100644 index bcfa82c8ed33..000000000000 --- a/examples/preact/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Preact Example - - -
- - - diff --git a/examples/preact/package.json b/examples/preact/package.json deleted file mode 100644 index 1860c7eb9a25..000000000000 --- a/examples/preact/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "@vitest/example-preact-testing-lib", - "type": "module", - "private": true, - "scripts": { - "build": "tsc && vite build", - "coverage": "vitest run --coverage", - "dev": "vite", - "preview": "vite preview", - "test": "vitest", - "test:ui": "vitest --ui" - }, - "dependencies": { - "preact": "^10.21.0", - "react": "npm:@preact/compat", - "react-dom": "npm:@preact/compat", - "react-router-dom": "^6.23.0" - }, - "devDependencies": { - "@preact/preset-vite": "^2.8.2", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/preact": "^3.2.3", - "@vitest/ui": "latest", - "typescript": "^5.4.5", - "vite": "latest", - "vitest": "latest" - } -} diff --git a/examples/preact/src/App.css b/examples/preact/src/App.css deleted file mode 100644 index 8788efeb2ef3..000000000000 --- a/examples/preact/src/App.css +++ /dev/null @@ -1,23 +0,0 @@ -.app { - text-align: center; -} - -.app header { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - background-color: #282c34; - font-size: calc(10px + 2vmin); - color: white; -} - -.app header .app-link { - color: white; - text-decoration: none; -} - -.app header .app-link :hover { - color: #747bff; -} diff --git a/examples/preact/src/App.test.tsx b/examples/preact/src/App.test.tsx deleted file mode 100644 index a0b707113a7f..000000000000 --- a/examples/preact/src/App.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { describe, expect, it } from 'vitest' -import { fireEvent, render, screen } from '@testing-library/preact' -import { BrowserRouter } from 'react-router-dom' - -import App from './App.jsx' - -describe('Preact Demo Test Suite', () => { - it('basic', () => { - render() - expect(screen.getByText(/Hello Vite & Preact!/i)).toBeInTheDocument() - }) - - it('click event', async () => { - render() - fireEvent.click(screen.getByRole('button')) - expect(await screen.findByText(/count is:\s*1/i)).toBeInTheDocument() - }) -}) diff --git a/examples/preact/src/App.tsx b/examples/preact/src/App.tsx deleted file mode 100644 index c0c795ca4357..000000000000 --- a/examples/preact/src/App.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useCount } from './hooks/useCount.js' -import './App.css' - -export default function App() { - const { count, inc } = useCount() - - return ( -
-
-

Hello Vite & Preact!

-

- -

-

- - Learn Preact - - {' | '} - - Vite Docs - -

-
-
- ) -} diff --git a/examples/preact/src/hooks/useCount.test.ts b/examples/preact/src/hooks/useCount.test.ts deleted file mode 100644 index 3731fec11fa3..000000000000 --- a/examples/preact/src/hooks/useCount.test.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { act, renderHook } from '@testing-library/preact' -import { useCount } from './useCount.js' - -describe('useCount hook', () => { - it('should increment', () => { - const { result } = renderHook(() => useCount()) - act(() => { - result.current.inc() - }) - expect(result.current.count).toBe(1) - }) -}) diff --git a/examples/preact/src/hooks/useCount.ts b/examples/preact/src/hooks/useCount.ts deleted file mode 100644 index 4f7ce3977f4a..000000000000 --- a/examples/preact/src/hooks/useCount.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useCallback, useState } from 'preact/hooks' - -export function useCount() { - const [count, setCount] = useState(0) - const inc = useCallback(() => setCount(x => x + 1), []) - return { - count, - inc, - } -} diff --git a/examples/preact/src/main.css b/examples/preact/src/main.css deleted file mode 100644 index ec2585e8c0bb..000000000000 --- a/examples/preact/src/main.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/examples/preact/src/main.tsx b/examples/preact/src/main.tsx deleted file mode 100644 index c59f8206f02e..000000000000 --- a/examples/preact/src/main.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { render } from 'preact' -import App from './App.jsx' -import './main.css' - -render(, document.getElementById('root')!) diff --git a/examples/preact/test/setup.ts b/examples/preact/test/setup.ts deleted file mode 100644 index e791eeef234c..000000000000 --- a/examples/preact/test/setup.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { afterEach } from 'vitest' -import { cleanup } from '@testing-library/preact' -import '@testing-library/jest-dom/vitest' - -afterEach(() => cleanup()) diff --git a/examples/preact/tsconfig.json b/examples/preact/tsconfig.json deleted file mode 100644 index 6dcd36550884..000000000000 --- a/examples/preact/tsconfig.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "compilerOptions": { - "target": "ESNext", - "jsx": "preserve", - "jsxFactory": "h", - "jsxFragmentFactory": "Fragment", - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "useDefineForClassFields": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "types": ["vitest/globals", "@testing-library/jest-dom"], - "allowJs": false, - "strict": true, - "noEmit": true, - "allowSyntheticDefaultImports": true, - "esModuleInterop": false, - "forceConsistentCasingInFileNames": true, - "isolatedModules": true, - "skipLibCheck": true - }, - "references": [{ "path": "./tsconfig.node.json" }], - "include": ["src"] -} diff --git a/examples/preact/tsconfig.node.json b/examples/preact/tsconfig.node.json deleted file mode 100644 index 9b5ccea29006..000000000000 --- a/examples/preact/tsconfig.node.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "module": "Node16", - "moduleResolution": "Node16", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/examples/preact/vite.config.ts b/examples/preact/vite.config.ts deleted file mode 100644 index dcf278a4870c..000000000000 --- a/examples/preact/vite.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -/// -/// - -import { defineConfig } from 'vite' -import preact from '@preact/preset-vite' - -export default defineConfig({ - plugins: [preact()], - resolve: { - // react-router-dom specifies "module" field in package.json for ESM entry - // if it's not mapped, it uses the "main" field which is CommonJS that redirects to CJS preact - mainFields: ['module'], - }, - test: { - globals: true, - environment: 'jsdom', - setupFiles: './test/setup.ts', - css: true, - }, -}) diff --git a/examples/react/components/Link.tsx b/examples/react/components/Link.tsx deleted file mode 100644 index 77d383a75cb9..000000000000 --- a/examples/react/components/Link.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState } from 'react' - -const STATUS = { - HOVERED: 'hovered', - NORMAL: 'normal', -} - -function Link({ page, children }: React.PropsWithChildren<{ page: string }>) { - const [status, setStatus] = useState(STATUS.NORMAL) - - const onMouseEnter = () => { - setStatus(STATUS.HOVERED) - } - - const onMouseLeave = () => { - setStatus(STATUS.NORMAL) - } - - return ( - - {children} - - ) -} - -export default Link diff --git a/examples/react/package.json b/examples/react/package.json deleted file mode 100644 index ce45eecb2570..000000000000 --- a/examples/react/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "@vitest/example-react", - "type": "module", - "private": true, - "scripts": { - "coverage": "vitest run --coverage", - "test": "vitest", - "test:ui": "vitest --ui" - }, - "dependencies": { - "react": "^18.2.0" - }, - "devDependencies": { - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^13.2.0", - "@testing-library/user-event": "^14.5.2", - "@types/react": "^18.2.79", - "@vitest/ui": "latest", - "jsdom": "^24.0.0", - "vite": "latest", - "vitest": "latest" - }, - "stackblitz": { - "startCommand": "npm run test:ui" - } -} diff --git a/examples/react/test/basic.test.tsx b/examples/react/test/basic.test.tsx deleted file mode 100644 index 5561171b764a..000000000000 --- a/examples/react/test/basic.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { expect, test } from 'vitest' -import { render, screen } from '@testing-library/react' -import { userEvent } from '@testing-library/user-event' -import Link from '../components/Link.jsx' - -test('Link changes the state when hovered', async () => { - render( - Anthony Fu, - ) - - const link = screen.getByText('Anthony Fu') - - expect(link).toHaveAccessibleName('Link is normal') - - await userEvent.hover(link) - - await expect.poll(() => link).toHaveAccessibleName('Link is hovered') - - await userEvent.unhover(link) - - await expect.poll(() => link).toHaveAccessibleName('Link is normal') -}) diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json deleted file mode 100644 index a3532251729e..000000000000 --- a/examples/react/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "esnext", - "jsx": "react-jsx", - "lib": ["esnext", "dom"], - "module": "node16", - "moduleResolution": "node16", - "types": ["@testing-library/jest-dom"], - "strict": true, - "declaration": true, - "noEmit": true, - "esModuleInterop": true, - "skipLibCheck": true - }, - "include": [ - "**/*.ts", - "**/*.tsx", - "./vitest.setup.ts" - ], - "exclude": ["node_modules"] -} diff --git a/examples/react/vitest.config.ts b/examples/react/vitest.config.ts deleted file mode 100644 index 8cc1ef4b0e14..000000000000 --- a/examples/react/vitest.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -/// - -import { defineConfig } from 'vite' - -export default defineConfig({ - test: { - environment: 'jsdom', - setupFiles: ['./vitest.setup.ts'], - }, -}) diff --git a/examples/react/vitest.setup.ts b/examples/react/vitest.setup.ts deleted file mode 100644 index e87ca3f0a89f..000000000000 --- a/examples/react/vitest.setup.ts +++ /dev/null @@ -1,7 +0,0 @@ -import '@testing-library/jest-dom/vitest' -import { cleanup } from '@testing-library/react' -import { afterEach } from 'vitest' - -afterEach(() => { - cleanup() -}) diff --git a/examples/solid/components/Hello.jsx b/examples/solid/components/Hello.jsx deleted file mode 100644 index 8a7012beaf35..000000000000 --- a/examples/solid/components/Hello.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSignal } from 'solid-js' - -export function Hello(props) { - const [times, setTimes] = createSignal(2) - return ( - <> -
{`${props.count} x ${times()} = ${props.count * times()}`}
- - - ) -} diff --git a/examples/solid/package.json b/examples/solid/package.json deleted file mode 100644 index dd9313dcc141..000000000000 --- a/examples/solid/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "@vitest/example-solid", - "private": true, - "scripts": { - "test": "vitest", - "coverage": "vitest --coverage" - }, - "dependencies": { - "solid-js": "^1.8.3" - }, - "devDependencies": { - "@solidjs/testing-library": "^0.8.4", - "@testing-library/jest-dom": "^5.16.4", - "jsdom": "latest", - "vite": "latest", - "vite-plugin-solid": "^2.7.2", - "vitest": "latest" - } -} diff --git a/examples/solid/test/Hello.test.jsx b/examples/solid/test/Hello.test.jsx deleted file mode 100644 index 9d1d4f7c210c..000000000000 --- a/examples/solid/test/Hello.test.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import { describe, expect, test } from 'vitest' -import { fireEvent, render } from '@solidjs/testing-library' -// eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports -import { Hello } from '../components/Hello' - -describe('', () => { - test('renders', () => { - const { container, unmount } = render(() => ) - expect(container.innerHTML).toMatchSnapshot() - unmount() - }) - - test('updates', async () => { - const { container, unmount, queryByText } = render(() => ) - const button = queryByText('x1') - const buttonClicked = new Promise((resolve) => { - const handler = (ev) => { - button.removeEventListener('click', handler) - resolve(ev) - } - button.addEventListener('click', handler) - }) - fireEvent.click(button) - await buttonClicked - expect(container.innerHTML).toMatchSnapshot() - unmount() - }) -}) diff --git a/examples/solid/test/__snapshots__/Hello.test.jsx.snap b/examples/solid/test/__snapshots__/Hello.test.jsx.snap deleted file mode 100644 index 2f7d062f3667..000000000000 --- a/examples/solid/test/__snapshots__/Hello.test.jsx.snap +++ /dev/null @@ -1,5 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[` > renders 1`] = `"
4 x 2 = 8
"`; - -exports[` > updates 1`] = `"
4 x 3 = 12
"`; diff --git a/examples/solid/vite.config.mjs b/examples/solid/vite.config.mjs deleted file mode 100644 index 9efeb930f742..000000000000 --- a/examples/solid/vite.config.mjs +++ /dev/null @@ -1,28 +0,0 @@ -/// -/// - -import { defineConfig } from 'vite' -import solid from 'vite-plugin-solid' - -export default defineConfig({ - test: { - environment: 'jsdom', - pool: 'forks', - poolOptions: { - forks: { - isolate: false, - }, - }, - deps: { - optimizer: { - web: { - exclude: ['solid-js'], - }, - }, - }, - }, - plugins: [solid()], - resolve: { - conditions: ['development', 'browser'], - }, -})