Fixing indentation

Author: pedroapfilho

docs/react-testing-library/setup.mdx

@@ -31,65 +31,73 @@ 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"
+- import { render, fireEvent } from '@testing-library/react';
++ import { render, fireEvent } from '../test-utils';
+```
+
 <Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'Javascript',
-value: 'js'}, {label: 'Typescript', value: 'tsx'}, ]}> <TabItem value="js">
-
-```jsx title="test-utils.js"
-import React 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 = ({ children }) => {
-  return (
-    <ThemeProvider theme="light">
-      <TranslationProvider messages={defaultStrings}>
-        {children}
-      </TranslationProvider>
-    </ThemeProvider>
-  )
-}
+value: 'jsx'}, {label: 'Typescript', value: 'tsx'}, ]}>
 
-const customRender = (ui, options) =>
-  render(ui, { wrapper: AllTheProviders, ...options })
+  <TabItem value="jsx">
 
-// re-export everything
-export * from '@testing-library/react'
+    ```jsx title="test-utils.js"
+    import React 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'
 
-// override render method
-export { customRender as render }
-```
+    const AllTheProviders = ({ children }) => {
+      return (
+        <ThemeProvider theme="light">
+          <TranslationProvider messages={defaultStrings}>
+            {children}
+          </TranslationProvider>
+        </ThemeProvider>
+      )
+    }
 
-  </TabItem>
-  <TabItem value="tsx">
+    const customRender = (ui, options) =>
+      render(ui, { wrapper: AllTheProviders, ...options })
 
-```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>
-  )
-}
+    // re-export everything
+    export * from '@testing-library/react'
 
-const customRender = (
-  ui: ReactElement,
-  options?: Omit<RenderOptions, 'queries'>
-) => render(ui, { wrapper: AllTheProviders, ...options })
+    // override render method
+    export { customRender as render }
+    ```
 
-export * from '@testing-library/react'
+  </TabItem>
 
-export { customRender as render }
-```
+  <TabItem value="tsx">
+
+    ```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>