-
Notifications
You must be signed in to change notification settings - Fork 4
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.
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
Example for react-app-rewired #35
Comments
Please create a public repo with these three things installed and I will look into code coverage. It would tremendously speed things up
…Sent from my iPhone
On Jun 1, 2020, at 17:47, Stallion V ***@***.***> wrote:
We created our App using CRA V3 and use Ant design along with it.
Ant design needs a custom version react-app-rewired to run on top of react-scripts.
We did not have Typescript to start with but added later on.
Cypress runs just fine but the code coverage won't run.
Our current start script looks like
"start": "PORT=7000 react-app-rewired start"
and when we change it to
"start": "PORT=7000 react-scripts -r @cypress/instrument-cra start" it won't work
Can you share an example of
CRA
Using react-app-rewired
With Typescript installed
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
@bahmutov here you go cypress-cra-ts-antd-react-app-rewired |
I have forked the repo to https://github.com/bahmutov/cypress-cra-ts-antd-react-app-rewired and added https://github.com/cypress-io/instrument-cra Starting the app with
|
Hmm, I tried an alternative approach - add this plugin via const { override, fixBabelImports, addLessLoader, addBabelPlugin } = require('customize-cra')
module.exports = override(
addBabelPlugin('babel-plugin-istanbul'),
... But I get the same error - something goes terribly wrong during instrumentation, hmm |
Looking at the code. 1st workaround - use import React from 'react'
// import { Layout, Menu, Breadcrumb } from 'antd'
import './App.less'
const { Layout, Menu, Breadcrumb } = require('antd')
const { Header, Content, Footer } = Layout 2nd workaround - following umijs/babel-plugin-import#204 import { Layout, Menu, Breadcrumb } from 'antd/lib' also works For both, instrument the app either using const { override, fixBabelImports, addLessLoader, addBabelPlugin } = require('customize-cra')
module.exports = override(
addBabelPlugin('babel-plugin-istanbul'),
... I prefer using |
Yes this is the same error. Basically react-app-rewired was added to customize web pack. But yes it is complaining that it is not able to get any Ant modules and the app crashes. |
Thanks let me give this a shot. Also do i then still follow the same steps as in https://github.com/bahmutov/cra-ts-code-coverage-example right? |
Yeah, not sure about changing the imports all over the place, understand
this is a hassle, but who knows why these things don't play nicely together.
After that you should just use the @cypress/code-coverage plugin to report
results I think
Gleb
…On Mon, Jun 1, 2020 at 8:50 PM Stallion V ***@***.***> wrote:
2nd workaround - following umijs/babel-plugin-import#204
<umijs/babel-plugin-import#204>
also works
For both, instrument the app either using react-app-rewired -r
@cypress/instrument-cra start or config-overrides.js
const { override, fixBabelImports, addLessLoader, addBabelPlugin } = require('customize-cra')module.exports = override(
addBabelPlugin('babel-plugin-istanbul'),
...
I prefer using addBabelPlugin method (and just adding
babel-plugin-istanbul dependency)
Thanks let me give this a shot.
The problem with this is changes all over the app, since I have a huge app.
Any other way instead of the require or changing ant to and/lib
Also do i then still follow the same steps as in
https://github.com/bahmutov/cra-ts-code-coverage-example right?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#35 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAQ4BJQMF7IZWRMVJBQXM2DRUREGHANCNFSM4NQFLIJQ>
.
--
Dr. Gleb Bahmutov, PhD
Schedule video chat / phone call / meeting with me via
https://calendly.com/bahmutov
gleb.bahmutov@gmail.com @bahmutov <https://twitter.com/@bahmutov>
https://glebbahmutov.com/ https://glebbahmutov.com/blog
https://github.com/bahmutov
|
Thanks I will give it a shot and update here. Very much appreciate your quick input. |
Thanks @bahmutov so I did get it to work using the 2nd approach but am confused about the code coverage |
I have recorded this short video explaining the above report https://youtu.be/yVvCYtsmkZU |
Thanks Gleb , a follow up question which I also left in the comments in the video link. |
I did end up doing a replace all from 'ant' to from 'ant/lib' and it was not that bad. The reports do show up for the complete app. Just wanted to confirm that this really worked. |
:) I don't think you want to cover every line of JSX markup. The important thing is what the users gets. Let's say the most important part for you is that there are 3 items, right. Then you write an assertion to confirm it import App from './App'
mount(<App />) // or cy.visit('/')
// assuming MenuItem renders something with class="menu-item"
cy.get('.menu-item').should('have.length', 3) Ok, but maybe you are not sure or had regression about the text in the middle item import App from './App'
mount(<App />)
// assuming MenuItem renders something with class="menu-item"
cy.get('.menu-item').eq(1).should('contain', 'nav 2')
// or any item contains "nav 2"
cy.contains('.menu-item', 'nav 2') going even further, maybe you want to confirm the markup produced, then you can bring a snapshot plugin from https://on.cypress.io/plugins and confirm entire HTML import App from './App'
mount(<App />)
cy.get('.layout').invoke('html').toMatchSnapshot() I don't like HTML snapshots - they are brittle and had to understand. Instead, I recommend setting up a visual testing https://on.cypress.io/visual-testing plugin. Then you can confirm the entire application works and looks as expected cy.visit('/')
// confirm the page has rendered
cy.get('.menu-item').should('have.length', 3)
cy.get('.layout').visualSnapshot() You can find multiple examples of image snapshot testing in our visual testing guide, and even see long list of videos using the open-source plugin at https://github.com/bahmutov/sudoku Functional tests plus visual snapshots should give you full confidence in the application working. Code coverage is more like a map of remaining features to test, as I talk about in https://www.youtube.com/watch?v=JL3QKQO80fs presentation |
Thanks that is pretty awesome. Will explore it, that may help bridge the gap !! |
ok, seems to be resolved |
@bahmutov I'm having a problem with Cypress code coverage. My application has react code in different modules but Cypress is only installed in one of them. When executing Cypress with code coverage, only the react scripts located in the module where Cypress is installed are instrumented and appear in the report. Is there a way to instrument and collect coverage of every module? |
We created our App using CRA V3 and use Ant design along with it.
Ant design needs a custom version react-app-rewired to run on top of react-scripts.
We did not have Typescript to start with but added later on.
Cypress runs just fine but the code coverage won't run.
Our current start script looks like
"start": "PORT=7000 react-app-rewired start"
and when we change it to
"start": "PORT=7000 react-scripts -r @cypress/instrument-cra start"
it won't workCan you share an example of
The text was updated successfully, but these errors were encountered: