How to use scaffoldCommonNodeModules method in Cypress

I had to add this to my tsconfig.json:

"compilerOptions": {
    "module": "CommonJS",
  }

and this to my webpack config

output: {
        fileName: 'bundle.js',
        chunkFileName: '[name].bundle.js',
      }

I believe your matcher is incorrect and includes an extra / following service. Your calls aren't coming in as /proxy/service/?myParam=myValue, but as /proxy/service?myParam=myValue. The following should intercept your request.

cy.intercept('proxy/service*').as('wms')
cy.wait('@wms).then(console.log)

I used webpack + babel-loader + @babel/preset-typescript + babel-plugin-istanbul

basically the strategy is:

• instrument your app code so that coverage is generated on window.__coverage__
• after cypress spec runs, use cy.writeFile to save the report to .nyc_output
• and generate the report with cy.exec('nyc report --reporter=html')

you should then be able the view the html coverage report in the coverage/ directory

Here's the changes I made to your project, switching to webpack with fully working code coverage:

https://github.com/Bkucera/cypress-code-coverage/commit/40f88aa27778dc55ad3fae56af66724f73b6496d

I have put together other working examples here. It has examples of setting up code coverage on top of a newly ejected create-react-app(uses webpack) and a vanilla typescript + webpack project:

create-react-app-ejected:

cypress with code coverage set up on a newly-ejected create-react-app uses:

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

vanilla-typescript-webpack:

code coverage on a vanilla typescript & webpack project uses:

• @babel/preset-typescript
• @cypress/webpack-preprocessor
• babel-loader
• babel-plugin-istanbul

In both of these I also instrument the cypress code so that you could possibly merge the coverage reports, but I don't do that currently

Your code seems to run ok on the ng-file-upload demo page.

I also tested with an 'xlsx' file, no problem found.

describe('Angular file upload Demo', () => {

  /*
    To run these tests, add a file 'logo.png' to /cypress/fixtures
  */

  it('uploads the fixture file', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').then(subject => {
      return cy.fixture('logo.png', 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
          console.log('blob', blob)
          const el = subject[0]
          if (el != null) {
            const testFile = new File([blob], 'logo.png')
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
          }
          return subject          
        })
    })

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

  Cypress.Commands.add('uploadFile', { prevSubject: 'element' }, (subject, fileName) => {
    console.log('subject', subject)
    return cy.fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        console.log('blob', blob)
        const el = subject[0]
        if (el != null) {
          const testFile = new File([blob], fileName)
          const dataTransfer = new DataTransfer()
          dataTransfer.items.add(testFile)
          el.files = dataTransfer.files
        }
        return subject          
      })
    }
  )

  it('uploads the file via custom command', () => {
    cy.visit('')
    cy.get('[name=userName]').type('myLogo')

    cy.get('[name=file]').uploadFile('logo.png')

    cy.contains('button', 'Submit').click()

    cy.contains('.progress', '100%')
    cy.contains('body', 'Upload Successful')
  })

})

From the question and the comments above, it sounds like you're trying to do something like this:

1. set up your application
2. click a button (or do something else) to start a request to an API
3. capture the response from the API
4. use the response to test something else in your application (perhaps make sure some text changes on the page?)

While it is possible to write tests in this way, there is a problem with this: the response from the API may change depending on circumstances outside your control. For example, what happens if you're working on your project and the API happens to be down that day? Your code is going to break and it won't be due to a bug in your code. In fact, you won't be testing your code at all (at least not the code you thought you were testing), because you won't be getting the response you want from the API.

This is why Cypress provides a way to stub the requests - to make sure that when your tests are running, you are getting the response you want from the API. If you want to write a test to see what happens when the API returns value A, you need to make sure the API doesn't return value B. Stubbing the requests allows you to make sure the application gets value A when you need it to.

So the examples you've seen probably do something like this:

1. set up your application
2. use cy.route to stub the API requests to return a known value
3. click the button - your app now makes a request and gets back that known value
4. test your application to make sure it does what you expect when it gets that known value.

If you have a range of different response values for which you want to test your app's behaviour, write a set of tests, one for each value.

Both are utility commands from cypress package, can be performed in the same way (chained off of cy or off another command) and there is no timeout period. But the difference are:

• pause() will stop the test execution to inspect the web application, the DOM, the network, whereas debug() will stop only when the developer tools are open
• pause() does not provide any debug information, whereas debug() give the details in browser console tab
• Using pause() we can find 'next' button option in the test runner, which allow us to execute the code step by step, debug() doesn't have the feature.

Thank you for the detailed description! I provide you a solution for your very first question

I'm trying to find out if I'm able to conditionally skip a test it() in my test suite and deal with its async nature as well.

Use an environment variable, I report you a solution of mine (actually using in my pipeline).

if (!Cypress.env("SKIP_E2E_TESTS")) {
  it(...);
}

and in my package.json file I have a script that looks like this

"test": "CYPRESS_SKIP_E2E_TESTS=true npm-run-all --parallel --silent test:unit test:cypress",

My goal was the same as yours, I'd like to disable some tests in some circumstances (the CI pipeline in my case).

So put the whole test into a condition instead of having a conditional test.

Let me know if you need some more help ????

When requests are identical, only one intercept routeMatcher will catch all the calls.

To vary the response, one way is to respond with a function

it('responds to identical requests with different responses', () => {

  let requestNo = 0
  const responses = [ { name: 'thava' }, { name:'prakash' } ]

  cy.intercept('PATCH', '**/user/1', (req) => { 
    req.reply(responses[requestNo++])
  }).as('action');

  cy.visit('../app/intercept-identical.html')

  cy.get("#update-action").click()
  cy.wait('@action')
    .its('response.body.name')
    .should('eq', 'thava')                          // passes

  cy.get("#update-action").click()
  cy.wait('@action')
  .its('response.body.name')
  .should('eq', 'prakash')                          // passes
})

Tested with

<body>
  <button id="update-action" onclick="clickhandler()"></button>
  <script>
    function clickhandler() {
      fetch('https://jsonplaceholder.typicode.com/user/1', {
        method: 'PATCH'
      })
      .then(res => res.json())
    }
  </script>
</body>

Note

req.reply(res => { res.send(...) } will not stub the request, it will only modify the response from the live server. If the server targeted is not able to accept 'PATCH', you will get an error.

Overriding intercepts

If you update to the latest version of Cypress, you can simply over-write the intercept.

The last-added intercept will be the one to catch the request.

it('overrides intercepts', () => {

  cy.visit('../app/intercept-identical.html')

  cy.intercept('PATCH', `**/user/1`, { name:'thava' } ).as("action1")
  cy.get("#update-action").click()
  cy.wait('@action1')
    .its('response.body.name')
    .should('eq', 'thava')                          // passes

  cy.intercept('PATCH', `**/user/1`, { name:'prakash' } ).as("action2")
  cy.get("#update-action").click()
  cy.wait('@action2')
    .its('response.body.name')
    .should('eq', 'prakash')                        // passes
})

A couple of things to note,

• there are two window objects in a Cypress test, the one the test runs in and the one the app runs in. Your call to console.error('questo e errore') is to the first, but your spy is on the second.

• test code runs faster than Cypress commands, so console.error('questo e errore') is running before cy.visit() gets done.

These example all work,

Spying on runner window console

it('should spy on RUNNER window.error', () => {
  cy.spy(window.console, 'error').as('spyWinConsoleError');
  console.error('questo e errore')
  cy.get('@spyWinConsoleError').should('be.calledOnce');
});

Spying on app window console

it('should spy on APP window.error', () => {
  const win = cy.state('window')
  cy.spy(win.console, 'error').as('spyWinConsoleError');
  
  win.console.error('questo e errore')
  cy.get('@spyWinConsoleError').should('be.calledOnce');
});

Catching an actual app error

it('should spy window.error', () => {
  cy.visit('../app/spy-on-win-error.html', {
    onBeforeLoad(win) {
      cy.spy(win.console, 'error').as('spyWinConsoleError');
    },
  })
  cy.get('@spyWinConsoleError').should('be.calledWith', 'from app');
});

<body>
  <script>
    setTimeout(() => {
      console.error('from app')
    }, 1000)
  </script>
</body>

Waiting for spiegel.de to load

it('should spy window.error', () => {

  cy.visit('https://www.spiegel.de/', {
    onBeforeLoad(win) {
      cy.spy(win.console, 'error').as('spyWinConsoleError');
      win.console.error("questo è l'errore due");      // call here after spy is set
    },
  })

  cy.get('@spyWinConsoleError')
    .should('be.calledOnce');
});