From d26e8cada5890fe06e61f4394811b186f38d6715 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <Bernardo.belchior1@gmail.com>
Date: Wed, 2 Apr 2025 18:13:59 +0100
Subject: [PATCH 1/8] Update docs with `reactStrictMode` in `render` (#1479)

---
 docs/react-testing-library/api.mdx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx
index 06149fed6..449c76f52 100644
--- a/docs/react-testing-library/api.mdx
+++ b/docs/react-testing-library/api.mdx
@@ -16,6 +16,7 @@ as these methods:
   - [`onRecoverableError`](#onrecoverableerror)
   - [`wrapper`](#wrapper)
   - [`queries`](#queries)
+  - [`reactStrictMode`](#render-options-reactstrictmode)
 - [`render` Result](#render-result)
   - [`...queries`](#queries-1)
   - [`container`](#container-1)
@@ -31,7 +32,8 @@ as these methods:
   - [`initialProps`](#initialprops)
   - [`onCaughtError`](#oncaughterror)
   - [`onRecoverableError`](#onrecoverableerror)
-  - [`wrapper`](#wrapper-1)
+  - [`wrapper`](#renderhook-options-wrapper)
+  - [`reactStrictMode`](#renderhook-options-reactstrictmode)
 - [`renderHook` Result](#renderhook-result)
   - [`result`](#result)
   - [`rerender`](#rerender-1)
@@ -161,6 +163,11 @@ utility functions to create custom queries.
 Custom queries can also be added globally by following the
 [custom render guide](setup.mdx#custom-render).
 
+### `render` Options `reactStrictMode`
+
+When enabled, [`<StrictMode>`](https://react.dev/reference/react/StrictMode) is rendered around the inner element.
+If defined, overrides the value of `reactStrictMode` set in [`configure`](https://testing-library.com/docs/react-testing-library/api/#configure-options).
+
 ## `render` Result
 
 The `render` method returns an object that has a few properties:
@@ -431,6 +438,11 @@ Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https:
 
 See [`wrapper` option for `render`](#wrapper)
 
+
+### `renderHook` Options `reactStrictMode`
+
+See [`reactStrictMode` option for `render`](#render-options-reactstrictmode)
+
 ## `renderHook` Result
 
 The `renderHook` method returns an object that has a few properties:
@@ -503,3 +515,5 @@ configure({reactStrictMode: true})
 
 When enabled, [`<StrictMode>`](https://react.dev/reference/react/StrictMode) is
 rendered around the inner element. Defaults to `false`.
+
+This setting can be changed for a single test by providing `reactStrictMode` in the options argument of the [`render`](#render-options-reactstrictmode) function. 
\ No newline at end of file

From 1b9e3966c7092a941d5faaadce5d3e1302b76f6b Mon Sep 17 00:00:00 2001
From: Alexander Burdiss <aburdiss@icloud.com>
Date: Fri, 2 May 2025 10:44:16 -0400
Subject: [PATCH 2/8] docs: Add TypeScript Examples to vue-testing-library
 (#1463)

---
 docs/vue-testing-library/examples.mdx | 114 ++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)

diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx
index 8fc574328..e52eba3bc 100644
--- a/docs/vue-testing-library/examples.mdx
+++ b/docs/vue-testing-library/examples.mdx
@@ -3,8 +3,16 @@ id: examples
 title: Example
 ---
 
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
 ## Basic example
 
+<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
+  value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
+
+  <TabItem value="js">
+
 ```html
 <template>
   <div>
@@ -50,8 +58,66 @@ test('increments value on click', async () => {
 })
 ```
 
+  </TabItem>
+
+  <TabItem value="ts">
+
+```html
+<template>
+  <div>
+    <p>Times clicked: {{ count }}</p>
+    <button @click="increment">increment</button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    data: (): {count: number} => ({
+      count: 0,
+    }),
+
+    methods: {
+      increment(): void {
+        this.count++
+      },
+    },
+  }
+</script>
+```
+
+```ts
+import {render, fireEvent, screen} from '@testing-library/vue'
+import Component from './Component.vue'
+
+test('increments value on click', async () => {
+  render(Component)
+
+  // screen has all queries that you can use in your tests.
+  // getByText returns the first matching node for the provided text, and
+  // throws an error if no elements match or if more than one match is found.
+  screen.getByText('Times clicked: 0')
+
+  const button = screen.getByText('increment')
+
+  // Dispatch a native click event to our button element.
+  await fireEvent.click(button)
+  await fireEvent.click(button)
+
+  screen.getByText('Times clicked: 2')
+})
+```
+
+  </TabItem>
+
+  </Tabs>
+
 ## Example using `v-model`:
 
+<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
+  value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
+
+  <TabItem value="js">
+
 ```html
 <template>
   <div>
@@ -92,6 +158,54 @@ test('properly handles v-model', async () => {
 })
 ```
 
+</TabItem>
+
+  <TabItem value="ts">
+
+```html
+<template>
+  <div>
+    <p>Hi, my name is {{ user }}</p>
+
+    <label for="username">Username:</label>
+    <input v-model="user" id="username" name="username" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    data: (): {user: string} => ({
+      user: 'Alice',
+    }),
+  }
+</script>
+```
+
+```ts
+import {render, fireEvent, screen} from '@testing-library/vue'
+import Component from './Component.vue'
+
+test('properly handles v-model', async () => {
+  render(Component)
+
+  // Asserts initial state.
+  screen.getByText('Hi, my name is Alice')
+
+  // Get the input DOM node by querying the associated label.
+  const usernameInput = screen.getByLabelText(/username/i)
+
+  // Updates the <input> value and triggers an `input` event.
+  // fireEvent.input() would make the test fail.
+  await fireEvent.update(usernameInput, 'Bob')
+
+  screen.getByText('Hi, my name is Bob')
+})
+```
+
+  </TabItem>
+
+  </Tabs>
+
 ## More examples
 
 You'll find examples of testing with different libraries in

From 182ffff13137a595c17dfeb1b811113412a35904 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Thu, 21 Aug 2025 19:25:47 +0200
Subject: [PATCH 3/8] add ATL v18 to version table (#1496)

---
 .../version-compatibility.mdx                 | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/docs/angular-testing-library/version-compatibility.mdx b/docs/angular-testing-library/version-compatibility.mdx
index 64e35a4f0..3b64dd5d2 100644
--- a/docs/angular-testing-library/version-compatibility.mdx
+++ b/docs/angular-testing-library/version-compatibility.mdx
@@ -6,12 +6,13 @@ title: Version compatibility
 An overview of the compatibility between different versions of Angular Testing
 Library and Angular.
 
-| Angular | Angular Testing Library      |
-| ------- | ---------------------------- |
-| 19.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 18.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 17.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
-| 16.x    | 14.x, 13.x                   |
-| >= 15.1 | 14.x, 13.x                   |
-| < 15.1  | 12.x, 11.x                   |
-| 14.x    | 12.x, 11.x                   |
+| Angular | Angular Testing Library            |
+| ------- | ---------------------------------- |
+| 20.x    | 18.x                               |
+| 19.x    | 18.x, 17.x, 16.x, 15.x, 14.x, 13.x |
+| 18.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
+| 17.x    | 17.x, 16.x, 15.x, 14.x, 13.x       |
+| 16.x    | 14.x, 13.x                         |
+| >= 15.1 | 14.x, 13.x                         |
+| < 15.1  | 12.x, 11.x                         |
+| 14.x    | 12.x, 11.x                         |

From 1d0657b3fcb57cea188daaa8e6ede4b55a23fe69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Mart=C3=ADnez?=
 <alvaro.mart.mart+dev@gmail.com>
Date: Fri, 5 Sep 2025 20:15:56 +0200
Subject: [PATCH 4/8] Angular testing library docs update (#1502)

---
 README.md                            |  1 +
 docs/angular-testing-library/api.mdx | 32 +++++++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index a723c897d..4ffd940f5 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@
 Documentation site for
 [React Testing Library](https://github.com/testing-library/react-testing-library),
 [DOM Testing Library](https://github.com/testing-library/dom-testing-library),
+[Angular Testing Library](https://github.com/testing-library/angular-testing-library),
 and [related projects](https://github.com/testing-library)
 
 **https://testing-library.com**
diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx
index 14e3d9af1..08daa3359 100644
--- a/docs/angular-testing-library/api.mdx
+++ b/docs/angular-testing-library/api.mdx
@@ -38,7 +38,8 @@ await render(AppComponent)
 Instead of passing the component's type as first argument, you can also provide
 a template. This practice is required to render directives but can also be
 applied to components, it might even be more useful. The directive's (or
-component's) type must then be added to the `declarations`.
+component's) type must then be added to the `imports` (or `declarations` in case
+of non-standalone components).
 
 **example with directive**:
 
@@ -103,12 +104,17 @@ the component.
 ```ts
 // using a manual callback
 const sendValue = (value) => { ... }
+await render(AppComponent, {
+  on: {
+    send: (value) => sendValue(value),
+  }
+})
+
 // using a (jest) spy
 const sendValueSpy = jest.fn()
 
 await render(AppComponent, {
   on: {
-    send: (value) => sendValue(value),
     send: sendValueSpy
   }
 })
@@ -120,7 +126,7 @@ A collection of components, directives and pipes needed to render the component.
 For example, nested components of the component.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/NgModule#declarations).
+[Angular docs](https://angular.dev/guide/ngmodules/overview#declarations).
 
 **default** : `[]`
 
@@ -137,7 +143,7 @@ await render(AppComponent, {
 Set the defer blocks behavior.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/testing/DeferBlockBehavior)
+[Angular docs](https://angular.dev/api/core/testing/DeferBlockBehavior)
 
 **default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different
 from the Angular default of `DeferBlockBehavior.Playthrough`)
@@ -155,7 +161,7 @@ await render(AppComponent, {
 Set the initial state of a deferrable blocks in a component.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/testing/DeferBlockState)
+[Angular docs](https://angular.dev/api/core/testing/DeferBlockState)
 
 **default** : `undefined` (uses the Angular default, which is
 `DeferBlockState.Placeholder`)
@@ -177,7 +183,7 @@ These will be provided at the component level. To inject dependencies at the
 module level, use [`providers`](#providers).
 
 For more info see the
-[Angular docs](https://angular.io/api/core/Directive#providers).
+[Angular docs](https://angular.dev/guide/di/hierarchical-dependency-injection#example-providing-services-in-component).
 
 **default** : `[]`
 
@@ -273,7 +279,7 @@ modules. Adds `NoopAnimationsModule` by default if `BrowserAnimationsModule`
 isn't added to the collection
 
 For more info see the
-[Angular docs](https://angular.io/api/core/NgModule#imports).
+[Angular docs](https://angular.dev/guide/components#imports-in-the-component-decorator).
 
 **default** : `[NoopAnimationsModule]`
 
@@ -294,7 +300,7 @@ These will be provided at the module level. To inject dependencies at the
 component level, use [`componentProviders`](#componentProviders).
 
 For more info see the
-[Angular docs](https://angular.io/api/core/NgModule#providers).
+[Angular docs](https://angular.dev/guide/di/dependency-injection-providers#).
 
 **default** : `[]`
 
@@ -331,7 +337,7 @@ await render(AppComponent, {
 
 The route configuration to set up the router service via
 `RouterTestingModule.withRoutes`. For more info see the
-[Angular Routes docs](https://angular.io/api/router/Routes).
+[Angular Routes docs](https://angular.dev/api/router/Routes).
 
 **default** : `[]`
 
@@ -360,7 +366,7 @@ A collection of schemas needed to render the component. Allowed values are
 `NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/NgModule#schemas).
+[Angular docs](https://angular.dev/guide/components/advanced-configuration#custom-element-schemas).
 
 **default** : `[]`
 
@@ -511,20 +517,20 @@ expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
 Trigger a change detection cycle for the component.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/testing/ComponentFixture#detectChanges).
+[Angular docs](https://angular.dev/api/core/testing/ComponentFixture#detectChanges).
 
 ### `debugElement`
 
 The Angular `DebugElement` of the component.
 
-For more info see the [Angular docs](https://angular.io/api/core/DebugElement).
+For more info see the [Angular docs](https://angular.dev/api/core/DebugElement).
 
 ### `fixture`
 
 The Angular `ComponentFixture` of the component.
 
 For more info see the
-[Angular docs](https://angular.io/api/core/testing/ComponentFixture).
+[Angular docs](https://angular.dev/api/core/testing/ComponentFixture).
 
 ```typescript
 const {fixture} = await render(AppComponent)

From 28f16a4d36ec0226fe155483c338531be07a0924 Mon Sep 17 00:00:00 2001
From: taku-yasaka <omega.sagittarius.xxx+tech@gmail.com>
Date: Sat, 6 Sep 2025 15:27:57 +0900
Subject: [PATCH 5/8] docs(Vue Testing Library): update `@vue/test-utils` link
 to vue3 (#1501)

---
 docs/vue-testing-library/api.mdx | 11 +++++------
 docs/vue-testing-library/faq.mdx |  8 ++++----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx
index fc5cc4a17..e9f3c591e 100644
--- a/docs/vue-testing-library/api.mdx
+++ b/docs/vue-testing-library/api.mdx
@@ -58,7 +58,7 @@ The valid Vue Component to be tested.
 #### Options
 
 An object containing additional information to be passed to `@vue/test-utils`
-[mount](https://vue-test-utils.vuejs.org/api/options.html#mounting-options).
+[mount](https://test-utils.vuejs.org/api/#mount).
 
 Additionally, the following options can also be provided:
 
@@ -171,22 +171,21 @@ This is a simple wrapper around `prettyDOM` which is also exposed and comes from
 #### `unmount()`
 
 An alias for `@vue/test-utils`
-[destroy](https://vue-test-utils.vuejs.org/api/wrapper/#destroy).
+[unmount](https://test-utils.vuejs.org/api/#unmount).
 
 #### `html()`
 
-An alias for `@vue/test-utils`
-[html](https://vue-test-utils.vuejs.org/api/wrapper/#html).
+An alias for `@vue/test-utils` [html](https://test-utils.vuejs.org/api/#html).
 
 #### `emitted()`
 
 An alias for `@vue/test-utils`
-[emitted](https://vue-test-utils.vuejs.org/api/wrapper/#emitted).
+[emitted](https://test-utils.vuejs.org/api/#emitted).
 
 #### `rerender(props)`
 
 An alias for `@vue/test-utils`
-[setProps](https://test-utils.vuejs.org/api/#setprops).
+[setProps](https://test-utils.vuejs.org/api/#setProps).
 
 It returns a Promise through so you can `await rerender(...)`.
 
diff --git a/docs/vue-testing-library/faq.mdx b/docs/vue-testing-library/faq.mdx
index ce5a92a20..e0d7a7004 100644
--- a/docs/vue-testing-library/faq.mdx
+++ b/docs/vue-testing-library/faq.mdx
@@ -43,7 +43,7 @@ In general, you should avoid mocking out components (see
 
 However if you need to, you can either use Jest's
 [mocking feature](https://facebook.github.io/jest/docs/en/manual-mocks.html) or
-the [`stubs`][stubs] key provided by @vue/test-utils.
+the [`global.stubs`][stubs] key provided by @vue/test-utils.
 
 ```js
 import {render} from '@testing-library/vue'
@@ -156,8 +156,8 @@ Links:
 <!-- prettier-ignore-start -->
 
 [vue-test-utils]: https://github.com/vuejs/vue-test-utils
-[mount]: https://vue-test-utils.vuejs.org/api/#mount
-[stubs]: https://vue-test-utils.vuejs.org/api/options.html#stubs
-[stubs-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/stubs.js
+[mount]: https://test-utils.vuejs.org/api/#mount
+[stubs]: https://test-utils.vuejs.org/api/#global-stubs
+[stubs-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/stubs.js
 
 <!-- prettier-ignore-end -->

From 9ae8c03c0381730ba06dd8e9b2d18929d9c30c38 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael@cousins.io>
Date: Mon, 8 Sep 2025 13:25:41 -0400
Subject: [PATCH 6/8] docs(svelte-testing-library): simplify examples with link
 to STL repository (#1487)

---
 docs/svelte-testing-library/example.mdx | 254 +++---------------------
 1 file changed, 28 insertions(+), 226 deletions(-)

diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx
index 639e55d81..3c9a08777 100644
--- a/docs/svelte-testing-library/example.mdx
+++ b/docs/svelte-testing-library/example.mdx
@@ -4,48 +4,51 @@ title: Example
 sidebar_label: Example
 ---
 
-For additional resources, patterns, and best practices about testing Svelte
-components and other Svelte features, take a look at the [Svelte Society testing
-recipes][testing-recipes].
+:::tip
 
-[testing-recipes]:
-  https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
+See the [svelte-testing-library repository][repository-examples] for detailed
+examples, including examples for testing older Svelte 3 and 4 components.
 
-## Basic
+:::
 
 This basic example demonstrates how to:
 
-- Pass props to your Svelte component using `render`
-- Query the structure of your component's DOM elements using `screen`
+- Pass props to your Svelte component using [`render()`][render]
+- [Query][] the structure of your component's DOM elements using
+  [`screen`][screen]
 - Interact with your component using [`@testing-library/user-event`][user-event]
 - Make assertions using `expect`, using matchers from
   [`@testing-library/jest-dom`][jest-dom]
 
-```html title="greeter.svelte"
+For additional resources, patterns, and best practices about testing Svelte
+components and other Svelte features, take a look at the [Svelte Society testing
+recipes][testing-recipes].
+
+```html title="basic.svelte"
 <script>
-  export let name
+  let {name} = $props()
 
-  let showGreeting = false
+  let showGreeting = $state(false)
 
-  const handleClick = () => (showGreeting = true)
+  const onclick = () => (showGreeting = true)
 </script>
 
-<button on:click="{handleClick}">Greet</button>
+<button {onclick}>Greet</button>
 
 {#if showGreeting}
 <p>Hello {name}</p>
 {/if}
 ```
 
-```js title="greeter.test.js"
+```js title="basic.test.js"
 import {render, screen} from '@testing-library/svelte'
-import userEvent from '@testing-library/user-event'
+import {userEvent} from '@testing-library/user-event'
 import {expect, test} from 'vitest'
 
-import Greeter from './greeter.svelte'
+import Subject from './basic.svelte'
 
 test('no initial greeting', () => {
-  render(Greeter, {name: 'World'})
+  render(Subject, {name: 'World'})
 
   const button = screen.getByRole('button', {name: 'Greet'})
   const greeting = screen.queryByText(/hello/iu)
@@ -56,7 +59,7 @@ test('no initial greeting', () => {
 
 test('greeting appears on click', async () => {
   const user = userEvent.setup()
-  render(Greeter, {name: 'World'})
+  render(Subject, {name: 'World'})
 
   const button = screen.getByRole('button')
   await user.click(button)
@@ -66,213 +69,12 @@ test('greeting appears on click', async () => {
 })
 ```
 
+[repository-examples]:
+  https://github.com/testing-library/svelte-testing-library/tree/main/examples
+[testing-recipes]:
+  https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
+[query]: ../queries/about.mdx
+[screen]: ../queries/about.mdx#screen
+[render]: ./api.mdx#render
 [user-event]: ../user-event/intro.mdx
 [jest-dom]: https://github.com/testing-library/jest-dom
-
-## Events
-
-Events can be tested using spy functions. If you're using Vitest you can use
-[`vi.fn()`][vi-fn] to create a spy.
-
-:::info
-
-Consider using function props to make testing events easier.
-
-:::
-
-```html title="button-with-event.svelte"
-<button on:click>click me</button>
-```
-
-```html title="button-with-prop.svelte"
-<script>
-  export let onClick
-</script>
-
-<button on:click="{onClick}">click me</button>
-```
-
-```js title="button.test.ts"
-import {render, screen} from '@testing-library/svelte'
-import userEvent from '@testing-library/user-event'
-import {expect, test, vi} from 'vitest'
-
-import ButtonWithEvent from './button-with-event.svelte'
-import ButtonWithProp from './button-with-prop.svelte'
-
-test('button with event', async () => {
-  const user = userEvent.setup()
-  const onClick = vi.fn()
-
-  const {component} = render(ButtonWithEvent)
-  component.$on('click', onClick)
-
-  const button = screen.getByRole('button')
-  await user.click(button)
-
-  expect(onClick).toHaveBeenCalledOnce()
-})
-
-test('button with function prop', async () => {
-  const user = userEvent.setup()
-  const onClick = vi.fn()
-
-  render(ButtonWithProp, {onClick})
-
-  const button = screen.getByRole('button')
-  await user.click(button)
-
-  expect(onClick).toHaveBeenCalledOnce()
-})
-```
-
-[vi-fn]: https://vitest.dev/api/vi.html#vi-fn
-
-## Slots
-
-Slots cannot be tested directly. It's usually easier to structure your code so
-that you can test the user-facing results, leaving any slots as an
-implementation detail.
-
-However, if slots are an important developer-facing API of your component, you
-can use a wrapper component and "dummy" children to test them. Test IDs can be
-helpful when testing slots in this manner.
-
-```html title="heading.svelte"
-<h1>
-  <slot />
-</h1>
-```
-
-```html title="heading.test.svelte"
-<script>
-  import Heading from './heading.svelte'
-</script>
-
-<Heading>
-  <span data-testid="child" />
-</Heading>
-```
-
-```js title="heading.test.js"
-import {render, screen, within} from '@testing-library/svelte'
-import {expect, test} from 'vitest'
-
-import HeadingTest from './heading.test.svelte'
-
-test('heading with slot', () => {
-  render(HeadingTest)
-
-  const heading = screen.getByRole('heading')
-  const child = within(heading).getByTestId('child')
-
-  expect(child).toBeInTheDocument()
-})
-```
-
-## Two-way data binding
-
-Two-way data binding cannot be tested directly. It's usually easier to structure
-your code so that you can test the user-facing results, leaving the binding as
-an implementation detail.
-
-However, if two-way binding is an important developer-facing API of your
-component, you can use a wrapper component and writable store to test the
-binding itself.
-
-```html title="text-input.svelte"
-<script>
-  export let value = ''
-</script>
-
-<input type="text" bind:value="{value}" />
-```
-
-```html title="text-input.test.svelte"
-<script>
-  import TextInput from './text-input.svelte'
-
-  export let valueStore
-</script>
-
-<TextInput bind:value="{$valueStore}" />
-```
-
-```js title="text-input.test.js"
-import {render, screen} from '@testing-library/svelte'
-import userEvent from '@testing-library/user-event'
-import {get, writable} from 'svelte/store'
-import {expect, test} from 'vitest'
-
-import TextInputTest from './text-input.test.svelte'
-
-test('text input with value binding', async () => {
-  const user = userEvent.setup()
-  const valueStore = writable('')
-
-  render(TextInputTest, {valueStore})
-
-  const input = screen.getByRole('textbox')
-  await user.type(input, 'hello world')
-
-  expect(get(valueStore)).toBe('hello world')
-})
-```
-
-## Contexts
-
-If your component requires access to contexts, you can pass those contexts in
-when you [`render`][component-options] the component. When you use options like
-`context`, be sure to place props under the `props` key.
-
-[component-options]: ./api.mdx#component-options
-
-```html title="notifications-provider.svelte"
-<script>
-  import {setContext} from 'svelte'
-  import {writable} from 'svelte/stores'
-
-  setContext('messages', writable([]))
-</script>
-```
-
-```html title="notifications.svelte"
-<script>
-  import {getContext} from 'svelte'
-
-  export let label
-
-  const messages = getContext('messages')
-</script>
-
-<div role="status" aria-label="{label}">
-  {#each $messages as message (message.id)}
-  <p>{message.text}</p>
-  <hr />
-  {/each}
-</div>
-```
-
-```js title="notifications.test.js"
-import {render, screen} from '@testing-library/svelte'
-import {readable} from 'svelte/store'
-import {expect, test} from 'vitest'
-
-import Notifications from './notifications.svelte'
-
-test('notifications with messages from context', async () => {
-  const messages = readable([
-    {id: 'abc', text: 'hello'},
-    {id: 'def', text: 'world'},
-  ])
-
-  render(Notifications, {
-    context: new Map([['messages', messages]]),
-    props: {label: 'Notifications'},
-  })
-
-  const status = screen.getByRole('status', {name: 'Notifications'})
-
-  expect(status).toHaveTextContent('hello world')
-})
-```

From 72c2243a0abecdece6eacb883705089472918e1a Mon Sep 17 00:00:00 2001
From: brianlu2610 <68666483+brianlu2610@users.noreply.github.com>
Date: Wed, 22 Oct 2025 13:23:34 -0400
Subject: [PATCH 7/8] fix(docs): fixing old links and adding new ones for quick
 access to references (#1508)

---
 .../dom-testing-library/api-configuration.mdx | 34 ++++++++++---------
 docs/dom-testing-library/api-debugging.mdx    |  6 ++--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/docs/dom-testing-library/api-configuration.mdx b/docs/dom-testing-library/api-configuration.mdx
index 6f49e9709..72dd2e196 100644
--- a/docs/dom-testing-library/api-configuration.mdx
+++ b/docs/dom-testing-library/api-configuration.mdx
@@ -90,14 +90,15 @@ second argument. If you're using testing-library in a browser you almost always
 want to set this to `true`. Only very old browser don't support this property
 (such as IE 8 and earlier). However, `jsdom` does not support the second
 argument currently. This includes versions of `jsdom` prior to `16.4.0` and any
-version that logs a `not implemented` warning when calling `getComputedStyle`
+version that logs a `not implemented` warning when calling
+[`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
 with a second argument e.g.
 `window.getComputedStyle(document.createElement('div'), '::after')`. Defaults to
 `false`
 
 ### `defaultHidden`
 
-The default value for the `hidden` option used by
+The default value for the [`hidden` option](queries/byrole#hidden) used by
 [`getByRole`](queries/byrole.mdx). Defaults to `false`.
 
 ### `defaultIgnore`
@@ -110,12 +111,12 @@ Defaults to `script, style`.
 
 ### `showOriginalStackTrace`
 
-By default, `waitFor` will ensure that the stack trace for errors thrown by
-Testing Library is cleaned up and shortened so it's easier for you to identify
-the part of your code that resulted in the error (async stack traces are hard to
-debug). If you want to disable this, then set`showOriginalStackTrace` to
-`false`. You can also disable this for a specific call in the options you pass
-to `waitFor`.
+By default, [`waitFor`](api-async#waitfor) will ensure that the stack trace for
+errors thrown by Testing Library is cleaned up and shortened so it's easier for
+you to identify the part of your code that resulted in the error (async stack
+traces are hard to debug). If you want to disable this, then
+set`showOriginalStackTrace` to `false`. You can also disable this for a specific
+call in the options you pass to `waitFor`.
 
 ### `throwSuggestions` (experimental)
 
@@ -132,8 +133,8 @@ screen.getByTestId('foo', {suggest: false}) // will not throw a suggestion
 
 :::note
 
-When this option is enabled, it may provide suggestions that lack an
-intuitive implementation. Typically this happens for
+When this option is enabled, it may provide suggestions that lack an intuitive
+implementation. Typically this happens for
 [roles which cannot be named](https://w3c.github.io/aria/#namefromprohibited),
 most notably paragraphs. For instance, if you attempt to use
 [`getByText`](queries/bytext.mdx), you may encounter the following error:
@@ -143,12 +144,13 @@ TestingLibraryElementError: A better query is available, try this:
     getByRole('paragraph')
 ```
 
-However, there is no direct way to query paragraphs using the config object parameter, such as in
-`getByRole('paragraph', { name: 'Hello World' })`.
+However, there is no direct way to query paragraphs using the config object
+parameter, such as in `getByRole('paragraph', { name: 'Hello World' })`.
 
 To address this issue, you can leverage a custom function to validate the
-element's structure, as shown in the example below.
-More information can be found in the [GitHub issue](https://github.com/testing-library/dom-testing-library/issues/1306)
+element's structure, as shown in the example below. More information can be
+found in the
+[GitHub issue](https://github.com/testing-library/dom-testing-library/issues/1306)
 
 ```js
 getByRole('paragraph', {
@@ -171,5 +173,5 @@ message and container object as arguments.
 
 ### `asyncUtilTimeout`
 
-The global timeout value in milliseconds used by `waitFor` utilities. Defaults
-to 1000ms.
+The global timeout value in milliseconds used by [`waitFor`](api-async#waitfor)
+utilities. Defaults to 1000ms.
diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx
index 972a2d7d9..492542440 100644
--- a/docs/dom-testing-library/api-debugging.mdx
+++ b/docs/dom-testing-library/api-debugging.mdx
@@ -57,7 +57,7 @@ you'd like a solution that works for both, see
 ## `prettyDOM`
 
 Built on top of
-[`pretty-format`](https://github.com/facebook/jest/tree/master/packages/pretty-format),
+[`pretty-format`](https://github.com/jestjs/jest/tree/main/packages/pretty-format),
 this helper function can be used to print out readable representation of the DOM
 tree of a node. This can be helpful for instance when debugging tests.
 
@@ -79,7 +79,7 @@ It receives the root node to print out, an optional extra parameter to limit the
 size of the resulting string, for cases when it becomes too large. It has a last
 parameter which allows you to configure your formatting. In addition to the
 options listed you can also pass the
-[options](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options)
+[options](https://github.com/jestjs/jest/tree/main/packages/pretty-format#usage-with-options)
 of `pretty-format`.
 
 By default, `<style />`, `<script />` and comment nodes are ignored. You can
@@ -101,7 +101,7 @@ console.log(prettyDOM(div))
 ```
 
 This function is what also powers
-[the automatic debugging output described above](#debugging).
+[the automatic debugging output described above](#automatic-logging).
 
 ## `screen.debug()`
 

From 2710fa86068a693fa875a2c68d26d3afceb1553b Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Sun, 26 Oct 2025 18:34:39 +0100
Subject: [PATCH 8/8] docs: add bindings API to docs (#1509)

---
 docs/angular-testing-library/api.mdx      | 57 +++++++++++++++++++++++
 docs/angular-testing-library/examples.mdx | 21 +++++----
 2 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx
index 08daa3359..a5ba65c4b 100644
--- a/docs/angular-testing-library/api.mdx
+++ b/docs/angular-testing-library/api.mdx
@@ -120,6 +120,63 @@ await render(AppComponent, {
 })
 ```
 
+### `bindings`
+
+An array of bindings to apply to the component using Angular's native bindings API. This provides a more direct way to bind inputs and outputs compared to the `inputs` and `on` options. The bindings API uses Angular's `inputBinding`, `outputBinding`, and `twoWayBinding` functions from `@angular/core`.
+
+**default** : `[]`
+
+```typescript
+import { inputBinding, outputBinding, twoWayBinding, signal } from '@angular/core'
+
+await render(AppComponent, {
+  bindings: [
+    // Bind a static input value
+    inputBinding('greeting', () => 'Hello'),
+    
+    // Bind a signal as an input
+    inputBinding('age', () => 25),
+    
+    // Two-way binding with a signal
+    twoWayBinding('name', signal('John')),
+    
+    // Output binding with a callback
+    outputBinding('submitValue', (event) => console.log(event)),
+  ],
+})
+```
+
+**Using signals for reactive updates**:
+
+```typescript
+const greetingSignal = signal('Good day')
+const nameSignal = signal('David')
+const ageSignal = signal(35)
+
+const { fixture } = await render(AppComponent, {
+  bindings: [
+    inputBinding('greeting', greetingSignal),
+    inputBinding('age', ageSignal),
+    twoWayBinding('name', nameSignal),
+  ],
+})
+
+// Update signals externally
+greetingSignal.set('Good evening')
+```
+
+**Handling outputs**:
+
+```typescript
+const submitHandler = jest.fn()
+
+await render(AppComponent, {
+  bindings: [
+    outputBinding('submit', submitHandler),
+  ],
+})
+```
+
 ### `declarations`
 
 A collection of components, directives and pipes needed to render the component.
diff --git a/docs/angular-testing-library/examples.mdx b/docs/angular-testing-library/examples.mdx
index 2e44b893c..00ae4fa1a 100644
--- a/docs/angular-testing-library/examples.mdx
+++ b/docs/angular-testing-library/examples.mdx
@@ -37,25 +37,28 @@ export class CounterComponent {
 ```
 
 ```typescript title="counter.component.spec.ts"
-import { render, screen, fireEvent, aliasedInput } from '@testing-library/angular';
+import { signal, inputBinding, twoWayBinding } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
 import { CounterComponent } from './counter.component';
 
 describe('Counter', () => {
-  it('should render counter', async () => {
+  it('renders counter', async () => {
     await render(CounterComponent, {
-      inputs: {
-        counter: 5,
-        // aliases need to be specified using aliasedInput
-        ...aliasedInput('greeting', 'Hello Alias!'),
-      },
+      bindings: [
+        twoWayBinding('counter', signal(5)),
+        // aliases are handled naturally with inputBinding
+        inputBinding('greeting', () => 'Hello Alias!'),
+      ],
     });
 
     expect(screen.getByText('Current Count: 5')).toBeVisible();
     expect(screen.getByText('Hello Alias!')).toBeVisible();
   });
 
-  it('should increment the counter on click', async () => {
-    await render(CounterComponent, { inputs: { counter: 5 } });
+  it('increments the counter on click', async () => {
+    await render(CounterComponent, {
+      bindings: [twoWayBinding('counter', signal(5))],
+    });
 
     const incrementButton = screen.getByRole('button', { name: '+' });
     fireEvent.click(incrementButton);