docs: update docs about eslint rule (#1578)

* fix: relevant issues indicated by the eslint rule

* chore: rename file

* docs: move eslint to getting-started; cleanup legacy stuff

src/queries/__tests__/label-text.test.tsx

@@ -42,7 +42,7 @@ test('getByLabelText, queryByLabelText, findByLabelText', async () => {
   render(<Section />);
 
   expect(screen.getByLabelText(BUTTON_LABEL).props.accessibilityLabel).toEqual(BUTTON_LABEL);
-  const button = screen.queryByLabelText(/button/g);
+  const button = screen.queryByLabelText(/button/);
   expect(button?.props.accessibilityLabel).toEqual(BUTTON_LABEL);
 
   expect(() => screen.getByLabelText(NO_MATCHES_TEXT)).toThrow(
@@ -72,7 +72,7 @@ test('getAllByLabelText, queryAllByLabelText, findAllByLabelText', async () => {
   render(<Section />);
 
   expect(screen.getAllByLabelText(TEXT_LABEL)).toHaveLength(2);
-  expect(screen.queryAllByLabelText(/cool/g)).toHaveLength(3);
+  expect(screen.queryAllByLabelText(/cool/)).toHaveLength(3);
 
   expect(() => screen.getAllByLabelText(NO_MATCHES_TEXT)).toThrow(
     getNoInstancesFoundMessage(NO_MATCHES_TEXT),
@@ -89,7 +89,7 @@ test('getAllByLabelText, queryAllByLabelText, findAllByLabelText with exact as f
   render(<Section />);
 
   expect(screen.getAllByLabelText(TEXT_LABEL, { exact: false })).toHaveLength(2);
-  expect(screen.queryAllByLabelText(/cool/g, { exact: false })).toHaveLength(3);
+  expect(screen.queryAllByLabelText(/cool/, { exact: false })).toHaveLength(3);
 
   expect(() => screen.getAllByLabelText(NO_MATCHES_TEXT, { exact: false })).toThrow(
     getNoInstancesFoundMessage(NO_MATCHES_TEXT),

src/queries/__tests__/role.test.tsx

@@ -44,7 +44,7 @@ test('getByRole, queryByRole, findByRole', async () => {
   render(<Section />);
 
   expect(screen.getByRole('button').props.accessibilityRole).toEqual('button');
-  const button = screen.queryByRole(/button/g);
+  const button = screen.queryByRole(/button/);
   expect(button?.props.accessibilityRole).toEqual('button');
 
   expect(() => screen.getByRole(NO_MATCHES_TEXT)).toThrow(
@@ -68,7 +68,7 @@ test('getAllByRole, queryAllByRole, findAllByRole', async () => {
   render(<Section />);
 
   expect(screen.getAllByRole('link')).toHaveLength(2);
-  expect(screen.queryAllByRole(/ink/g)).toHaveLength(2);
+  expect(screen.queryAllByRole(/ink/)).toHaveLength(2);
 
   expect(() => screen.getAllByRole(NO_MATCHES_TEXT)).toThrow(
     getNoInstancesFoundMessage(NO_MATCHES_TEXT),

website/docs/GettingStarted.md

@@ -3,6 +3,9 @@ id: getting-started
 title: Getting Started
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 ## The problem
 
 You want to write maintainable tests for your React Native components. As a part of this goal, you want your tests to avoid including implementation details of your components and focus on making your tests give you the confidence they are intended. As part of this, you want your tests to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.
@@ -21,38 +24,54 @@ You can find the source of the `QuestionsBoard` component and this example [here
 
 Open a Terminal in your project's folder and run:
 
-#### Using `yarn`
-
+<Tabs groupId="package-manager">
+<TabItem value="npm" label="npm">
 ```sh
-yarn add --dev @testing-library/react-native
+npm install --save-dev @testing-library/react-native
 ```
-
-#### Using `npm`
-
+</TabItem>
+<TabItem value="yarn" label="yarn">
 ```sh
-npm install --save-dev @testing-library/react-native
+yarn add --dev @testing-library/react-native
 ```
+</TabItem>
+</Tabs>
 
 This library has a peer dependency for `react-test-renderer` package. Make sure that your `react-test-renderer` version matches exactly your `react` version.
 
-:::info
-To properly use helpers for async tests (`findBy` queries and `waitFor`), you need at least React >=16.9.0 (featuring async `act`) or React Native >=0.61 (which comes with React >=16.9.0).
-:::
+### Jest matchers
 
-### Additional Jest matchers
-
-To use additional React Native-specific Jest matchers, add the following line to your `jest-setup.ts` file (configured using [`setupFilesAfterEnv`](https://jestjs.io/docs/configuration#setupfilesafterenv-array)):
+To set up React Native-specific Jest matchers, add the following line to your `jest-setup.ts` file (configured using [`setupFilesAfterEnv`](https://jestjs.io/docs/configuration#setupfilesafterenv-array)):
 
 ```ts
 import '@testing-library/react-native/extend-expect';
 ```
 
-### Flow
+### ESLint plugin
+
+We recommend setting up [`eslint-plugin-testing-library`](https://github.com/testing-library/eslint-plugin-testing-library) package to help you avoid common Testing Library mistakes and bad practices.
 
-Note for [Flow](https://flow.org) users – you'll also need to install typings for `react-test-renderer`:
+Install the plugin (assuming you already have `eslint` installed & configured):
 
+<Tabs groupId="package-manager">
+<TabItem value="npm" label="npm">
+```sh
+npm install --save-dev eslint-plugin-testing-library
+```
+</TabItem>
+<TabItem value="yarn" label="yarn">
 ```sh
-flow-typed install react-test-renderer
+yarn add --dev eslint-plugin-testing-library
+```
+</TabItem>
+</Tabs>
+
+Then, add relevant entry to your ESLint config (e.g., `.eslintrc.js`). We recommend extending the `react` plugin:
+
+```js
+module.exports = {
+  extends: ['plugin:testing-library/react'],
+};
 ```
 
 ## Example

website/sidebars.js

@@ -2,7 +2,7 @@ module.exports = {
   docs: {
     Introduction: ['getting-started'],
     'API Reference': ['api', 'api-queries', 'user-event', 'jest-matchers'],
-    Guides: ['how-should-i-query', 'troubleshooting', 'faq', 'eslint-plugin-testing-library'],
+    Guides: ['how-should-i-query', 'troubleshooting', 'faq'],
     Advanced: ['testing-env', 'understanding-act'],
     Community: ['community-resources'],
     Migrations: [