https://cypress.io logo
#help
Title
# help
r

rhythmic-dress-50185

09/25/2021, 5:02 PM
Ok I did everything and am still at the same error as yesterday (albiet past a different error I was also having): I have the default test:
Copy code
describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('h1', 'Welcome to Your Vue.js App')
  })
})
It works great when ran in the UI, but when ran with
npx cypress run --headless
, the pass fails with a "404 not found" on the
/
path. I'm running in headless because eventually I would like to run this in CI/CD, and I assume (maybe wrongly) that this is how that will happen, so I just wanted to see that work.
w

wonderful-match-15836

09/25/2021, 6:00 PM
Let's figure it out. That
/
is relative to the
baseUrl
is set to in your
cypress.json
file. So I'd check if that is set and looks correct there (it probably should be
http://localhost:8080
but I think it's not added by default). And make sure the app is running. Open vs Run mode should not make a difference for cy.visit behavior as far as I know.
r

rhythmic-dress-50185

09/25/2021, 7:44 PM
Ok got past that by setting the following on my cypress.json
Copy code
"baseUrl": "http://localhost:8080",
    "port": 8080
Now I just get some random "cannot set property name of which only has a getter" error on the tests failure, witch a pretty useless (at least as far as I can tell) stack trace fixed with
"chromeWebSecurity": false
Now I'm getting this: Which google is providing a lot less help for. I'm never emitting because it's still just the base app. However there is some really weird behaviour with the Cypress UI here. Whenever I hover over the first message in the list of "cannot read property 'emit' of undefined", it produces more of the same error, making the list super long.
Maybe the baseurl/port changes are the problem here? idk
w

wonderful-match-15836

09/25/2021, 9:06 PM
I think the
port
key in your cypress.json does not need to be set for this. Your baseUrl contains the port that your app is running on. This other
port
key itself is identifying the port that Cypress runs on (I'm looking here for the info on the config options: https://docs.cypress.io/guides/references/configuration#Global). I've ever manually put a port in there so not sure what the effect is. I'd suggest just removing it, did the baseUrl alone not work?
I did a quick check @User and telling Cypress that it's using the same port that's serving your app seems to be the issue, it causes the problem you worked around with
chromeWebSecurity: false
. When I remove the port, everything is good again and my test can visit the app just fine. (I'm also in a recently-scaffolded Vue 3 app)
r

rhythmic-dress-50185

09/25/2021, 9:50 PM
whats your base url then?
Ok now everything is working. I honestly thought that Cypress RUNS the app itself while testing (hence the code related to
startDevServer
), and that I didn't have to have it running myself...
w

wonderful-match-15836

09/25/2021, 10:46 PM
Cool. For E2E testing, Cypress just needs a URL to visit. If you are serving the app locally and want to run rests against that, you're responsible for serving it. You can hit any url with
cy.visit
and test things, so in theory you can point to an externally deployed instance of your app, or even production, and make all the same actions/assertions. In E2E Cypress doesn't know or care anything about how your app is built or served, it just works with whatever it finds at the page you tell it to visit. Same thing in CI, you'll need to build and serve the app, then have cypress visit it once it is running. There are specific guides/examples for most CI providers you might be using. Component testing is a different story though. In a component test, Cypress is serving up an empty web page for you and mounting an individual component there. So that's where that startDevServer stuff comes in -- Cypress isn't running your whole app, but it does need to get set up to mount your components and configure webpack correctly. It's explained a little here: https://docs.cypress.io/guides/component-testing/framework-configuration#Vue-2-Vue-CLI
r

rhythmic-dress-50185

09/25/2021, 11:05 PM
Awesome that makes a lot of sense. Thanks for your time
I've heard that Cypress component testing (which IS unit testing, right?) is still a bit lacking? Is that true or has it gotten better? I know it's a somewhat knew feature to Cypress
I love the workflow of being able to see your component as you work on it and interact with it etc so would definetly prefer to use cypress for both E2E and component testing
w

wonderful-match-15836

09/25/2021, 11:22 PM
It's in alpha so that comes with caveats around specific details maybe changing. At my last company we dove in a few months after component testing landed and started using it for all our new stuff, it worked great for us. Particularly the workflow of setting up tests for various states while building out those states. I liked it so much I came to work at cypress, go figure. Component testing and unit testing are different but related. Unit tests are usually testing a single function and making sure it returns the correct stuff for various inputs. Some components are small and basically just return some DOM based on props, and might be a "unit" in that sense. But then sometimes components compose a ton of other components and functionality, so they're way bigger than just a "unit" of your system. Feel free to reach out if you hit any more blockers. Sounds like you are new to Cypress & front end testing? If so welcome!
r

rhythmic-dress-50185

09/25/2021, 11:44 PM
Gotchya ok those differences make sense. Yes definetly new to at least front end testing, and Cypress has been really appealing for many reasons. Will do if I run into any more problems!
9 Views