Adding first iteration over TSX on new tab (testing-library#700)

* Adding first iteration over TSX on new tab

* Fixing indentation

* Fixing imports diff and replacing js to jsx

* Changing defaultValue from js to jsx

Author: pedroapfilho

docs/react-testing-library/setup.mdx

@@ -4,6 +4,9 @@ title: Setup
 sidebar_label: Setup
 ---
 
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
 `React Testing Library` does not require any configuration to be used. However,
 there are some things you can do when configuring your testing framework to
 reduce some boilerplate. In these docs we'll demonstrate configuring Jest, but
@@ -28,12 +31,17 @@ make your test util file accessible without using relative paths.
 The example below sets up data providers using the [`wrapper`](api.mdx#wrapper)
 option to `render`.
 
-```diff title="my-component.test.js"
+  <Tabs groupId="test-utils" defaultValue="jsx" values={[ {label: 'Javascript',
+  value: 'jsx'}, {label: 'Typescript', value: 'tsx'}, ]}>
+
+  <TabItem value="jsx">
+
+```diff title="my-component.test.jsx"
 - import { render, fireEvent } from '@testing-library/react';
 + import { render, fireEvent } from '../test-utils';
 ```
 
-```js title="test-utils.js"
+```jsx title="test-utils.jsx"
 import React from 'react'
 import { render } from '@testing-library/react'
 import { ThemeProvider } from 'my-ui-lib'
@@ -60,6 +68,46 @@ export * from '@testing-library/react'
 export { customRender as render }
 ```
 
+  </TabItem>
+
+  <TabItem value="tsx">
+
+```diff title="my-component.test.tsx"
+- import { render, fireEvent } from '@testing-library/react';
++ import { render, fireEvent } from '../test-utils';
+```
+
+```tsx title="test-utils.tsx"
+import React, { FC } from 'react'
+import { render } from '@testing-library/react'
+import { ThemeProvider } from 'my-ui-lib'
+import { TranslationProvider } from 'my-i18n-lib'
+import defaultStrings from 'i18n/en-x-default'
+
+const AllTheProviders: FC = ({ children }) => {
+  return (
+    <ThemeProvider theme="light">
+      <TranslationProvider messages={defaultStrings}>
+        {children}
+      </TranslationProvider>
+    </ThemeProvider>
+  )
+}
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'queries'>
+) => render(ui, { wrapper: AllTheProviders, ...options })
+
+export * from '@testing-library/react'
+
+export { customRender as render }
+```
+
+  </TabItem>
+
+  </Tabs>
+
 > **Note**
 >
 > Babel versions lower than 7 throw an error when trying to override the named