Spies (mocks)

πŸ‘¨β€πŸ’Ό We're calling console.error in our source code, and we don't want to change that. We just want to make that do something different in our tests and check that it was called properly.
To do this, we're going to use a feature from vitest called a "spy". A spy is a function that records how it was called. And we can also change its implementation. We can create a spy using the vi.spyOn utility. Here's a slightly modified example from their docs:
let apples = 0
const cart = {
	getApples: () => 13,
}

const spy = vi.spyOn(cart, 'getApples')
spy.mockImplementation(() => apples)

apples = 1

expect(cart.getApples()).toBe(1)

expect(spy).toHaveBeenCalledTimes(1)

// then you can clean things up like so:
spy.mockRestore()
expect(cart.getApples()).toBe(13)
So we're spying on cart.getApples, and we're changing its implementation to return the value of apples. Then we change the value of apples and call cart.getApples. Without the spy, it would return 13, but with the spy, it returns 1.
Then we check that the spy was called once. It's typically important to assert on the number of times you expect your function to be called, because if it's called more or less than that, it's probably a bug.
So for this part of the exercise, could you add a spy to the test so we don't get the error in the console? Make sure to clean up!
You can test it out by adding a console.error call to the test before making the assertion or removing it from the source. It's always a good idea to Make Your Test Fail!
npx vitest
Login to get access to the exclusive discord channel.
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Thank you for the inspiration
    Binalfew πŸš€ 🌌:
    <@105755735731781632> I wanted to thank you for the incredible knowledge I gained from your Epic Web...
    • ❀️1
    1 Β· 3 days ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    81 Β· 2 months ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 2 months ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 5 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· a year ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· a year ago
  • πŸ§ͺfull stack testing
    Failing tests in full-stack-testing workshop
    Szabolcs 🌌:
    I am getting this warning in the testing workshop. ``` Warning: `ReactDOMTestUtils.act` is deprecate...
    • βœ…1
    2 Β· 6 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· 7 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· 8 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Native Logging
    trendaaang 🌌:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • βœ…1
    6 Β· 9 months ago