feat: set up Vitest with React Testing Library and CI/CD pipeline (#5) #6
Conversation
- Add Vitest and React Testing Library dependencies - Create comprehensive test suite with 19 tests (100% coverage) - Configure GitHub Actions workflow for automated testing - Integrate Codecov for coverage tracking - Add test scripts to package.json - Update documentation with testing guide - Add Korean README (README.ko.md)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR introduces comprehensive testing infrastructure and CI/CD automation for the react-head-safe project, including GitHub Actions workflow configuration, Vitest setup with coverage reporting, a test suite for the ReactHeadSafe component, and updated documentation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. ℹ️ You can also turn on project coverage checks and project coverage reporting on Pull Request comment Thanks for integrating Codecov - We've got you covered ☂️ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @.github/workflows/ci.yml:
- Around line 17-20: Update the pinned pnpm version in both "Setup pnpm" steps
to a current stable release: replace the version value (currently 10.5.2) with
10.28.0 in the pnpm/action-setup@v4 step used in the test job and the build job
so both occurrences use the updated pnpm version.
In `@README.md`:
- Around line 134-136: The sentence "This command will run the example project
using your local version of the library, allowing you to test any modifications
you've made before publishing." is misplaced in the Testing section and should
be moved to the end of the Local Development section; cut that sentence from its
current location and insert it immediately after the Local Development example
command block (the pnpm run example snippet) so it directly follows the code
block and precedes the Testing header, ensuring the explanatory line stays with
the related command.
🧹 Nitpick comments (2)
package.json (1)
41-41: Consider removing unusedhappy-domdependency.The
happy-dompackage is listed as a devDependency, butvitest.config.tsconfiguresjsdomas the test environment. Unless there's a planned use case, this dependency appears unused.Proposed fix
- "happy-dom": "^20.1.0",.github/workflows/ci.yml (1)
31-35: Consider consolidating test runs.The workflow runs tests twice:
pnpm test(line 32) andpnpm test:coverage(line 35). Iftest:coverageproduces the same test results with additional coverage output, runningpnpm testseparately is redundant and adds to CI time. Consider removing the first test step and relying solely ontest:coverage.♻️ Suggested optimization
- - name: Run tests - run: pnpm test - - name: Run tests with coverage run: pnpm test:coverage
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
.github/workflows/ci.yml.gitignoreREADME.ko.mdREADME.mdpackage.jsonsrc/test/ReactHeadSafe.test.tsxsrc/test/setup.tsvitest.config.ts
🧰 Additional context used
🪛 ast-grep (0.40.5)
src/test/setup.ts
[warning] 9-9: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: document.head.innerHTML = ''
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html
(dom-content-modification)
🪛 LanguageTool
README.ko.md
[grammar] ~97-~97: Ensure spelling is correct
Context: ...<Meta> 컴포넌트 ## 로컬 개발 예제 애플리케이션으로 로컬 변경사항을 테스트하려면: bash pnpm run example ...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
🔇 Additional comments (15)
.gitignore (1)
7-10: LGTM!The
.gitignoreadditions correctly exclude test coverage artifacts (coverage) and Vitest cache (.vitest), aligning with the new testing infrastructure.README.ko.md (1)
1-144: LGTM!The Korean README is well-structured and provides comprehensive documentation that mirrors the English version. The testing and CI/CD sections accurately reflect the new infrastructure. The static analysis hint about line 97 is a false positive — "애플리케이션으로" is grammatically correct Korean.
src/test/setup.ts (1)
1-12: LGTM!The test setup correctly configures:
- Jest-DOM matchers for enhanced assertions
- React Testing Library cleanup after each test
- DOM head reset to ensure isolation between tests (important for testing head manipulation)
The static analysis XSS warning on line 10 is a false positive — this is test setup code clearing the DOM with a hardcoded empty string, not user-controlled input.
vitest.config.ts (1)
5-29: LGTM!The Vitest configuration is well-structured with appropriate settings:
jsdomenvironment for DOM testingglobals: truefor cleaner test syntax- Sensible coverage exclusions
- React plugin integration
package.json (2)
26-29: LGTM!The test scripts are correctly configured for Vitest:
test- single run for CItest:watch- development workflowtest:coverage- coverage reportingtest:ui- Vitest's interactive UI
35-47: All specified package versions are valid and published on npm. No action required.src/test/ReactHeadSafe.test.tsx (5)
1-11: Well-structured test setup.The test file is well-organized with proper imports and a
beforeEachcleanup that resets the document head state. The AI summary mentions thatsrc/test/setup.tsalso handles cleanup—verify that this doesn't conflict with the manual cleanup here, though having both shouldn't cause issues.
13-32: Comprehensive title tests.Good coverage for document title management: setting, updating, and preserving existing title when prop is undefined.
34-100: Good coverage for meta tags.The description and keywords tests properly verify creation, updates, and duplicate prevention. The use of
letfor reassigningmetaTagafter rerender is appropriate here.
102-163: Thorough Open Graph tag testing.All three OG properties (
og:title,og:description,og:image) are tested for creation and duplicate prevention. Good use of property selectors for OG tags vs name selectors for standard meta tags.
165-246: Good integration and behavior tests.The multiple props test (lines 166-202) validates that all props work together correctly. The "update only changed props" test (lines 204-232) is useful for verifying selective updates. The component behavior tests confirm null rendering and React 17+ compatibility.
.github/workflows/ci.yml (2)
37-44: Codecov configuration looks correct.The Codecov action is properly configured with token from secrets, correct coverage file path for Vitest, and
fail_ci_if_error: falsewhich prevents CI failures due to Codecov issues—a sensible default for non-critical coverage reporting.
46-76: Build job structure is appropriate.The build job correctly depends on the test job and verifies that the
distdirectory is created. The repeated setup steps (checkout, pnpm, node) are expected since GitHub Actions jobs run on separate runners.README.md (2)
3-4: Good addition of language toggle.Adding links for English and Korean README versions improves accessibility for international users.
103-135: Comprehensive testing documentation.The testing section is well-structured with clear command examples, Codecov badge integration, and CI/CD feature highlights. The documentation aligns with the implemented workflow.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| - name: Setup pnpm | ||
| uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: 10.5.2 |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n .github/workflows/ci.yml | head -70Repository: umsungjun/react-head-safe
Length of output: 1968
🌐 Web query:
pnpm latest version January 2026 release
💡 Result:
Latest pnpm (as of Jan 14, 2026) is v10.28.0 — released Jan 12, 2026. [1][2]
Sources:
- pnpm release notes (10.28). [1]
- Chocolatey package listing (shows v10.28.0 uploaded Jan 12, 2026). [2]
Update pnpm to a current version.
The workflow pins pnpm to version 10.5.2, but the latest stable release as of January 2026 is 10.28.0. Update to a recent version to ensure bug fixes and security patches are included.
This applies to both the test job (lines 17-20) and build job (lines 54-57).
🤖 Prompt for AI Agents
In @.github/workflows/ci.yml around lines 17 - 20, Update the pinned pnpm
version in both "Setup pnpm" steps to a current stable release: replace the
version value (currently 10.5.2) with 10.28.0 in the pnpm/action-setup@v4 step
used in the test job and the build job so both occurrences use the updated pnpm
version.
| All tests must pass before a PR can be merged to the main branch. | ||
|
|
||
| This command will run the example project using your local version of the library, allowing you to test any modifications you've made before publishing. |
There was a problem hiding this comment.
Documentation flow issue.
Line 136 ("This command will run the example project...") appears to be a continuation of the "Local Development" section (lines 95-101) but is now separated by the new Testing section. This creates confusion as the reader loses context about which command it refers to.
📝 Suggested fix
Move line 136 to directly follow line 101, before the Testing section:
```bash
pnpm run example+This command will run the example project using your local version of the library, allowing you to test any modifications you've made before publishing.
+
Testing
...
All tests must pass before a PR can be merged to the main branch.
-This command will run the example project using your local version of the library, allowing you to test any modifications you've made before publishing.
License
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
In @README.md around lines 134 - 136, The sentence "This command will run the
example project using your local version of the library, allowing you to test
any modifications you've made before publishing." is misplaced in the Testing
section and should be moved to the end of the Local Development section; cut
that sentence from its current location and insert it immediately after the
Local Development example command block (the pnpm run example snippet) so it
directly follows the code block and precedes the Testing header, ensuring the
explanatory line stays with the related command.
</details>
<!-- fingerprinting:phantom:poseidon:ocelot -->
<!-- This is an auto-generated comment by CodeRabbit -->
Summary by CodeRabbit
Tests
Chores
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.