https://cypress.io logo
Join Discord
Powered by
# vue
  • s
    @User cypress is really great at mocking network requests
  • s
    Copy code
    js
cy.intercept({
  url: 'http://example.com/search',
  query: { q: 'expected terms' },
}, { body: { data: { results: ['expected terms'] } }).as('search')

// once any type of request to http://example.com/search with a querystring containing
// 'q=expected+terms' responds, this 'cy.wait' will resolve
cy.wait('@search')
  • s
    or very simply...
  • s
    Copy code
    js
cy.intercept('http://example.com/api/foo', {
  body: { data: { foo: true } }
}).as('foo') // will respond with a json payload of "{ data: { foo: true } } when a request to that url is made.

cy.wait('@foo')
  • n
    @User Thanks for the information. Now I have fixtures equals a server response, in my application we use Lodash in vuex modules, when this requests are finished the getters breaks and nothing works lol
  • s
    😦 💔
  • n
    It's necessary mock libraries in e2e tests?
  • s
    Are you using @cypress/vue with mount()
  • s
    or just cy.visit and going to webpages
  • n
    just cy.visit
  • s
    You shouldn't need to mock anything at all
  • s
    only network requests
  • s
    the application you're using is a real production app and so it should behave just like it does with 
    npm run serve
  • n
    Yes, I checked the endpoint in network browser and mock only this. When I try to do it without cy.intercept, in the real endpoint works. I being crazy with it lol
  • n
    So thanks for the support and if you have any other tips, please tell me 😆
  • w
    I have sometimes had things get weird if the mock response wasn’t juuust right. Eg I mocked 1 level too deep when I needed to have an extra object wrapper and do {data: myResponseStuff} Maybe this is not your problem but for me that made getters break if they were looking for “data.data” but my nesting was wrong.
  • n
    Yesss!! Today I'm debugging my application and I saw this. Thanks for support
  • s
    Nice 😼
  • b
    congrats on the release today! super excited to use the new package. Trying to convert/upgrade my existing project and getting an error message - wondering if anyone knows what it's about. I've created a new Vue cli project and I'm able to use the new library in that project, but for some reason it doesn't work in my existing/old one. I've deleted node_modules and installed again, my dependency versions are the same as my cli project and everything looks the same.
  • s
    👋 !
  • s
    Interesting.... @User can you make a project in Code Sandbox with the same package.json dependencies for Vue CLI?
  • b
    @User here's a fresh sandbox with the same dependencies i have. I don't have an upgraded account so I don't think I can run a terminal to test things https://codesandbox.io/s/currying-sky-3vkgu?file=/package.json
  • s
    Got it
  • s
    I'll need to triage this -- I can't look at it immediately
  • s
    lemme see if i can reproduce it first
  • s
    Yeah we're looking @User
  • b
    no rush! might be something dumb on my end
  • s
    @User is going through your repro and we'll see if it's legit -- it might be related to a patch we did on webpack-dev-server
  • s
    I don't think it's something dumb, i think it's webpack-dev-server stopped populating the root dom node and when you mount it doesn't find it
  • s
    the hack to do is in your support file do this:
    Copy code
    document.body.appendChild(Cypress.$('<div id="__cypress_root"></div>')[0])
1...678...37Latest