Component testing framework docs #3883
Conversation
| @@ -0,0 +1,26 @@ | |||
| --- | |||
| title: Framework Specific Guides | |||
There was a problem hiding this comment.
Thinking out loud here of a better title for this page. If we're keeping it scoped to configuration then here are some options:
- Framework Configuration
- Framework Setup
There was a problem hiding this comment.
I put "Framework Configuration" for now, but I think we can probably think of something a little better. Let's keep thinking.
I added Next.js 4/5, I'll keep working through the other major frameworks (CRA, Nuxt).
Co-authored-by: Michel EDIGHOFFER <[email protected]>
|
@amirrustam I finished documenting all the different frameworks (at least the popular ones I've seen people using, and we have adapters for). Can you please give me a review? Also, do you think it's worth also including a link to a repo with everything set up for each example? |
| return startDevServer({ | ||
| options, | ||
| viteConfig: { | ||
| configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'), |
There was a problem hiding this comment.
I've using it yesterday and I add type error on the configFile which is UserConfig and not InlineConfig (which permits configFile attribute)
There was a problem hiding this comment.
Do you mean an inline vite config?
| const { startDevServer } = require('@cypress/vite-dev-server') | ||
|
|
||
| module.exports = (on, config) => { | ||
| on('dev-server:start', (options) => { |
There was a problem hiding this comment.
Also I got error when the support file is missing. You can try and see the error when support/index.js is not present.
There was a problem hiding this comment.
I was not able to reproduce this - I deleted support but it still seems okay. Can you share a reproduction?
I shared all of my examples here: https://github.com/lmiller1990/cypress-component-examples
|
@edimitchel I pushed some updates, mainly including links to example projects. @amirrustam who else best to add as a reviewer? |
| Once you have a React project, you'll also need to install the Cypress Webpack Dev Server and React adapter, as well as some devDependencies: | ||
|
|
||
| ```sh | ||
| npm install --save-dev cypress @cypress/vue @cypress/webpack-dev-server html-webpack-plugin@4 |
There was a problem hiding this comment.
@cypress/vue -> @cypress/react
|
|
||
| ### Vue 3 (Vue CLI) | ||
|
|
||
| The installation and configuration is the same as Vue 2 with the Vue CLI as described above. The only difference is the Vue adapter should be installed using `npm install @cypress/vue@next` - `@cypress/vue` target Vue 2, and the `next` branch targets Vue 3. |
|
|
||
| Recent years have seen an explosion in component based libraries (Vue, React) and frameworks built on top of them (Nuxt, Next). Cypress tests are written and behave the same regardless. Some frameworks require some additional configuration to work correctly with Cypress component testing. | ||
|
|
||
| All the example projects described in this page can be found [here](https://github.com/lmiller1990/cypress-component-examples). |
There was a problem hiding this comment.
Can these component examples be moved into a repo in the cypress org?
There was a problem hiding this comment.
| Next configure the dev-server to use the same Webpack configuration used by Create React App. We can do this easily using the `react-scripts` plugin provided by Cypress: | ||
|
|
||
| ```js | ||
| const injectDevServer = require('@cypress/react/plugins/react-scripts') |
There was a problem hiding this comment.
It would be helpful if this document explained where this code goes. I can see it in the cypress-component-examples repo and also in a comment in a code block in the @cypress/react docs but I had to search for it.
|
|
||
| it('renders learn react link', () => { | ||
| mount(<App />) | ||
| cy.get('a').contains('Learn React') |
There was a problem hiding this comment.
In my local testing, this causes an eslint error, because cy is not imported. In order to suppress this error, I had to:
npm install --save-dev eslint-plugin-cypress- Add
"plugin:cypress/recommended"to the package.jsoneslintConfig.extendsarray
An alternative would be to import cy from 'cypress'
There was a problem hiding this comment.
Interesting, I did not get this. I will investigate eslint a little more, it would be good if we could do this on our end perhaps, so the user does not need to mess with linting.
resolves: #3882
We should have some basic quick start guides for popular configurations. I think a single page like this is probably a good start.