New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Istanbul Coverage only for changed Files #2385
Changes from 3 commits
3310b8e
3ccce65
25c2793
441da32
f93eae4
7e48be5
63d5136
6207a16
d4aa7d3
3ea8839
77f6e1a
3e23782
9583cc0
4059d5e
efa61e0
c110a85
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
{ | ||
"name": "vitest-coverage", | ||
"type": "module", | ||
"version": "0.0.0", | ||
"private": true, | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "vite build", | ||
"preview": "vite preview", | ||
"test": "vitest --coverage" | ||
}, | ||
"dependencies": { | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@testing-library/react": "^13.4.0", | ||
"@types/react": "^18.0.24", | ||
"@types/react-dom": "^18.0.8", | ||
"@vitejs/plugin-react": "^2.2.0", | ||
"@vitest/coverage-istanbul": "latest", | ||
"@vitest/ui": "latest", | ||
"jsdom": "^20.0.2", | ||
"vite": "latest", | ||
"vitest": "latest" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
#root { | ||
max-width: 1280px; | ||
margin: 0 auto; | ||
padding: 2rem; | ||
text-align: center; | ||
} | ||
|
||
.logo { | ||
height: 6em; | ||
padding: 1.5em; | ||
will-change: filter; | ||
} | ||
.logo:hover { | ||
filter: drop-shadow(0 0 2em #646cffaa); | ||
} | ||
.logo.react:hover { | ||
filter: drop-shadow(0 0 2em #61dafbaa); | ||
} | ||
|
||
@keyframes logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
a:nth-of-type(2) .logo { | ||
animation: logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.card { | ||
padding: 2em; | ||
} | ||
|
||
.read-the-docs { | ||
color: #888; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { useState } from 'react' | ||
import reactLogo from './assets/react.svg' | ||
import './App.css' | ||
|
||
function App() { | ||
const [count, setCount] = useState(0) | ||
|
||
return ( | ||
<div className="App"> | ||
<div> | ||
<a href="https://vitejs.dev" target="_blank"> | ||
<img src="/vite.svg" className="logo" alt="Vite logo" /> | ||
</a> | ||
<a href="https://reactjs.org" target="_blank"> | ||
<img src={reactLogo} className="logo react" alt="React logo" /> | ||
</a> | ||
</div> | ||
<h1>Vite + React</h1> | ||
<div className="card"> | ||
<button onClick={() => setCount((count) => count + 1)}> | ||
count is {count} | ||
</button> | ||
<p> | ||
Edit <code>src/App.jsx</code> and save to test HMR | ||
</p> | ||
</div> | ||
<p className="read-the-docs"> | ||
Click on the Vite and React logos to learn more | ||
</p> | ||
</div> | ||
) | ||
} | ||
|
||
export default App |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { render, screen } from "@testing-library/react"; | ||
import { expect, it } from "vitest"; | ||
import App from "./App"; | ||
|
||
it('should render heading', () => { | ||
render(<App />) | ||
expect(screen.getByRole('heading', {name: /Vite \+ React/})) | ||
const codeElement = screen.getByText(/src\/App.jsx/i); | ||
expect(codeElement).toBeDefined() | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Children, useState } from "react" | ||
|
||
export const Component = ({children}) => { | ||
const [isExpanded, setIsExpanded] = useState(false) | ||
|
||
const handleToggle = () => { | ||
setIsExpanded(prev => !prev) | ||
} | ||
|
||
return <div> | ||
<button onClick={handleToggle}>{isExpanded ? 'Collapse' : 'Expand'}</button> | ||
{isExpanded && children} | ||
</div> | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { render, screen } from "@testing-library/react"; | ||
import { expect, it } from "vitest"; | ||
import { Component } from "./Component"; | ||
|
||
it('should not render content', () => { | ||
render(<Component>Content</Component>) | ||
expect(screen.getByRole('button', {name: /Expand/})) | ||
expect(screen.queryByText(/Content/)).toBeNull() | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
:root { | ||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif; | ||
font-size: 16px; | ||
line-height: 24px; | ||
font-weight: 400; | ||
|
||
color-scheme: light dark; | ||
color: rgba(255, 255, 255, 0.87); | ||
background-color: #242424; | ||
|
||
font-synthesis: none; | ||
text-rendering: optimizeLegibility; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
-webkit-text-size-adjust: 100%; | ||
} | ||
|
||
a { | ||
font-weight: 500; | ||
color: #646cff; | ||
text-decoration: inherit; | ||
} | ||
a:hover { | ||
color: #535bf2; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
display: flex; | ||
place-items: center; | ||
min-width: 320px; | ||
min-height: 100vh; | ||
} | ||
|
||
h1 { | ||
font-size: 3.2em; | ||
line-height: 1.1; | ||
} | ||
|
||
button { | ||
border-radius: 8px; | ||
border: 1px solid transparent; | ||
padding: 0.6em 1.2em; | ||
font-size: 1em; | ||
font-weight: 500; | ||
font-family: inherit; | ||
background-color: #1a1a1a; | ||
cursor: pointer; | ||
transition: border-color 0.25s; | ||
} | ||
button:hover { | ||
border-color: #646cff; | ||
} | ||
button:focus, | ||
button:focus-visible { | ||
outline: 4px auto -webkit-focus-ring-color; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { | ||
:root { | ||
color: #213547; | ||
background-color: #ffffff; | ||
} | ||
a:hover { | ||
color: #747bff; | ||
} | ||
button { | ||
background-color: #f9f9f9; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react' | ||
import ReactDOM from 'react-dom/client' | ||
import App from './App' | ||
import './index.css' | ||
|
||
ReactDOM.createRoot(document.getElementById('root')).render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode> | ||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { defineConfig } from 'vitest/config' | ||
import react from '@vitejs/plugin-react' | ||
|
||
// https://vitejs.dev/config/ | ||
export default defineConfig({ | ||
plugins: [react()], | ||
test: { | ||
coverage: { | ||
provider: 'istanbul', | ||
watchAll: false, | ||
}, | ||
environment: 'jsdom', | ||
}, | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -105,6 +105,11 @@ export class IstanbulCoverageProvider implements CoverageProvider { | |
return map | ||
}, {}) | ||
|
||
if (!this.ctx.isFirstRun && !this.ctx.config.coverage.watchAll && this.ctx.changedTests.size > 0) { | ||
const changedTests = Array.from(this.ctx.changedTests) | ||
mergedCoverage.filter(key => key === changedTests[0].replace('.test', '')) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This assumes that the tested file only imports files with similar names, right? So after you make change to Also making changes to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, this is correct. |
||
} | ||
|
||
if (this.options.all) | ||
await this.includeUntestedFiles(mergedCoverage) | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
changedTests
cannot be used for resolving changed files, as changed tests can import all kinds of files. Instead, if we really want to include only the changed files, we'll need to see if Vite exposes names of the changed files in HMR-api, or something similar.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your feedback. I look into more options for this.