diff --git a/assets/img/guides/component-testing/create-from-component-react.jpg b/assets/img/guides/component-testing/create-from-component-react.jpg
new file mode 100644
index 0000000000..7952b5c965
Binary files /dev/null and b/assets/img/guides/component-testing/create-from-component-react.jpg differ
diff --git a/assets/img/guides/component-testing/create-your-first-spec-vue.jpg b/assets/img/guides/component-testing/create-your-first-spec-cfc.jpg
similarity index 100%
rename from assets/img/guides/component-testing/create-your-first-spec-vue.jpg
rename to assets/img/guides/component-testing/create-your-first-spec-cfc.jpg
diff --git a/content/guides/component-testing/react/quickstart.md b/content/guides/component-testing/react/quickstart.md
index a9908aa7ef..8a2d3005fa 100644
--- a/content/guides/component-testing/react/quickstart.md
+++ b/content/guides/component-testing/react/quickstart.md
@@ -97,7 +97,8 @@ any yet. However, we don't currently have a component, either. Let's change
 that!
 
 <DocsImage 
-  src="/img/guides/component-testing/create-your-first-spec.jpg"> </DocsImage>
+  src="/img/guides/component-testing/create-your-first-spec-cfc.jpg">
+</DocsImage>
 
 ### Creating a Component
 
@@ -159,17 +160,30 @@ mount without any issues.
 
 ### Your First Component Test
 
-To get started, create a spec file in the same directory as the **Stepper.jsx**
-file and name it **Stepper.cy.jsx**. Then paste the following into it:
+To get started, go back to the Cypress test app and, in the "Create your first
+spec" screen, click "Create from component".
+
+A modal will pop up listing all the component files that are found in your app
+(Cypress will exclude **\*.config.{js,ts}** and **\*.{cy,spec}.{js,ts,jsx,tsx}**
+files from this list). Expand the row for **Stepper.jsx** and select the
+**Stepper** component:
+
+<DocsImage 
+  src="/img/guides/component-testing/create-from-component-react.jpg">
+</DocsImage>
+
+A spec file was created at **src/component/Stepper.cy.jsx**:
 
 <code-group>
 <code-block label="src/components/Stepper.cy.jsx" active>
 
 ```js
+import React from 'react'
 import Stepper from './Stepper'
 
-describe('<Stepper>', () => {
-  it('mounts', () => {
+describe('<Stepper />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
     cy.mount(<Stepper />)
   })
 })
diff --git a/content/guides/component-testing/vue/quickstart.md b/content/guides/component-testing/vue/quickstart.md
index 79f4cc6fc2..10dbcb5a4f 100644
--- a/content/guides/component-testing/vue/quickstart.md
+++ b/content/guides/component-testing/vue/quickstart.md
@@ -97,7 +97,7 @@ any yet. However, we don't currently have a component, either. Let's change
 that!
 
 <DocsImage 
-  src="/img/guides/component-testing/create-your-first-spec-vue.jpg">
+  src="/img/guides/component-testing/create-your-first-spec-cfc.jpg">
 </DocsImage>
 
 ### Creating a Component
@@ -158,10 +158,10 @@ mount without any issues.
 ### Your First Component Test
 
 To get started, go back to the Cypress test app and, in the "Create your first
-spec" screen, click "Create from Vue component".
+spec" screen, click "Create from component".
 
-A modal will pop up listing all the components that is found in your app. Select
-the **Stepper.vue** component:
+A modal will pop up listing all the components that are found in your app.
+Select the **Stepper.vue** component:
 
 <DocsImage 
   src="/img/guides/component-testing/create-from-component-vue.jpg">
@@ -177,7 +177,7 @@ import Stepper from './Stepper.vue'
 
 describe('<Stepper />', () => {
   it('renders', () => {
-    // see: https://test-utils.vuejs.org/guide/
+    // see: https://on.cypress.io/mounting-vue
     cy.mount(Stepper)
   })
 })