Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add section for create from React component #4907

Merged
merged 4 commits into from
Dec 20, 2022
Merged

Add section for create from React component #4907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
463afe3
add section for create from React; minor fixes
astone123 Dec 6, 2022
95932c9
adding create from react component image\
elylucas Dec 16, 2022
231adb6
add note about excluded files
astone123 Dec 19, 2022
6dcc6bc
reuse vue cfc image for react as well
elylucas Dec 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/img/guides/component-testing/create-from-component-react.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...nt-testing/create-your-first-spec-vue.jpg → ...nt-testing/create-your-first-spec-cfc.jpg
View file
Open in desktop
File renamed without changes
24 changes: 19 additions & 5 deletions content/guides/component-testing/react/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 />)
})
})
Expand Down
10 changes: 5 additions & 5 deletions content/guides/component-testing/vue/quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand All @@ -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)
})
})
Expand Down