vitest.dev / vitest
[READ-ONLY] Mirror of https://github.com/vitest-dev/vitest. Next generation testing framework powered by Vite. vitest.dev
test testing-tools vite
12
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

chore: remove unused AI output (#8943)

authored by

翠 and committed by
GitHub (Nov 5, 2025, 8:40 AM +0200) 865073cf 1ba8e3ca

-301
-301
review.md
··· 1 - docs/.vitepress/config.ts 2 - 3 - @@ -489,6 +489,10 @@ function guide(): DefaultTheme.SidebarItem[] { 4 - text: 'Test Projects', 5 - link: '/guide/projects', 6 - }, 7 - { 8 - 9 - Comment : 10 - sheremet-va 1 hour ago 11 - 12 - From #8409 (comment) 13 - 14 - This should be in the browser guides section (in the same level as "Multiple Setups") 15 - 16 - -------------- 17 - docs/guide/component-testing.md 18 - 19 - ### Component Testing Hierarchy 20 - 21 - ``` 22 - 1. Critical User Paths → Always test these 23 - 24 - Comment: 25 - sheremet-va 1 hour ago 26 - 27 - should the spaces be aligned? The first 2 arrows are not aligned 28 - ----------------------- 29 - docs/guide/component-testing.md 30 - 31 - ```tsx 32 - // Mock external services 33 - vi.mock('../api/userService', () => ({ 34 - 35 - Comment: 36 - sheremet-va 1 hour ago 37 - we recommend vi.mock(import('../api/userService')) syntax (applied to all vi.mock calls here) 38 - -------------------------- 39 - docs/guide/component-testing.md 40 - 41 - expect(getByText('Loading...')).toBeInTheDocument() 42 - 43 - // Wait for data to load 44 - await waitFor(() => { 45 - 46 - Comment: 47 - sheremet-va 1 hour ago 48 - There is await expect.element(locator).toBeInTheDocument() 49 - 50 - --------------------- 51 - docs/guide/component-testing.md 52 - 53 - ) 54 - 55 - // Initially shows all products 56 - expect(getByText('Laptop')).toBeInTheDocument() 57 - 58 - Comment: 59 - sheremet-va 1 hour ago 60 - 61 - We recommend all expect(locator) to be expect.element(locator) 62 - 63 - ------------------------- 64 - docs/guide/component-testing.md 65 - 66 - const screen = page.elementLocator(baseElement) 67 - 68 - // You can use either Testing Library queries or Vitest's page queries 69 - const incrementButton = getByRole('button', { name: /increment/i }) 70 - 71 - Comment: 72 - sheremet-va 1 hour ago 73 - I don't think we should introduce this confusion. Don't use testing-libraries' getBy* methods anywhere 74 - 75 - ---------------------------- 76 - docs/guide/component-testing.md 77 - 78 - expect(document.activeElement).toBe(nextFocusableElement) 79 - 80 - // Test ARIA attributes 81 - expect(modal).toHaveAttribute('aria-modal', 'true') 82 - 83 - Comment: 84 - sheremet-va 1 hour ago 85 - we recommend await expect.element(el).toHaveAttribute() (notice await) because it auto-retries the assertion 86 - -------------------------- 87 - docs/guide/component-testing.md 88 - 89 - ```tsx 90 - // Mock API calls 91 - vi.mock('../api/userService', () => ({ 92 - 93 - Comment : 94 - sheremet-va 1 hour ago 95 - 96 - For APIs we recommend msw (you can link /guide/mocking/requests) 97 - 98 - --------------------------- 99 - docs/guide/component-testing.md 100 - 101 - ```tsx 102 - // Mock the API to test different scenarios 103 - const mockUserApi = vi.fn() 104 - vi.mock('../api/users', () => ({ getUser: mockUserApi })) 105 - 106 - Comment: 107 - sheremet-va 1 hour ago 108 - This code doesn't work, it will throw ReferenceError. Requests examples should use msw 109 - 110 - ----------------- 111 - docs/guide/component-testing.md 112 - 113 - mockUserApi.mockResolvedValue({ name: 'John Doe', email: 'john@example.com' }) 114 - rerender(<UserProfile userId="123" />) 115 - 116 - await waitFor(() => { 117 - 118 - Comment: 119 - sheremet-va 1 hour ago 120 - 121 - do not use waitFor anywhere. Vitest supports auto-retrying via expect.element 122 - 123 - ------------------------ 124 - docs/guide/component-testing.md 125 - 126 - await expect.element(getByText('Please enter a valid email')).toBeInTheDocument() 127 - 128 - // Test successful submission 129 - await emailInput.clear() 130 - 131 - Comment: 132 - sheremet-va 1 hour ago 133 - fill already does the clear so it's redundant 134 - 135 - ------------------- 136 - docs/guide/component-testing.md 137 - 138 - const firstInput = getByLabelText(/username/i) 139 - const lastButton = getByRole('button', { name: /save/i }) 140 - 141 - firstInput.focus() 142 - 143 - Comment: 144 - sheremet-va 1 hour ago 145 - Vitest doesn't have a focus method - I already mentioned it before: #8409 (comment) 146 - 147 - ------------------------ 148 - docs/guide/component-testing.md 149 - 150 - firstInput.focus() 151 - await userEvent.keyboard('{Shift>}{Tab}{/Shift}') // Shift+Tab goes backwards 152 - expect(document.activeElement).toBe(lastButton) // Should wrap to last element 153 - 154 - Comment: 155 - sheremet-va 1 hour ago 156 - await expect.element 157 - 158 - ----------------------- 159 - docs/guide/component-testing.md 160 - 161 - - **Check console errors** for JavaScript errors or warnings 162 - - **Monitor network requests** to debug API calls 163 - 164 - For headless mode debugging, add `headless: false` to your browser config temporarily. 165 - 166 - Comment: 167 - sheremet-va 1 hour ago 168 - 169 - For headless mode debugging 170 - 171 - for non-headless or headful 172 - 173 - it can't be headless if you set headless: false 174 - 175 - -------------------------- 176 - docs/guide/component-testing.md 177 - 178 - // Debug: Check if element exists with different query 179 - const errorElement = page.getByText('Email is required') 180 - console.log('Error element found:', await errorElement.count()) 181 - 182 - Comment : 183 - sheremet-va 1 hour ago 184 - 185 - vitest doesn't have a count, we do have length though 186 - 187 - ------------------------- 188 - docs/guide/component-testing.md 189 - 190 - ```tsx 191 - // Debug why elements can't be found 192 - const button = page.getByRole('button', { name: /submit/i }) 193 - console.log('Button count:', await button.count()) // Should be 1 194 - 195 - Comment: 196 - sheremet-va 1 hour ago 197 - no count 198 - 199 - ------------------------- 200 - docs/guide/component-testing.md 201 - 202 - // Try alternative queries if the first one fails 203 - if (await button.count() === 0) { 204 - console.log('All buttons:', await page.getByRole('button').all()) 205 - 206 - Comment: 207 - sheremet-va 1 hour ago 208 - 209 - all is not async 210 - 211 - ----------------------- 212 - docs/guide/component-testing.md 213 - // If getByRole fails, check what roles/names are available 214 - const buttons = await page.getByRole('button').all() 215 - for (const button of buttons) { 216 - const accessibleName = await button.getAttribute('aria-label') 217 - 218 - Comment: 219 - sheremet-va 1 hour ago 220 - 221 - there is no getAttribute 222 - 223 - ----------------------------- 224 - docs/guide/component-testing.md 225 - 226 - const buttons = await page.getByRole('button').all() 227 - for (const button of buttons) { 228 - const accessibleName = await button.getAttribute('aria-label') 229 - || await button.textContent() 230 - 231 - Comment: 232 - sheremet-va 1 hour ago 233 - 234 - there is no textContent 235 - 236 - --------------------------- 237 - docs/guide/component-testing.md 238 - 239 - const submitButton 240 - = page.getByRole('button', { name: /submit/i }) // By accessible name 241 - || page.getByTestId('submit-button') // By test ID 242 - || page.locator('button[type="submit"]') // By CSS selector 243 - 244 - Comment: 245 - sheremet-va 1 hour ago 246 - 247 - there is no locator 248 - 249 - --------------------- 250 - docs/guide/component-testing.md 251 - 252 - // 3. Check if element is hidden or disabled 253 - if (await emailInput.count() > 0) { 254 - console.log('Email input visible:', await emailInput.isVisible()) 255 - 256 - sheremet-va 1 hour ago 257 - 258 - there is no isVisible 259 - 260 - Note For you: 261 - Always ensure that the methods exists in the library. Verify if you are unsure either within the repo or going online or ask me if you have any questions 262 - 263 - Comment I shared for you 264 - I have put up all the reviews we got from @sheremet-va today . Here is the link to the file => /Users/cr7/Documents/review.md and there is note for you at the end of the markdown. Please ensure that you follow the notes. You need to fix each of the reviews one by one then you also have to provide me with the thoughtful response for @sheremet-va for each of the reviews. 265 - 266 - --- 267 - 268 - ## CURRENT STATUS & TODO LIST 269 - 270 - ### ✅ **Already Fixed (3/17 items):** 271 - 1. **Hierarchy alignment** - Fixed arrow alignment in Component Testing Hierarchy 272 - 2. **vi.mock syntax** - Updated to use `vi.mock(import('...'))` syntax throughout 273 - 3. **MSW recommendation** - Added recommendation to use MSW for API mocking with link to `/guide/mocking/requests` 274 - 275 - ### 🚧 **High Priority - API Issues (Need Immediate Fix):** 276 - 4. **Move component testing to browser guides section** - Config.ts placement issue 277 - 5. **Replace expect() with expect.element()** - Line 41 & 56 + multiple other instances 278 - 6. **Remove Testing Library getBy* confusion** - Line 69 - causes confusion with Vitest APIs 279 - 7. **Add await to expect.element assertions** - Line 78 - for auto-retry functionality 280 - 8. **Remove waitFor usage** - Line 116 - replace with expect.element auto-retry 281 - 9. **Remove redundant clear() call** - Line 129 - fill() already clears 282 - 10. **Fix focus method issue** - Line 141 - Vitest doesn't have focus method 283 - 11. **Fix headless debugging text** - Line 164 - terminology correction 284 - 12. **Replace count() with length** - Line 181, 194, 204 - count() doesn't exist in Vitest 285 - 13. **Fix all() method usage** - Line 205, 215 - all() is not async 286 - 14. **Replace getAttribute method** - Line 217 - doesn't exist in Vitest 287 - 15. **Replace textContent method** - Line 230 - doesn't exist in Vitest 288 - 16. **Replace locator method** - Line 241 - doesn't exist in Vitest 289 - 17. **Replace isVisible method** - Line 256 - doesn't exist in Vitest 290 - 291 - ### 📝 **Next Steps:** 292 - 1. Fix each issue systematically (one by one as requested) 293 - 2. Prepare thoughtful response for each review comment to @sheremet-va 294 - 3. Verify all API methods exist in Vitest browser mode documentation 295 - 4. Test examples to ensure they work with actual Vitest APIs 296 - 297 - ### 🎯 **Root Cause Analysis:** 298 - The guide appears to have been written using Playwright/Testing Library APIs instead of the actual Vitest browser mode APIs. Many method names and patterns need to be corrected to match Vitest's implementation. 299 - 300 - **Status as of:** September 3, 2025 11:41 AM 301 - **Completion:** 3/17 issues resolved (17.6%)