diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
index 5bdcac68d..7231a5656 100644
--- a/docs/react-testing-library/setup.mdx
+++ b/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