feat(testing-library): add react lynx testing library#74
Merged
colinaaa merged 84 commits intolynx-family:mainfrom Apr 24, 2025
Merged
Conversation
🦋 Changeset detectedLatest commit: aaeff50 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
6d65a48 to
e84b833
Compare
2 tasks
5e04780 to
bc908e7
Compare
bc908e7 to
ea01a2e
Compare
…t-lynx-testing-library
…y-react-lynx-testing-library
…t-lynx-testing-library
BronzonTech-Cloud
approved these changes
Mar 11, 2025
Codecov ReportAttention: Patch coverage is 📢 Thoughts on this report? Let us know! |
…t-lynx-testing-library
…t-lynx-testing-library
hzy
reviewed
Apr 18, 2025
hzy
reviewed
Apr 18, 2025
hzy
reviewed
Apr 18, 2025
hzy
reviewed
Apr 18, 2025
hzy
reviewed
Apr 18, 2025
hzy
reviewed
Apr 18, 2025
c5ade65 to
7aaa756
Compare
hzy
reviewed
Apr 22, 2025
…t-lynx-testing-library
6b0bcec to
f3a2636
Compare
45faebd to
aaeff50
Compare
hzy
approved these changes
Apr 23, 2025
colinaaa
approved these changes
Apr 24, 2025
colinaaa
pushed a commit
that referenced
this pull request
Apr 24, 2025
<!-- Thank you for submitting a pull request! We appreciate the time and effort you have invested in making these changes. Please ensure that you provide enough information to allow others to review your pull request. Upon submission, your pull request will be automatically assigned with reviewers. If you want to learn more about contributing to this project, please visit: https://github.com/lynx-family/lynx-stack/blob/main/CONTRIBUTING.md. --> ## Summary <!-- Can you explain the reasoning behind implementing this change? What problem or issue does this pull request resolve? --> <!-- It would be helpful if you could provide any relevant context, such as GitHub issues or related discussions. --> In this PR, we implemented the ReactLynx Testing Library, a simple and complete ReactLynx unit testing library that encourages good testing practices. We are hugely inspired by [react-testing-library](https://github.com/testing-library/react-testing-library). Example usage: ```js import '@testing-library/jest-dom'; import { test, expect } from 'vitest'; import { render } from '@lynx-js/react/testing-library'; test('renders options.wrapper around node', async () => { const WrapperComponent = ({ children }) => ( <view data-testid='wrapper'>{children}</view> ); const Comp = () => { return <view data-testid='inner' style='background-color: yellow;' />; }; const { container, getByTestId } = render(<Comp />, { wrapper: WrapperComponent, }); expect(getByTestId('wrapper')).toBeInTheDocument(); expect(container.firstChild).toMatchInlineSnapshot(` <view data-testid="wrapper" > <view data-testid="inner" style="background-color: yellow;" /> </view> `); }); ``` ## Checklist <!--- Check and mark with an "x" --> - [x] Tests updated. - [x] Documentation updated. See also lynx-family/lynx-website#117
colinaaa
pushed a commit
that referenced
this pull request
Apr 27, 2025
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/react@0.107.0 ### Minor Changes - Some of the timing keys are renamed to match the naming convention of the Lynx Engine. ([#438](#438)) - `update_set_state_trigger` -> `updateSetStateTrigger` - `update_diff_vdom_start` -> `updateDiffVdomStart` - `update_diff_vdom_end` -> `updateDiffVdomEnd` - `diff_vdom_start` -> `diffVdomStart` - `diff_vdom_end` -> `diffVdomEnd` - `pack_changes_start` -> `packChangesStart` - `pack_changes_end` -> `packChangesEnd` - `parse_changes_start` -> `parseChangesStart` - `parse_changes_end` -> `parseChangesEnd` - `patch_changes_start` -> `patchChangesStart` - `patch_changes_end` -> `patchChangesEnd` - `hydrate_parse_snapshot_start` -> `hydrateParseSnapshotStart` - `hydrate_parse_snapshot_end` -> `hydrateParseSnapshotEnd` - `mts_render_start` -> `mtsRenderStart` - `mts_render_end` -> `mtsRenderEnd` ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Refactor: Improved naming for list operation related types. Renamed `UpdateAction` interface to `ListOperations`. ([#592](#592)) - Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`. ([#545](#545)) ```json { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@lynx-js/react" } } ``` This configuration enhances TypeScript definitions for standard JSX elements, providing type errors for unsupported elements like `<div>` or `<button>`. - fix: JSX elements with dynamic `key={expr}` now wrapped in `wrapper` element to prevent merging. ([#547](#547)) ## @lynx-js/web-elements@0.7.0 ### Minor Changes - fix: ([#629](#629)) - typo of `initial-scroll-offset` in scroll-view. - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`. ### Patch Changes - fix: x-image border-radius setting has no effect. ([#638](#638)) - perf: late evaluate document.font.ready ([#604](#604)) - perf: improve raw-text performance ([#601](#601)) - fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](#635)) Before this, scroll-x of '' would result in no scrolling along x-axis. - feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](#595)) ## @lynx-js/web-mainthread-apis@0.13.0 ### Minor Changes - fix: mts lynx will no longer provide requireModule, requireModuleAsync methods, which is aligned with Native. ([#537](#537)) ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab)]: - @lynx-js/web-constants@0.13.0 ## @lynx-js/rspeedy@0.9.3 ### Patch Changes - Bump Rsbuild v1.3.11 with Rspack v1.3.6. ([#594](#594)) ## create-rspeedy@0.9.3 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) - Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`. ([#545](#545)) ## @lynx-js/qrcode-rsbuild-plugin@0.3.6 ### Patch Changes - Fix the issue where QR code fails to print after initial compilation errors are fixed. ([#610](#610)) ## @lynx-js/react-rsbuild-plugin@0.9.8 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`6a5fc80`](6a5fc80), [`06bb78a`](06bb78a), [`f3afaf6`](f3afaf6), [`bf9c685`](bf9c685), [`5269cab`](5269cab)]: - @lynx-js/react-webpack-plugin@0.6.12 - @lynx-js/web-webpack-plugin@0.6.6 - @lynx-js/template-webpack-plugin@0.6.10 - @lynx-js/react-alias-rsbuild-plugin@0.9.8 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/css-extract-webpack-plugin@0.5.3 ## @lynx-js/react-alias-rsbuild-plugin@0.9.8 ### Patch Changes - Refactor: Replace built-in `background-only` implementation with npm package ([#602](#602)) Previously we maintained custom files: - `empty.ts` for background thread - `error.ts` for main thread validation Now adopting the standard `background-only` npm package ## @lynx-js/test-environment@0.0.1 ### Patch Changes - Add testing library for ReactLynx ([#74](#74)) ## @lynx-js/offscreen-document@0.0.1 ### Patch Changes - feat: support parentNode ([#625](#625)) ## @lynx-js/web-constants@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-core@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-worker-runtime@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/web-explorer@0.0.6 ### Patch Changes - fix: allow lynxjs.org to access native modules ([#599](#599)) ## @lynx-js/web-worker-runtime@0.13.0 ### Patch Changes - refactor: isolate SystemInfo ([#628](#628)) Never assign `SystemInfo` on worker's self object. - feat: support thread strategy `all-on-ui` ([#625](#625)) ```html <lynx-view thread-strategy="all-on-ui"></lynx-view> ``` This will make the lynx's main-thread run on the UA's main thread. Note that the `all-on-ui` does not support the HMR & chunk splitting yet. - refactor: move mainthread impl into mainthread-api packages ([#622](#622)) - Updated dependencies \[[`4ee0465`](4ee0465), [`74b5bd1`](74b5bd1), [`06bb78a`](06bb78a), [`5a3d9af`](5a3d9af), [`5269cab`](5269cab), [`74b5bd1`](74b5bd1), [`2b069f8`](2b069f8)]: - @lynx-js/web-mainthread-apis@0.13.0 - @lynx-js/web-constants@0.13.0 - @lynx-js/offscreen-document@0.0.1 - @lynx-js/web-worker-rpc@0.13.0 ## @lynx-js/react-webpack-plugin@0.6.12 ### Patch Changes - Support @lynx-js/react v0.107.0 ([#438](#438)) ## @lynx-js/template-webpack-plugin@0.6.10 ### Patch Changes - Fix CSS import order when `enableCSSSelector` is false. ([#609](#609)) When the `enableCSSSelector` option is set to false, style rule priority is inversely related to `@import` order(Lynx CSS engine has the incorrect behavior). Reversing the import order to maintain correct priority is required. For example: ```css @import "0.css"; @import "1.css"; ``` will convert to: ```css @import "1.css"; @import "0.css"; ``` ## @lynx-js/web-webpack-plugin@0.6.6 ### Patch Changes - fix(web): `:root` not work on web platform ([#607](#607)) Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin` - fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](#608)) like `.parent > :not([hidden]) ~ :not([hidden])` you will need to upgrade your `react-rsbuild-plugin` to fix this issue ## upgrade-rspeedy@0.9.3 ## @lynx-js/web-worker-rpc@0.13.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In this PR, we implemented the ReactLynx Testing Library, a simple and complete ReactLynx unit testing library that encourages good testing practices. We are hugely inspired by react-testing-library.
Example usage:
Checklist