Merge branch 'main' into dont-install-dom

Author: nickserv

docs/angular-testing-library/examples.mdx

@@ -57,11 +57,13 @@ describe('Counter', () => {
 
 ## With Standalone Components
 
-Angular Testing Library can also test your standalone components.
-In fact, it even becomes easier because you don't have to set up the whole Angular TestBed.
-This was previously only [possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
+Angular Testing Library can also test your standalone components. In fact, it
+even becomes easier because you don't have to set up the whole Angular TestBed.
+This was previously only
+[possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
 
-Let's migrate the counter component to a standalone component, and let's take a look at how this affects the test.
+Let's migrate the counter component to a standalone component, and let's take a
+look at how this affects the test.
 
 ```ts title="counter.component.ts"
 @Component({
@@ -86,8 +88,8 @@ export class CounterComponent {
 }
 ```
 
-Just as you would've expected, this doesn't affect the test cases.
-Writing tests for standalone components remains the same as for "regular" components.
+Just as you would've expected, this doesn't affect the test cases. Writing tests
+for standalone components remains the same as for "regular" components.
 
 ```ts title="counter.component.spec.ts"
 import {render, screen, fireEvent} from '@testing-library/angular'
@@ -114,7 +116,8 @@ describe('Counter', () => {
 })
 ```
 
-To override an import of a standalone component for your component test, you can use the [`componentImports` property](api.mdx#componentImports).
+To override an import of a standalone component for your component test, you can
+use the [`componentImports` property](api.mdx#componentImports).
 
 ## More examples
 
@@ -125,7 +128,9 @@ These examples include:
 - `@Input` and `@Output` properties
 - Forms
 - Integration with services
-- And [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
+- And
+  [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
 
 If you're looking for an example that isn't on the list, please feel free to
-create a [new issue](https://github.com/testing-library/angular-testing-library/issues/new).
+create a
+[new issue](https://github.com/testing-library/angular-testing-library/issues/new).

docs/angular-testing-library/faq.mdx

@@ -31,7 +31,8 @@ As you write your tests, keep in mind:
 
 In general, you should avoid mocking out components (see
 [the Guiding Principles section](guiding-principles.mdx)). However, if you need
-to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
+to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its
+[`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
 
 ```typescript
 import {Component, NgModule} from '@angular/core'
@@ -58,7 +59,7 @@ export class AppModule {}
 describe('ParentComponent', () => {
   it('should not render ChildComponent when shallow rendering', async () => {
     // all imports, declarations and exports of AppModule will be mocked.
-    const dependencies = MockBuilder(ParentComponent, AppModule).build();
+    const dependencies = MockBuilder(ParentComponent, AppModule).build()
 
     await render(ParentComponent, dependencies)
 

docs/angular-testing-library/version-compatibility.mdx

@@ -3,12 +3,12 @@ id: version-compatibility
 title: Version compatibility
 ---
 
-An overview of the compatibility between different versions of Angular Testing Library and Angular.
+An overview of the compatibility between different versions of Angular Testing
+Library and Angular.
 
 | Angular | Angular Testing Library |
 | ------- | ----------------------- |
 | 16.x    | 13.x \|\| 14.x          |
 | >= 15.1 | 13.x \|\| 14.x          |
 | < 15.1  | 11.x \|\| 12.x          |
 | 14.x    | 11.x \|\| 12.x          |
-

docs/dom-testing-library/api-debugging.mdx

@@ -42,9 +42,9 @@ you'd like a solution that works for both, see
 
 **Note**: The output of the DOM is colorized by default if your tests are
 running in a node environment. However, you may sometimes want to turn off
-colors, such as in cases where the output is written to a log file for
-debugging purposes. You can use the environment variable `COLORS` to explicitly
-force the colorization off or on. For example:
+colors, such as in cases where the output is written to a log file for debugging
+purposes. You can use the environment variable `COLORS` to explicitly force the
+colorization off or on. For example:
 
 ```
 COLORS=false npm test
@@ -105,9 +105,9 @@ This function is what also powers
 
 ## `screen.debug()`
 
-For convenience `screen` also exposes a `debug` method.
-This method is essentially a shortcut for `console.log(prettyDOM())`. It
-supports debugging the document, a single element, or an array of elements.
+For convenience `screen` also exposes a `debug` method. This method is
+essentially a shortcut for `console.log(prettyDOM())`. It supports debugging the
+document, a single element, or an array of elements.
 
 ```javascript
 import {screen} from '@testing-library/dom'
@@ -129,8 +129,8 @@ screen.debug(screen.getAllByText('multi-test'))
 ## `screen.logTestingPlaygroundURL()`
 
 For debugging using [testing-playground](https://testing-playground.com), screen
-exposes this convenient method which logs and returns a URL that can be opened in
-a browser.
+exposes this convenient method which logs and returns a URL that can be opened
+in a browser.
 
 ```javascript
 import {screen} from '@testing-library/dom'

docs/dom-testing-library/setup.mdx

@@ -18,9 +18,10 @@ the DOM and browser APIs that runs in node. If you're not using Jest and you
 would like to run your tests in Node, then you must install jsdom yourself.
 There's also a package called
 [global-jsdom](https://github.com/modosc/global-jsdom) which can be used to
-setup the global environment to simulate the browser APIs. Note that if you're using
-Vitest you only need to configure [`environment`](https://vitest.dev/config/#environment)
-to `jsdom` to achieve the same effect, you don't need global-jsdom.
+setup the global environment to simulate the browser APIs. Note that if you're
+using Vitest you only need to configure
+[`environment`](https://vitest.dev/config/#environment) to `jsdom` to achieve
+the same effect, you don't need global-jsdom.
 
 First, install jsdom and global-jsdom.
 

docs/example-external.mdx

@@ -6,7 +6,8 @@ sidebar_label: External Examples
 
 ## Code Samples
 
-- You can find more React Testing Library examples at [https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
+- You can find more React Testing Library examples at
+  [https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
 
 ## Playground
 

docs/example-formik.md

@@ -65,9 +65,12 @@ test('rendering and submitting a basic Formik form', async () => {
   render(<MyForm onSubmit={handleSubmit} />)
   const user = userEvent.setup()
 
-  await user.type(screen.getByRole("textbox", { name: /first name/i }), 'John')
-  await user.type(screen.getByRole("textbox", { name: /last name/i }), 'Dee')
-  await user.type(screen.getByRole("textbox", { name: /email/i }), '[email protected]')
+  await user.type(screen.getByRole('textbox', {name: /first name/i}), 'John')
+  await user.type(screen.getByRole('textbox', {name: /last name/i}), 'Dee')
+  await user.type(
+    screen.getByRole('textbox', {name: /email/i}),
+    '[email protected]',
+  )
 
   await user.click(screen.getByRole('button', {name: /submit/i}))
 

docs/example-react-router.mdx

@@ -168,7 +168,8 @@ export const App = () => (
 ```
 
 In your tests, pass the history object as a whole to the Router component.
-**Note:** React Router v5 [only works with History v4](https://github.com/remix-run/history#documentation),
+**Note:** React Router v5
+[only works with History v4](https://github.com/remix-run/history#documentation),
 so make sure you have the correct version of `history` installed.
 
 ```jsx

docs/learning.mdx

@@ -43,10 +43,14 @@ sidebar_label: Learning Material
   [Daniel Afonso](https://twitter.com/danieljcafonso)
 - [Testing Apollo Components Using react-testing-library](https://www.arahansen.com/testing-apollo-components-using-react-testing-library/)
   by [Andrew Hansen](https://twitter.com/arahansen)
-- [Enzyme vs React Testing Library: A Migration Guide](https://claritydev.net/blog/enzyme-vs-react-testing-library-migration-guide) by [Alex Khomenko](https://claritydev.net)
-- [Testing React Hook Form With React Testing Library](https://claritydev.net/blog/testing-react-hook-form-with-react-testing-library) by [Alex Khomenko](https://claritydev.net)
-- [Improving React Testing Library Tests](https://claritydev.net/blog/improving-react-testing-library-tests) by [Alex Khomenko](https://claritydev.net)   
-- [Testing Angular Challenges](https://angular-challenges.vercel.app/challenges/testing/) by [Thomas Laforge](https://twitter.com/laforge_toma)
+- [Enzyme vs React Testing Library: A Migration Guide](https://claritydev.net/blog/enzyme-vs-react-testing-library-migration-guide)
+  by [Alex Khomenko](https://claritydev.net)
+- [Testing React Hook Form With React Testing Library](https://claritydev.net/blog/testing-react-hook-form-with-react-testing-library)
+  by [Alex Khomenko](https://claritydev.net)
+- [Improving React Testing Library Tests](https://claritydev.net/blog/improving-react-testing-library-tests)
+  by [Alex Khomenko](https://claritydev.net)
+- [Testing Angular Challenges](https://angular-challenges.vercel.app/challenges/testing/)
+  by [Thomas Laforge](https://twitter.com/laforge_toma)
 
 ## Portuguese 🇧🇷
 
@@ -61,6 +65,7 @@ sidebar_label: Learning Material
 
 - [TESTING en REACT 🧪 ¡Aprende DESDE CERO! Con react-testing-library y Jest](https://www.youtube.com/watch?v=KYjjtRgg_H0)
   by [Midudev](https://twitter.com/midudev)
-- [Buenas prácticas con Angular Testing Library](https://dev.to/danyparedes/buenas-practicas-con-angular-testing-library-59lp) by [Danywalls](https://twitter.com/danywalls)
+- [Buenas prácticas con Angular Testing Library](https://dev.to/danyparedes/buenas-practicas-con-angular-testing-library-59lp)
+  by [Danywalls](https://twitter.com/danywalls)
 
 Feel free to contribute more!

docs/preact-testing-library/api.mdx

@@ -93,23 +93,25 @@ give you an idea of how to test using those functions.
 ### Example 1
 
 ```jsx
-const cb = jest.fn();
+const cb = jest.fn()
 
 function Counter() {
-  useEffect(cb);
+  useEffect(cb)
 
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(0)
 
-  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+  return <button onClick={() => setCount(count + 1)}>{count}</button>
 }
 
-const { container: { firstChild: buttonNode }, } = render(<Counter />);
+const {
+  container: {firstChild: buttonNode},
+} = render(<Counter />)
 
 // Clear the first call to useEffect that the initial render triggers.
-cb.mockClear();
+cb.mockClear()
 
 // Fire event Option 1.
-fireEvent.click(buttonNode);
+fireEvent.click(buttonNode)
 
 // Fire event Option 2.
 fireEvent(
@@ -118,11 +120,11 @@ fireEvent(
     bubbles: true,
     cancelable: true,
     button: 0,
-  })
-);
+  }),
+)
 
-expect(buttonNode).toHaveTextContent('1');
-expect(cb).toHaveBeenCalledTimes(1);
+expect(buttonNode).toHaveTextContent('1')
+expect(cb).toHaveBeenCalledTimes(1)
 ```
 
 ### Example 2

docs/queries/byrole.mdx

@@ -373,7 +373,8 @@ specific value using the `level` option
 `getByRole('spinbutton', { value: { now: 5, min: 0, max: 10, text: 'medium' } })`.
 
 Note that you don't have to specify all properties in `value`. A subset is
-sufficient e.g. `getByRole('spinbutton', { value: { now: 5, text: 'medium' } })`.
+sufficient e.g.
+`getByRole('spinbutton', { value: { now: 5, text: 'medium' } })`.
 
 Given the example below,
 
@@ -416,7 +417,7 @@ getAllByRole('spinbutton', {value: {min: 0}})
 ```
 
 > Every specified property in `value` must match. For example, if you query for
-> `{value: {min: 0, now: 3}}` `aria-valuemin` must be equal to 0 **AND**
+> `{value: {min: 0, now: 3}}` `aria-valuemin` must be equal to 0 **AND** >
 > `aria-valuenow` must be equal to 3
 
 > The `value` option is _only_ applicable to certain roles (check the linked MDN

docs/react-native-testing-library/example-intro.mdx

@@ -33,18 +33,18 @@ function Example() {
 
 test('examples of some things', async () => {
   const expectedUsername = 'Ada Lovelace'
-  
+
   render(<Example />)
 
   fireEvent.changeText(screen.getByTestId('input'), expectedUsername)
   fireEvent.press(screen.getByText('Print Username'))
-  
+
   // Using `findBy` query to wait for asynchronous operation to finish
   const usernameOutput = await screen.findByTestId('printed-username')
-  
+
   // Using `toHaveTextContent` matcher from `@testing-library/jest-native` package.
-  expect(usernameOutput).toHaveTextContent(expectedUsername);
-  
+  expect(usernameOutput).toHaveTextContent(expectedUsername)
+
   expect(screen.toJSON()).toMatchSnapshot()
 })
 ```

docs/react-testing-library/api.mdx

@@ -339,7 +339,7 @@ function renderHook<
   Props,
   Q extends Queries = typeof queries,
   Container extends Element | DocumentFragment = HTMLElement,
-  BaseElement extends Element | DocumentFragment = Container,
+  BaseElement extends Element | DocumentFragment = Container
 >(
   render: (initialProps: Props) => Result,
   options?: RenderHookOptions<Props, Q, Container, BaseElement>,
@@ -377,18 +377,20 @@ test('returns logged in user', () => {
 })
 ```
 
-> NOTE: When using `renderHook` in conjunction with the `wrapper` and `initialProps` options, the `initialProps` are not passed to the `wrapper` component.
-> To provide props to the `wrapper` component, consider a solution like this:
+> NOTE: When using `renderHook` in conjunction with the `wrapper` and
+> `initialProps` options, the `initialProps` are not passed to the `wrapper`
+> component. To provide props to the `wrapper` component, consider a solution
+> like this:
 >
 > ```js
 > const createWrapper = (Wrapper, props) => {
 >   return function CreatedWrapper({ children }) {
 >     return <Wrapper {...props}>{children}</Wrapper>;
 >   };
 > };
-> 
+>
 > ...
-> 
+>
 > {
 >   wrapper: createWrapper(Wrapper, { value: 'foo' }),
 > }
@@ -449,4 +451,4 @@ import {renderHook} from '@testing-library/react'
 const {unmount} = renderHook(({name = 'Alice'} = {}) => name)
 
 unmount()
-```
+```