test(react/runtime): add tests for main thread element

[Yradex]

Summary by CodeRabbit

• Tests
  • Added a comprehensive test suite for the Element class, covering attribute manipulation, style updates, querying child elements, UI method invocation, and flush behavior.
• Chores
  • Updated test coverage settings to more precisely exclude specific files, improving coverage reporting accuracy.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

⚠️ No Changeset found

Latest commit: e4f47ed

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

A new test suite for the Element class API in the react/worklet-runtime package has been introduced, providing comprehensive tests for element manipulation and interaction methods. Additionally, the Vitest configuration has been updated to refine coverage exclusion patterns for specific API files.

Changes

Cohort / File(s)	Change Summary
Element API Test Suite packages/react/worklet-runtime/__test__/api/element.test.js	Adds a new test suite for the Element class, verifying API methods for attribute and style manipulation, querying, and UI invocation.
Vitest Config Update packages/react/worklet-runtime/vitest.config.ts	Updates coverage exclusion to target only two specific API files instead of the entire src/api/** directory.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• fix(react): avoid some unexpected __SetAttribute when attribute value is undefined #1311: Both PRs involve attribute setting in the React runtime; this PR adds tests for the API, while fix(react): avoid some unexpected __SetAttribute when attribute value is undefined #1311 fixes unexpected __SetAttribute calls when attribute values are undefined.
• fix(react): avoid some unexpected __SetAttribute when attribute value is undefined #1318: Both PRs deal with attribute setting in the Element API; this PR adds tests, while fix(react): avoid some unexpected __SetAttribute when attribute value is undefined #1318 fixes issues with undefined attribute values during hydration.

Suggested labels

framework:React

Poem

A rabbit hops with test in tow,
Through Element’s fields it seeks to know—
Attributes set, styles applied,
Selectors queried, errors tried.
With coverage tuned and configs neat,
This code review is quite a treat!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 143e481 and e4f47ed.

📒 Files selected for processing (2)

• packages/react/worklet-runtime/__test__/api/element.test.js (1 hunks)
• packages/react/worklet-runtime/vitest.config.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1238
File: packages/react/runtime/src/debug/component-stack.ts:70-90
Timestamp: 2025-07-18T04:27:18.291Z
Learning: The component-stack.ts file in packages/react/runtime/src/debug/component-stack.ts is a direct fork from https://github.com/preactjs/preact/blob/main/debug/src/component-stack.js. The team prefers to keep it aligned with the upstream Preact version and may contribute improvements back to Preact in the future.

packages/react/worklet-runtime/vitest.config.ts (1)

Learnt from: colinaaa
PR: #1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

🔇 Additional comments (9)

packages/react/worklet-runtime/vitest.config.ts (1)

15-16: LGTM! Targeted coverage exclusions improve test visibility.

The change from excluding the entire src/api/** directory to specifically excluding only lepusQuerySelector.ts and lynxApi.ts allows better coverage visibility for the Element API that's now being tested. This targeted approach ensures coverage metrics include testable API files while still excluding files that likely contain bindings or external dependencies.

packages/react/worklet-runtime/__test__/api/element.test.js (8)

9-30: Excellent test setup and teardown.

The test setup properly isolates each test by:

• Initializing required global state (SystemInfo, worklet)
• Mocking all external runtime functions with appropriate vi.fn() calls
• Using fake timers to control asynchronous flush behavior
• Comprehensive cleanup in afterEach to prevent test pollution

This follows testing best practices for isolated, deterministic tests.

---

33-40: Well-structured test for setAttribute with proper async verification.

The test correctly verifies both the immediate synchronous call to __SetAttribute and the deferred asynchronous call to __FlushElementTree. The pattern of checking that flush is not called immediately, then using vi.runAllTimersAsync() to trigger timers, followed by verifying the flush call is an excellent approach for testing batched operations.

---

42-60: Comprehensive style property testing with good coverage.

The tests effectively cover both single and multiple style property scenarios:

• Single property test validates the basic setStyleProperty functionality
• Multiple properties test ensures proper iteration and individual calls to __AddInlineStyle
• Both maintain consistent async flush verification patterns

The test structure demonstrates thorough coverage of the style API surface.

---

62-76: Solid getter method tests with appropriate expectations.

The getAttribute and getAttributeNames tests properly verify:

• Correct parameters are passed to the underlying global functions
• Return values are correctly propagated from mocked functions
• No flush operations are triggered for read-only operations

The mock setup and assertions are clean and focused.

---

78-105: Thorough querySelector testing with good edge case coverage.

The query selector tests provide excellent coverage:

• querySelector test covers both successful results (Element instance creation) and null returns
• querySelectorAll test verifies proper array handling and multiple Element instance creation
• Correct verification that global functions receive proper parameters including empty options object
• Appropriate type checking with toBeInstanceOf(Element)

The null case handling in querySelector is particularly important for robust API behavior.

---

107-134: Comprehensive invoke method testing with excellent error handling.

The invoke tests provide robust coverage of both success and error scenarios:

Success case:

• Proper callback-style mocking that matches the expected API
• Correct parameter verification including the callback function
• Appropriate use of expect().resolves for async testing

Error case:

• Meaningful error message construction with JSON.stringify
• Proper rejection handling with expect().rejects.toThrow

Both tests correctly verify the flush behavior occurs after method invocation, maintaining consistency with other API methods.

---

136-144: Important batching behavior test ensures performance optimization.

This test verifies a crucial performance optimization where multiple synchronous Element operations are batched into a single flush call. This prevents excessive DOM/UI updates and demonstrates that the Element API implements proper batching behavior.

The test pattern effectively validates that three different operations (setAttribute, setStyleProperty, setStyleProperties) result in only one flush, which is essential for performance in scenarios with multiple rapid Element manipulations.

---

1-145: Exemplary comprehensive test suite for Element API.

This test suite demonstrates excellent testing practices and provides thorough coverage of the Element class API:

Strengths:

• Complete API coverage: Tests all major Element methods (setAttribute, style operations, getters, queries, invoke)
• Consistent patterns: Each test follows similar verification patterns for reliability
• Edge case handling: Includes null returns, error scenarios, and batching behavior
• Performance testing: Verifies batching optimization for multiple operations
• Proper async testing: Correctly handles timer-based flush operations
• Clean test isolation: Excellent setup/teardown preventing test pollution

Technical quality:

• Appropriate use of Vitest mocking and fake timers
• Correct async/await patterns with vi.runAllTimersAsync()
• Meaningful assertions that verify both function calls and return values
• Proper error message testing with JSON serialization

This test suite significantly improves the confidence in the Element API implementation and serves as excellent documentation of expected behavior.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[codspeed-hq]

CodSpeed Performance Report

Merging #1366 will not alter performance

_{Comparing Yradex:mts/run-on-mt/testing (e4f47ed) with main (143e481)}

Summary

✅ 10 untouched benchmarks

[relativeci]

React Example

#3419 Bundle Size — 235.18KiB (0%).

e4f47ed(current) vs 143e481 main#3414(baseline)

Bundle metrics  no changes

	Current #3419	Baseline #3414
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	156	156
Duplicate Modules	63	63
Duplicate Code	45.94%	45.94%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #3419	Baseline #3414
IMG	145.76KiB	145.76KiB
Other	89.42KiB	89.42KiB

Bundle analysis report Branch Yradex:mts/run-on-mt/testing Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#3409 Bundle Size — 352.53KiB (0%).

e4f47ed(current) vs 143e481 main#3404(baseline)

Bundle metrics   1 change

	Current #3409	Baseline #3404
Initial JS	142.12KiB	142.12KiB
Initial CSS	31.83KiB	31.83KiB
Cache Invalidation	0%	86.38%
Chunks	7	7
Assets	7	7
Modules	214(-0.47%)	215
Duplicate Modules	17	17
Duplicate Code	3.94%	3.94%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #3409	Baseline #3404
JS	226.4KiB	226.4KiB
Other	94.29KiB	94.29KiB
CSS	31.83KiB	31.83KiB

Bundle analysis report Branch Yradex:mts/run-on-mt/testing Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}