├── .github ├── FUNDING.yml └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── examples ├── react-app-ts │ ├── .gitignore │ ├── index.html │ ├── jest.config.js │ ├── jest.setup.js │ ├── package.json │ ├── src │ │ ├── App.css │ │ ├── App.module.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── favicon.svg │ │ ├── index.css │ │ ├── logo.svg │ │ └── main.tsx │ ├── tsconfig.json │ └── vite.config.js ├── react-app-type-module │ ├── .gitignore │ ├── index.html │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.jsx │ │ ├── favicon.svg │ │ ├── index.css │ │ ├── logo.svg │ │ ├── main.jsx │ │ └── setupTests.js │ └── vite.config.js ├── vue-app-ts │ ├── .gitignore │ ├── README.md │ ├── env.d.ts │ ├── index.html │ ├── jest.config.js │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── base.css │ │ │ └── logo.svg │ │ ├── components │ │ │ ├── HelloWorld.vue │ │ │ ├── TheWelcome.vue │ │ │ ├── WelcomeItem.vue │ │ │ ├── __tests__ │ │ │ │ └── HelloWorld.spec.ts │ │ │ └── icons │ │ │ │ ├── IconCommunity.vue │ │ │ │ ├── IconDocumentation.vue │ │ │ │ ├── IconEcosystem.vue │ │ │ │ ├── IconSupport.vue │ │ │ │ └── IconTooling.vue │ │ └── main.ts │ ├── tsconfig.json │ └── vite.config.ts ├── vue-app-type-commonjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── jest.config.js │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── base.css │ │ │ └── logo.svg │ │ ├── components │ │ │ ├── HelloWorld.vue │ │ │ ├── TheWelcome.vue │ │ │ ├── WelcomeItem.vue │ │ │ ├── __tests__ │ │ │ │ └── HelloWorld.spec.mjs │ │ │ └── icons │ │ │ │ ├── IconCommunity.vue │ │ │ │ ├── IconDocumentation.vue │ │ │ │ ├── IconEcosystem.vue │ │ │ │ ├── IconSupport.vue │ │ │ │ └── IconTooling.vue │ │ └── main.js │ └── vite.config.js └── vue-app-type-module │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── jest.config.js │ ├── package.json │ ├── public │ └── favicon.ico │ ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ └── logo.svg │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ ├── __tests__ │ │ │ └── HelloWorld.spec.js │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ └── main.js │ └── vite.config.js ├── packages └── vite-jest │ ├── README.md │ ├── bin │ └── vite-jest.js │ ├── index.js │ ├── jest-preset.js │ ├── package.json │ ├── pathUtils.js │ ├── reporter.cjs │ └── vite-server.js ├── playground ├── alias │ ├── .gitignore │ ├── __tests__ │ │ └── index.spec.js │ ├── dir │ │ └── test.js │ ├── favicon.svg │ ├── index.html │ ├── jest.config.js │ ├── main.js │ ├── package.json │ ├── style.css │ └── vite.config.js └── all-kinds-of-imports │ ├── .gitignore │ ├── __tests__ │ ├── dynamic.spec.js │ ├── env.spec.js │ └── glob.spec.js │ ├── dir │ ├── baz.json │ ├── foo.js │ ├── index.js │ └── nested │ │ └── bar.js │ ├── favicon.svg │ ├── index.html │ ├── jest.config.js │ ├── main.js │ ├── package.json │ └── style.css ├── pnpm-lock.yaml └── pnpm-workspace.yaml /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [sodatea] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: 'ci' 2 | on: 3 | push: 4 | branches: 5 | - '**' 6 | pull_request: 7 | branches: 8 | - main 9 | jobs: 10 | test: 11 | runs-on: ${{ matrix.os }} 12 | strategy: 13 | fail-fast: false 14 | matrix: 15 | os: 16 | - ubuntu-latest 17 | - macos-latest 18 | - windows-latest 19 | node-version: 20 | - 16 21 | include: 22 | - node-version: 14 23 | os: ubuntu-latest 24 | - node-version: 17 25 | os: ubuntu-latest 26 | name: Node ${{ matrix.node-version }} on ${{ matrix.os }} 27 | steps: 28 | - uses: actions/checkout@v1 29 | - uses: pnpm/action-setup@v2.0.1 30 | with: 31 | version: 6 32 | - uses: actions/setup-node@v2 33 | with: 34 | node-version: ${{ matrix.node-version }} 35 | cache: 'pnpm' 36 | - run: pnpm install 37 | - run: pnpm --filter vite-jest run test 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | TODOs.md 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | .pnpm-debug.log 11 | 12 | # Diagnostic reports (https://nodejs.org/api/report.html) 13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 14 | 15 | # Runtime data 16 | pids 17 | *.pid 18 | *.seed 19 | *.pid.lock 20 | 21 | # Directory for instrumented libs generated by jscoverage/JSCover 22 | lib-cov 23 | 24 | # Coverage directory used by tools like istanbul 25 | coverage 26 | *.lcov 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # TypeScript cache 51 | *.tsbuildinfo 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Microbundle cache 60 | .rpt2_cache/ 61 | .rts2_cache_cjs/ 62 | .rts2_cache_es/ 63 | .rts2_cache_umd/ 64 | 65 | # Optional REPL history 66 | .node_repl_history 67 | 68 | # Output of 'npm pack' 69 | *.tgz 70 | 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | # dotenv environment variables file 75 | .env 76 | .env.test 77 | 78 | # parcel-bundler cache (https://parceljs.org/) 79 | .cache 80 | 81 | # Next.js build output 82 | .next 83 | 84 | # Nuxt.js build / generate output 85 | .nuxt 86 | dist 87 | 88 | # Gatsby files 89 | .cache/ 90 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 91 | # https://nextjs.org/blog/next-9-1#public-directory-support 92 | # public 93 | 94 | # vuepress build output 95 | .vuepress/dist 96 | 97 | # Serverless directories 98 | .serverless/ 99 | 100 | # FuseBox cache 101 | .fusebox/ 102 | 103 | # DynamoDB Local files 104 | .dynamodb/ 105 | 106 | # TernJS port file 107 | .tern-port 108 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Haoqun Jiang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vite-jest 2 | 3 | First-class Vite integration for Jest. 4 | 5 | Still work-in-progress, here are some working examples: 6 | 7 | - [Vue 3 + `type: "module"` in `package.json`](./examples/vue-app-type-module/) 8 | - [Vue 3 + `type: "commonjs"` or no `type` field in `package.json`](./examples/vue-app-type-commonjs/) 9 | - Beware that all source and unit test JavaScript files should be named with the `.mjs` extension in this case. 10 | - [Vue 3 + TypeScript](./examples/vue-app-ts/) 11 | - [React + `type: "module"` in `package.json`](./examples/react-app-type-module/) 12 | - Note that `fastRefresh` option of `@vitejs/plugin-react` must be turned off when `process.env.NODE_ENV === 'test'` 13 | - [React + TypeScript](./examples/react-app-ts/) 14 | 15 | Usage: 16 | 17 | 1. Add `preset: 'vite-jest'` to your Jest config. 18 | 2. Replace the `jest` CLI with `vite-jest`. 19 | 20 | See [./packages/vite-jest/README.md](./packages/vite-jest/README.md) for more detailed guidelines and implementation notes. 21 | -------------------------------------------------------------------------------- /examples/react-app-ts/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /examples/react-app-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react-app-ts/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "vite-jest", 3 | 4 | setupFilesAfterEnv: ["/jest.setup.js"], 5 | testMatch: [ 6 | "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", 7 | "/src/**/*.{spec,test}.{js,jsx,ts,tsx}", 8 | ], 9 | testEnvironment: "jest-environment-jsdom", 10 | moduleNameMapper: { 11 | "\\.(css|sass|scss)$": "identity-obj-proxy", 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /examples/react-app-ts/jest.setup.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | require("@testing-library/jest-dom"); 6 | -------------------------------------------------------------------------------- /examples/react-app-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "vite build", 6 | "serve": "vite preview", 7 | "test:unit": "vite-jest --no-cache" 8 | }, 9 | "dependencies": { 10 | "@testing-library/jest-dom": "^5.16.0", 11 | "@testing-library/react": "^11.2.7", 12 | "@testing-library/user-event": "^13.5.0", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^17.0.37", 18 | "@types/react-dom": "^17.0.11", 19 | "@vitejs/plugin-react": "^1.1.0", 20 | "identity-obj-proxy": "^3.0.0", 21 | "jest": "^27.4.3", 22 | "jest-environment-jsdom": "^27.4.3", 23 | "typescript": "^4.5.2", 24 | "vite": "^2.6.14", 25 | "vite-jest": "workspace:*" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | text-align: center; 3 | } 4 | 5 | .app-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .app-logo { 12 | animation: app-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .app-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .app-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes app-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | button { 41 | font-size: calc(10px + 2vmin); 42 | } 43 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/App.module.css: -------------------------------------------------------------------------------- 1 | .app { 2 | text-align: center; 3 | } 4 | 5 | .app-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .app-logo { 12 | animation: app-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .app-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .app-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes app-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | button { 41 | font-size: calc(10px + 2vmin); 42 | } 43 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { render, screen } from '@testing-library/react'; 4 | import App from './App'; 5 | 6 | test('renders learn react link', () => { 7 | render(); 8 | const linkElement = screen.getByText(/learn react/i); 9 | expect(linkElement).toBeInTheDocument(); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import styles from "./App.module.css"; 5 | 6 | const App: React.FC<{ initial?: number }> = ({ initial = 0 }) => { 7 | const [count, setCount] = useState(initial); 8 | 9 | return ( 10 |
11 |
12 | logo 13 |

Hello Vite + React!

14 |

15 | 18 |

19 |

20 | Edit App.tsx and save to test HMR updates. 21 |

22 |

23 | 29 | Learn React 30 | 31 | {" | "} 32 | 38 | Vite Docs 39 | 40 |

41 |
42 |
43 | ); 44 | }; 45 | 46 | export default App; 47 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/react-app-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /examples/react-app-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "react", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | // "esModuleInterop": true, 12 | "lib": ["ESNext", "DOM", "DOM.Iterable"], 13 | "paths": { 14 | "@/*": ["src/*"] 15 | }, 16 | "isolatedModules": true, 17 | "noEmit": true, 18 | "forceConsistentCasingInFileNames": true, 19 | "allowSyntheticDefaultImports": true, 20 | "esModuleInterop": false, 21 | "skipLibCheck": false, 22 | "types": [ 23 | "vite/client", 24 | "jest", 25 | "@types/testing-library__jest-dom", 26 | "@types/react" 27 | ], 28 | "allowJs": false 29 | }, 30 | "include": [ 31 | "src/**/*.ts", 32 | "src/**/*.d.ts", 33 | "src/**/*.tsx", 34 | "tests/**/*.ts", 35 | "tests/**/*.tsx" 36 | , "jest.setup.js" ] 37 | } 38 | -------------------------------------------------------------------------------- /examples/react-app-ts/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react({ 7 | fastRefresh: process.env.NODE_ENV !== 'test' 8 | })], 9 | css: { 10 | modules: { 11 | localsConvention: "camelCaseOnly", 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /examples/react-app-type-module/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /examples/react-app-type-module/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/react-app-type-module/jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | preset: 'vite-jest', 3 | 4 | setupFilesAfterEnv: ['/src/setupTests.js'], 5 | testMatch: [ 6 | '/src/**/__tests__/**/*.{js,jsx,ts,tsx}', 7 | '/src/**/*.{spec,test}.{js,jsx,ts,tsx}', 8 | ], 9 | testEnvironment: 'jest-environment-jsdom' 10 | } 11 | -------------------------------------------------------------------------------- /examples/react-app-type-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "type": "module", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview", 8 | "test:unit": "vite-jest --no-cache" 9 | }, 10 | "dependencies": { 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2" 13 | }, 14 | "devDependencies": { 15 | "@testing-library/jest-dom": "^5.16.0", 16 | "@testing-library/react": "^11.2.7", 17 | "@testing-library/user-event": "^13.5.0", 18 | "@vitejs/plugin-react": "^1.1.0", 19 | "jest": "^27.4.3", 20 | "jest-environment-jsdom": "^27.4.3", 21 | "vite": "^2.6.14", 22 | "vite-jest": "workspace:*" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | button { 41 | font-size: calc(10px + 2vmin); 42 | } 43 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import logo from './logo.svg' 3 | import './App.css' 4 | 5 | function App() { 6 | const [count, setCount] = useState(0) 7 | 8 | return ( 9 |
10 |
11 | logo 12 |

Hello Vite + React!

13 |

14 | 17 |

18 |

19 | Edit App.jsx and save to test HMR updates. 20 |

21 |

22 | 28 | Learn React 29 | 30 | {' | '} 31 | 37 | Vite Docs 38 | 39 |

40 |
41 |
42 | ) 43 | } 44 | 45 | export default App 46 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/App.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { render, screen } from '@testing-library/react'; 4 | import App from './App'; 5 | 6 | test('renders learn react link', () => { 7 | render(); 8 | const linkElement = screen.getByText(/learn react/i); 9 | expect(linkElement).toBeInTheDocument(); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | -------------------------------------------------------------------------------- /examples/react-app-type-module/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /examples/react-app-type-module/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react({ 7 | fastRefresh: process.env.NODE_ENV !== 'test' 8 | })] 9 | }); 10 | -------------------------------------------------------------------------------- /examples/vue-app-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .vscode 21 | !.vscode/extensions.json 22 | .idea 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | -------------------------------------------------------------------------------- /examples/vue-app-ts/README.md: -------------------------------------------------------------------------------- 1 | # vue-app-ts 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). 8 | 9 | ## Type Support for `.vue` Imports in TS 10 | 11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. 12 | 13 | However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette. 14 | 15 | ## Customize configuration 16 | 17 | See [Vite Configuration Reference](https://vitejs.dev/config/). 18 | 19 | ## Project Setup 20 | 21 | ```sh 22 | pnpm install 23 | ``` 24 | 25 | ### Compile and Hot-Reload for Development 26 | 27 | ```sh 28 | pnpm dev 29 | ``` 30 | 31 | ### Type-Check, Compile and Minify for Production 32 | 33 | ```sh 34 | pnpm build 35 | ``` 36 | -------------------------------------------------------------------------------- /examples/vue-app-ts/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /examples/vue-app-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue-app-ts/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'vite-jest', 3 | 4 | testMatch: [ 5 | '**/tests/unit/**/*.spec.ts?(x)', 6 | '**/__tests__/*.ts?(x)' 7 | ], 8 | testEnvironment: 'jest-environment-jsdom' 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue-app-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc --noEmit && vite build", 8 | "preview": "vite preview --port 5050", 9 | "typecheck": "vue-tsc --noEmit", 10 | "test:unit": "vite-jest --no-cache" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.2.22" 14 | }, 15 | "devDependencies": { 16 | "@types/jest": "^27.0.3", 17 | "@types/node": "^16.11.10", 18 | "@vitejs/plugin-vue": "^1.10.0", 19 | "@vitejs/plugin-vue-jsx": "^1.3.0", 20 | "@vue/test-utils": "^2.0.0-rc.17", 21 | "jest": "27.4.3", 22 | "jest-environment-jsdom": "^27.4.3", 23 | "typescript": "~4.5.2", 24 | "vite": "^2.6.14", 25 | "vite-jest": "workspace:*", 26 | "vue-tsc": "^0.29.6" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/vue-app-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoqunjiang/vite-jest/8ecae01deaa7ac5eee56412c89aba7753fa85f5d/examples/vue-app-ts/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue-app-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 19 | 20 | 82 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 42 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 85 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/__tests__/HelloWorld.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from "@vue/test-utils"; 2 | import HelloWorld from "../HelloWorld.vue"; 3 | 4 | test("hellow world", async () => { 5 | const wrapper = mount(HelloWorld, { props: { msg: 'Hello vite-jest' } }) 6 | expect(wrapper.html()).toMatch("Hello vite-jest"); 7 | }); 8 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /examples/vue-app-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /examples/vue-app-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "target": "esnext", 5 | "useDefineForClassFields": true, 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "isolatedModules": true, 9 | "strict": true, 10 | "jsx": "preserve", 11 | "sourceMap": true, 12 | "resolveJsonModule": true, 13 | "esModuleInterop": true, 14 | "paths": { 15 | "@/*": ["src/*"] 16 | }, 17 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"], 18 | "skipLibCheck": true 19 | }, 20 | "include": ["vite.config.*", "env.d.ts", "src/**/*", "src/**/*.vue"] 21 | } 22 | -------------------------------------------------------------------------------- /examples/vue-app-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import vueJsx from '@vitejs/plugin-vue-jsx' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue(), vueJsx()], 10 | resolve: { 11 | alias: { 12 | '@': fileURLToPath(new URL('./src', import.meta.url)) 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .vscode 21 | !.vscode/extensions.json 22 | .idea 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/README.md: -------------------------------------------------------------------------------- 1 | # vue-app-type-commonjs 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | pnpm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | pnpm dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | pnpm build 29 | ``` 30 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'vite-jest', 3 | 4 | testMatch: [ 5 | '**/tests/unit/**/*.spec.(mjs|jsx)', 6 | '**/__tests__/*.(mjs|jsx)' 7 | ], 8 | testEnvironment: 'jest-environment-jsdom' 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.0.0", 4 | "type": "commonjs", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview --port 5050", 10 | "test:unit": "vite-jest --no-cache" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.2.22" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^1.10.0", 17 | "@vitejs/plugin-vue-jsx": "^1.3.0", 18 | "@vue/test-utils": "^2.0.0-rc.17", 19 | "jest": "27.4.3", 20 | "jest-environment-jsdom": "^27.4.3", 21 | "vite": "^2.6.14", 22 | "vite-jest": "workspace:*" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoqunjiang/vite-jest/8ecae01deaa7ac5eee56412c89aba7753fa85f5d/examples/vue-app-type-commonjs/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 19 | 20 | 82 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 45 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 85 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/__tests__/HelloWorld.spec.mjs: -------------------------------------------------------------------------------- 1 | import { mount } from "@vue/test-utils"; 2 | import HelloWorld from "../HelloWorld.vue"; 3 | 4 | test("hellow world", async () => { 5 | const wrapper = mount(HelloWorld, { props: { msg: 'Hello vite-jest' } }) 6 | expect(wrapper.html()).toMatch("Hello vite-jest"); 7 | }); 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /examples/vue-app-type-commonjs/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import vueJsx from '@vitejs/plugin-vue-jsx' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue(), vueJsx()], 10 | resolve: { 11 | alias: { 12 | '@': fileURLToPath(new URL('./src', import.meta.url)) 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | /cypress/videos/ 17 | /cypress/screenshots/ 18 | 19 | # Editor directories and files 20 | .vscode 21 | !.vscode/extensions.json 22 | .idea 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/README.md: -------------------------------------------------------------------------------- 1 | # vue-app-type-module 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur). 8 | 9 | ## Customize configuration 10 | 11 | See [Vite Configuration Reference](https://vitejs.dev/config/). 12 | 13 | ## Project Setup 14 | 15 | ```sh 16 | pnpm install 17 | ``` 18 | 19 | ### Compile and Hot-Reload for Development 20 | 21 | ```sh 22 | pnpm dev 23 | ``` 24 | 25 | ### Compile and Minify for Production 26 | 27 | ```sh 28 | pnpm build 29 | ``` 30 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | preset: 'vite-jest', 3 | 4 | testMatch: [ 5 | '**/tests/unit/**/*.spec.?(m)js?(x)', 6 | '**/__tests__/*.?(m)js?(x)' 7 | ], 8 | testEnvironment: 'jest-environment-jsdom' 9 | } 10 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview --port 5050", 10 | "test:unit": "vite-jest --no-cache" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.2.22" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^1.10.0", 17 | "@vitejs/plugin-vue-jsx": "^1.3.0", 18 | "@vue/test-utils": "^2.0.0-rc.17", 19 | "jest": "27.4.3", 20 | "jest-environment-jsdom": "^27.4.3", 21 | "vite": "^2.6.14", 22 | "vite-jest": "workspace:*" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoqunjiang/vite-jest/8ecae01deaa7ac5eee56412c89aba7753fa85f5d/examples/vue-app-type-module/public/favicon.ico -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 19 | 20 | 82 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dadarkrk-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 45 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 85 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/__tests__/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from "@vue/test-utils"; 2 | import HelloWorld from "../HelloWorld.vue"; 3 | 4 | test("hellow world", async () => { 5 | const wrapper = mount(HelloWorld, { props: { msg: 'Hello vite-jest' } }) 6 | expect(wrapper.html()).toMatch("Hello vite-jest"); 7 | }); 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /examples/vue-app-type-module/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import vueJsx from '@vitejs/plugin-vue-jsx' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue(), vueJsx()], 10 | resolve: { 11 | alias: { 12 | '@': fileURLToPath(new URL('./src', import.meta.url)) 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /packages/vite-jest/README.md: -------------------------------------------------------------------------------- 1 | # vite-jest 2 | 3 | This package comes with a Jest transformer, a Jest reporter, a Jest preset, and a simple CLI wrapper of the `jest` command. 4 | 5 | Usage: 6 | 7 | 1. Add `preset: 'vite-jest'` to your Jest config. 8 | 2. Replace the `jest` CLI with `vite-jest`. 9 | 10 | ## Limitations and Differences with CommonJS tests 11 | 12 | Most are already documented in the official Jest documentation: 13 | 14 | 15 | ### The `jest` Object 16 | 17 | It's not automatically injected into each module. To access it, you must import it from `@jest/globals`: `import { jest } from '@jest/globals'` 18 | 19 | ### Mocking ES Modules 20 | 21 | Jest currently doesn't support jest.mock in a clean way in ESM. 22 | 23 | There's now an experimental API (`jest.unstable_mockModule`) for this, but you must use it in combination with top-level await and dynamic imports: 24 | 25 | ```js 26 | // Note that jest must be explicitly imported 27 | import { jest } from '@jest/globals'; 28 | 29 | const mockPlaySoundFile = jest.fn(); 30 | jest.unstable_mockModule('./sound-player', () => { 31 | return {default: jest.fn().mockImplementation(() => { 32 | return { playSoundFile: mockPlaySoundFile }; 33 | })}; 34 | }); 35 | 36 | // Note that the mocked module must be dynamically imported 37 | const {default: SoundPlayer} = await import('./sound-player'); 38 | const {default: SoundPlayerConsumer} = await import('./sound-player-consumer'); 39 | 40 | beforeEach(() => { 41 | SoundPlayer.mockClear(); 42 | mockPlaySoundFile.mockClear(); 43 | }); 44 | ``` 45 | 46 | Follow [this issue](https://github.com/facebook/jest/issues/10025) for updates. 47 | 48 | ### Doesn't Support Windows (yet) 49 | 50 | We are actively working on that. It may be supported in a patch release. 51 | 52 | ### Coverage Report May be broken 53 | 54 | We are not very sure how to fix this. Any help is appreciated. 55 | 56 | --- 57 | 58 | ## `vite-jest` Internals 59 | 60 | ### The Transformer 61 | 62 | The transformer pass custom file formats such as `.vue`, `.jsx` to vite for transformation. 63 | 64 | It also enables Vite-specific syntax extensions such as `import.meta.glob`, `import.meta.env`, etc. (still work-in-progress) 65 | 66 | Jest doesn't support asynchronous resolver yet (). 67 | Therefore, module paths can't be resolved via the Vite server, making a few Vite-specific paths (such as `/@vite/client` and `/@vite/env`, injected by Vite core plugins) unresolvable. 68 | 69 | So we have to workaround this issue in the transformer, with the help of [`es-module-lexer`](https://www.npmjs.com/package/es-module-lexer) 70 | 71 | Virtual files injected by Vite / Rollup plugins are writtern to the `./node_modules/.vite-jest-cache` directory. 72 | 73 | Note that React fast refresh is not supported at the moment. You need to disable this feature during testing (when `process.env.NODE_ENV === 'test'`). 74 | 75 | ### The Reporter 76 | 77 | Only a Jest reporter can get the signal that all tests are done, so a custom reporter (`'vite-jest/reporter.cjs'`) is also required to correctly shutdown the Vite server after testing. 78 | 79 | ### The Preset 80 | 81 | It helps simplify the configuration process by including most essential options. 82 | 83 | Besides from configuring the transformer and reporter: 84 | 85 | * `.jsx` and `.vue` must be treated as ES module to be processed by an async transformer (that is, the `vite-jest` transformer). 86 | * The Vite cache directory (`node_modules/.vite`) must also be processed by the transformer. 87 | * Assets and style files are stubbed. 88 | 89 | ### The `vite-jest` Command 90 | 91 | * Jest requries the `--experimental-vm-modules` flag of Node.js to be turned on to support ES module transformation. The `vite-jest` command turns it on by default. 92 | * All tests must be run serially, because both Vite and `vite-jest` use caches heavily, paralleriazation may cause race conditions. So `vite-jest` automatically passes a `--runInBand` to the underlying `jest` command. 93 | * A `--no-cache` argument is also passed to fix some edge cases. Since Vite transformation is ususally very fast, the performance penalty of not caching is negligible. 94 | 95 | ## TODOs 96 | 97 | * Better source map 98 | * Clean up the console output 99 | -------------------------------------------------------------------------------- /packages/vite-jest/bin/vite-jest.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import execa from 'execa' 4 | import { createRequire } from 'module' 5 | 6 | const require = createRequire(import.meta.url) 7 | const jestPath = require.resolve('jest/bin/jest') 8 | 9 | const additionalArgs = process.argv.slice(2) 10 | if (!additionalArgs.includes('--runInBand') && !additionalArgs.includes('-i')) { 11 | additionalArgs.push('--runInBand') 12 | } 13 | 14 | if(!additionalArgs.includes('--no-cache')) { 15 | additionalArgs.push('--no-cache') 16 | } 17 | 18 | execa.sync('node', [ 19 | '--experimental-vm-modules', 20 | jestPath, 21 | ...additionalArgs 22 | ], { 23 | stdio: 'inherit' 24 | }) 25 | -------------------------------------------------------------------------------- /packages/vite-jest/index.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | 4 | import { parse } from 'es-module-lexer' 5 | import MagicString from 'magic-string' 6 | 7 | import viteServer from './vite-server.js' 8 | import { 9 | slashOnWindows, 10 | 11 | FS_PREFIX, 12 | fsPathFromId, 13 | 14 | isVirtualFileRequest, 15 | virtualPathToFsPath 16 | } from './pathUtils.js' 17 | 18 | async function processAsync(src, filepath) { 19 | // We need the timestamp because in the case `jest --watch` 20 | // the same vite server instance will be used. 21 | // So we need to make sure we don't use the previous cached result. 22 | const filepathForTransform = `${filepath}?${Date.now()}` 23 | let result = await viteServer.transformRequest(filepathForTransform) 24 | 25 | // not sure if this is reliable 26 | while (viteServer._pendingReload) { 27 | await viteServer._pendingReload 28 | result = await viteServer.transformRequest(filepathForTransform) 29 | } 30 | 31 | if (!result) { 32 | throw new Error(`Failed to load module ${filepath}`) 33 | } 34 | 35 | // The following logic is better to be placed in an async jest resolver 36 | const mStr = new MagicString(result.code) 37 | const [imports] = await parse(result.code) 38 | for (let index = 0; index < imports.length; index++) { 39 | let { 40 | s: start, 41 | e: end, 42 | ss: expStart, 43 | d: dynamicIndex, 44 | n: url 45 | } = imports[index] 46 | 47 | if (!url) { 48 | // will this really happen? 49 | continue 50 | } 51 | 52 | // when parsing dynamic imports, the starting and ending quotes are also included 53 | // note here we don't care about the case where the url is a variable 54 | // because Vite doesn't allow fully-dynamic imports. 55 | // They must be a string. 56 | if (dynamicIndex > -1) { 57 | start += 1 58 | end -= 1 59 | } 60 | 61 | // even though we use a plugin to avoid resolving this module to its actual entry 62 | // vite still adds a `/@id/` prefix 63 | // so we must use `endsWith` instead of `===` 64 | if (url.endsWith('@jest/globals')) { 65 | mStr.overwrite(start, end, '@jest/globals') 66 | continue 67 | } 68 | 69 | if (url.startsWith(FS_PREFIX)) { 70 | mStr.overwrite( 71 | start, 72 | end, 73 | `./${path.posix.relative(path.dirname(filepath), fsPathFromId(url))}` 74 | ) 75 | continue 76 | } 77 | 78 | if (isVirtualFileRequest(url)) { 79 | const virtualFilePath = virtualPathToFsPath(url) 80 | 81 | if (!fs.existsSync(virtualFilePath)) { 82 | const { code } = await viteServer.transformRequest(url.replace(/^\/@id\//, '')) 83 | fs.writeFileSync(virtualFilePath, code) 84 | } 85 | 86 | mStr.overwrite( 87 | start, 88 | end, 89 | `./${path.posix.relative(path.dirname(filepath), virtualFilePath)}` 90 | ) 91 | continue 92 | } 93 | 94 | if (url.startsWith('/')) { 95 | const projectFilePath = slashOnWindows(path.join(viteServer.config.root, url)) 96 | const relativePath = `./${path.posix.relative(path.dirname(filepath), projectFilePath)}` 97 | 98 | mStr.overwrite( 99 | start, 100 | end, 101 | relativePath 102 | ) 103 | continue 104 | } 105 | } 106 | 107 | return { 108 | code: mStr.toString(), 109 | // TODO: use `@cush/sorcery` to merge source map of the magic string 110 | map: result.map 111 | } 112 | } 113 | 114 | export default { 115 | processAsync, 116 | 117 | // It is necessary because we use vite-jest to tranform everything, 118 | // we'll inevitably encounter some CommonJS modules. 119 | process: src => src 120 | } 121 | -------------------------------------------------------------------------------- /packages/vite-jest/jest-preset.js: -------------------------------------------------------------------------------- 1 | import os from 'os' 2 | import { createRequire } from 'module' 3 | 4 | const require = createRequire(import.meta.url) 5 | 6 | const isWindows = os.platform() === 'win32' 7 | const resolveRelative = url => (new URL(url, import.meta.url)).pathname.substr(isWindows ? 1 : 0) 8 | 9 | export default { 10 | moduleFileExtensions: ['js', 'json', 'jsx', 'mjs', 'svelte', 'ts', 'tsx', 'vue'], 11 | extensionsToTreatAsEsm: ['.jsx', '.svelte', '.ts', '.tsx', '.vue'], 12 | 13 | transform: { 14 | "^.+\\.(js|json|jsx|mjs|svelte|ts|tsx|vue)$": resolveRelative('./index.js'), 15 | }, 16 | transformIgnorePatterns: [ 17 | '!/node_modules/\\.vite/', 18 | ], 19 | 20 | moduleNameMapper: { 21 | '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$': 22 | require.resolve('jest-transform-stub'), 23 | }, 24 | 25 | reporters: [ 26 | 'default', 27 | resolveRelative('./reporter.cjs') 28 | ], 29 | } 30 | -------------------------------------------------------------------------------- /packages/vite-jest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-jest", 3 | "version": "0.1.4", 4 | "description": "A Jest transformer that enables first-class Vite integration", 5 | "type": "module", 6 | "exports": { 7 | "./": "./index.js", 8 | "./jest-preset": "./jest-preset.cjs", 9 | "./reporter": "./reporter.cjs" 10 | }, 11 | "bin": "bin/vite-jest.js", 12 | "scripts": { 13 | "test": "pnpm --filter ../../examples --filter ../../playground -r exec -- pnpm run test:unit" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/sodatea/vite-jest.git", 18 | "directory": "packages/vite-jest" 19 | }, 20 | "author": "Haoqun Jiang ", 21 | "license": "MIT", 22 | "peerDependencies": { 23 | "jest": "^27.0.0", 24 | "vite": "^2.4.2" 25 | }, 26 | "devDependencies": { 27 | "jest": "^27.4.3", 28 | "vite": "^2.6.14" 29 | }, 30 | "dependencies": { 31 | "es-module-lexer": "^0.6.0", 32 | "execa": "^5.1.1", 33 | "jest-transform-stub": "^2.0.0", 34 | "magic-string": "^0.25.7", 35 | "slash": "^4.0.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/vite-jest/pathUtils.js: -------------------------------------------------------------------------------- 1 | import os from 'os' 2 | import path from 'path' 3 | 4 | import slash from 'slash' 5 | 6 | import { viteJestCacheDirctory } from './vite-server.js' 7 | 8 | export function isVirtualFileRequest(requestUrl) { 9 | // Rollup plugin internals 10 | if (requestUrl.startsWith('\0')) { 11 | return true 12 | } 13 | 14 | // Vite plugin conventions 15 | if (requestUrl.startsWith('virtual:')) { 16 | return true 17 | } 18 | 19 | // Vite internal 20 | // https://github.com/vitejs/vite/blob/49f28e23cae0ad588fc89374918d3a5e942c5075/packages/vite/src/node/plugins/importAnalysis.ts#L233-L239 21 | if (requestUrl.startsWith('/@id/')) { 22 | return true 23 | } 24 | 25 | // Vite internals 26 | if (requestUrl === '/@vite/client' || requestUrl === '/@vite/env') { 27 | return true 28 | } 29 | 30 | // @vitejs/plugin-vue 31 | if (requestUrl.includes(':')) { 32 | return true 33 | } 34 | 35 | if (requestUrl.startsWith('/@react-refresh')) { 36 | return true 37 | } 38 | 39 | // SvelteKit 40 | if (requestUrl.startsWith('$app/')) { 41 | return true 42 | } 43 | 44 | return false 45 | } 46 | 47 | export function virtualPathToFsPath(virtualPath) { 48 | return path.resolve( 49 | viteJestCacheDirctory, 50 | virtualPath.replace('\0', '__x00__') 51 | .replace(/\//g, '__slash__') 52 | .replace(/\$/g, '__dollar__') 53 | .replace(/\:/g, '__colon__') 54 | + '.js' 55 | ) 56 | } 57 | 58 | 59 | const isWindows = os.platform() === 'win32' 60 | const VOLUME_RE = /^[A-Z]:/i 61 | 62 | export const FS_PREFIX = `/@fs/` 63 | 64 | export const slashOnWindows = path => isWindows ? slash(path) : path 65 | 66 | function normalizePath(id) { 67 | return path.posix.normalize(slashOnWindows(id)) 68 | } 69 | 70 | export function fsPathFromId(id) { 71 | const fsPath = normalizePath(id.slice(FS_PREFIX.length)) 72 | return fsPath.startsWith('/') || fsPath.match(VOLUME_RE) 73 | ? fsPath 74 | : `/${fsPath}` 75 | } 76 | -------------------------------------------------------------------------------- /packages/vite-jest/reporter.cjs: -------------------------------------------------------------------------------- 1 | 2 | module.exports = class MyCustomReporter { 3 | async onRunComplete() { 4 | const viteServer = (await import('./vite-server.js')).default 5 | await viteServer.close() 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/vite-jest/vite-server.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import { createServer } from 'vite' 4 | 5 | const viteServer = await createServer({ 6 | base: '/', 7 | server: { 8 | hmr: false, 9 | middlewareMode: true, 10 | }, 11 | resolve: { 12 | alias: { 13 | // For similar reasons as in https://github.com/cypress-io/cypress/blob/570f91dde3a8bd54fd059e1cfe0f85bab8f1a7cb/npm/vite-dev-server/src/startServer.ts#L35-L37 14 | vue: 'vue/dist/vue.esm-bundler.js', 15 | '@vue/compiler-core': '@vue/compiler-core/dist/compiler-core.cjs.js', 16 | '@vue/test-utils': '@vue/test-utils/dist/vue-test-utils.cjs.js', 17 | } 18 | }, 19 | 20 | // `@jest/globals` must be kept-as-is 21 | // https://github.com/facebook/jest/blob/3093c18c428d962eb959437b322c6a5b0ae0e7a2/packages/jest-runtime/src/index.ts#L544-L554 22 | optimizeDeps: { 23 | exclude: ['@jest/globals'] 24 | }, 25 | plugins: [ 26 | { 27 | resolveId(id) { 28 | if (id === '@jest/globals') { 29 | return id 30 | } 31 | }, 32 | enforce: 'pre' 33 | } 34 | ] 35 | }) 36 | 37 | // A cache directory for virtual modules 38 | const viteJestCacheDirctory = path.resolve(viteServer.config.cacheDir, '../.vite-jest-cache') 39 | if (!fs.existsSync(viteJestCacheDirctory)) { 40 | fs.mkdirSync(viteJestCacheDirctory) 41 | } 42 | fs.writeFileSync(path.join(viteJestCacheDirctory, 'package.json'), JSON.stringify({ type: "module" })) 43 | 44 | 45 | export default viteServer 46 | export { viteJestCacheDirctory } 47 | -------------------------------------------------------------------------------- /playground/alias/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /playground/alias/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | import { msg } from '@/test.js' 2 | 3 | test('should support alias config in vite.config.js', () => { 4 | expect(msg).toBe('success') 5 | }) 6 | -------------------------------------------------------------------------------- /playground/alias/dir/test.js: -------------------------------------------------------------------------------- 1 | export const msg = `success` 2 | -------------------------------------------------------------------------------- /playground/alias/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /playground/alias/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /playground/alias/jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | preset: 'vite-jest', 3 | 4 | testMatch: [ 5 | '**/tests/unit/**/*.spec.?(m)js?(x)', 6 | '**/__tests__/*.?(m)js?(x)' 7 | ], 8 | testEnvironment: 'jest-environment-jsdom' 9 | } 10 | -------------------------------------------------------------------------------- /playground/alias/main.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | 3 | document.querySelector('#app').innerHTML = ` 4 |

Hello Vite!

5 | Documentation 6 | ` 7 | -------------------------------------------------------------------------------- /playground/alias/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alias", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview", 10 | "test:unit": "vite-jest --no-cache" 11 | }, 12 | "devDependencies": { 13 | "jest": "27.4.3", 14 | "jest-environment-jsdom": "^27.4.3", 15 | "vite": "^2.6.14", 16 | "vite-jest": "workspace:*" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /playground/alias/style.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /playground/alias/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'url' 2 | import { defineConfig } from 'vite' 3 | 4 | export default defineConfig({ 5 | resolve: { 6 | alias: { 7 | '@': fileURLToPath(new URL('./dir', import.meta.url)) 8 | } 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/__tests__/dynamic.spec.js: -------------------------------------------------------------------------------- 1 | test('should work with dynamic imports', async () => { 2 | const dynamicImport = await import('./../dir/foo.js'); 3 | expect(dynamicImport.msg).toBe('foo'); 4 | }) 5 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/__tests__/env.spec.js: -------------------------------------------------------------------------------- 1 | test('should correctly inject environment variables', () => { 2 | expect(import.meta.env.BASE_URL).toBe('/') 3 | }) 4 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/__tests__/glob.spec.js: -------------------------------------------------------------------------------- 1 | import { modules } from '../dir/index.js' 2 | 3 | test('should work with glob imports', () => { 4 | expect(modules).toMatchObject({ 5 | './foo.js': { 6 | msg: 'foo' 7 | } 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/dir/baz.json: -------------------------------------------------------------------------------- 1 | { 2 | "msg": "baz" 3 | } 4 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/dir/foo.js: -------------------------------------------------------------------------------- 1 | export const msg = 'foo' 2 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/dir/index.js: -------------------------------------------------------------------------------- 1 | const modules = import.meta.globEager('./*.(js|ts)') 2 | 3 | export { modules } 4 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/dir/nested/bar.js: -------------------------------------------------------------------------------- 1 | const modules = import.meta.globEager('../*.json') 2 | 3 | export const msg = 'bar' 4 | export { modules } 5 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/jest.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | preset: 'vite-jest', 3 | 4 | testMatch: [ 5 | '**/tests/unit/**/*.spec.?(m)js?(x)', 6 | '**/__tests__/*.?(m)js?(x)' 7 | ], 8 | testEnvironment: 'jest-environment-jsdom' 9 | } 10 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/main.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | 3 | document.querySelector('#app').innerHTML = ` 4 |

Hello Vite!

5 | Documentation 6 | ` 7 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "all-kinds-of-imports", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "private": true, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview", 10 | "test:unit": "vite-jest --no-cache" 11 | }, 12 | "devDependencies": { 13 | "jest": "27.4.3", 14 | "jest-environment-jsdom": "^27.4.3", 15 | "vite": "^2.6.14", 16 | "vite-jest": "workspace:*" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /playground/all-kinds-of-imports/style.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'examples/**' 4 | - 'playground/**' 5 | --------------------------------------------------------------------------------