From 1a132870b3b1022ee1f68a1beed98ce50a071b9a Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 27 Oct 2023 16:31:27 +0100
Subject: [PATCH] Docs: Fix conditional rendering for Unit testing

---
 docs/writing-tests/stories-in-unit-tests.md | 23 +++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/writing-tests/stories-in-unit-tests.md b/docs/writing-tests/stories-in-unit-tests.md
index 156294d5e480..f96a72c9fef2 100644
--- a/docs/writing-tests/stories-in-unit-tests.md
+++ b/docs/writing-tests/stories-in-unit-tests.md
@@ -172,26 +172,35 @@ If you intend to test multiple stories in a single test, use the `composeStories
 
 Storybook provides community-led addons for other frameworks like [Vue 2](https://storybook.js.org/addons/@storybook/testing-vue) and [Angular](https://storybook.js.org/addons/@storybook/testing-angular). However, these addons still lack support for the latest stable Storybook release. If you're interested in helping out, we recommend reaching out to the maintainers using the default communication channels (GitHub and [Discord server](https://discord.com/channels/486522875931656193/839297503446695956)).
 
-### The args are not being passed to the test
-
 <IfRenderer renderer='react'>
 
+### The args are not being passed to the test
+
 The components returned by `composeStories` or `composeStory` not only can be rendered as React components but also come with the combined properties from the story, meta, and global configuration. This means that if you want to access args or parameters, for instance, you can do so:
 
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/reuse-args-test.js.mdx',
+    'react/reuse-args-test.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 </IfRenderer>
 
 <IfRenderer renderer='vue'>
 
-When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows:
+### The args are not being passed to the test
 
-</IfRenderer>
+When using the `composeStories` or `composeStory` functions, the components being rendered will have a combination of properties from the story, meta, and global configuration. Therefore, if you need to access the args or parameters, you can do so as follows:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/reuse-args-test.js.mdx',
-    'react/reuse-args-test.ts.mdx',
     'vue/reuse-args-test.3.js.mdx',
     'vue/reuse-args-test.3.ts.mdx',
   ]}
@@ -199,6 +208,8 @@ When using the `composeStories` or `composeStory` functions, the components bein
 
 <!-- prettier-ignore-end -->
 
+</IfRenderer>
+
 #### Learn about other UI tests
 
 - [Test runner](./test-runner.md) to automate test execution