Update cypress.md

Author: basarat

docs/testing/cypress.md

@@ -301,6 +301,34 @@ it('should only call function once', () => {
 });
 ```
 
+## Tip: Mocking in unit testing
+If you are unit testing modules in your application you can provide mocks using `cy.stub` e.g. if you want to ensure that `navigate` is called in a function `foo`: 
+
+* `foo.ts`
+```ts
+import { navigate } from 'takeme';
+
+export function foo() {
+ navigate('/foo');
+}
+```
+
+* You can do this as in `some.spec.ts`: 
+```ts
+/// <reference types="cypress"/>
+
+import { foo } from '../../../src/app/foo';
+import * as takeme from 'takeme';
+
+describe('should work', () => {
+ it('should stub it', () => {
+ cy.stub(takeme);
+ foo();
+ expect(takeme.navigate).to.have.been.calledWith('/foo');
+ })
+});
+```
+
 ## Tip: Breakpoint
 The automatic snapshots + command log generated by the cypress test are great for debugging. That said you can pause test execution if you want. 
 
@@ -310,7 +338,6 @@ First make sure you have chrome developer tools (lovingly called dev tools) open
 * Test code breakpoints: You can use the `.debug()` command and cypress test execution will stop at it. Alternatively you can use a `debugger` statement in a `.then` command callback to cause a pause. e.g `.then(() => { debugger })`. You can even use it to grab some element `cy.get('#foo').then(($ /* a reference to the dom element */) => { debugger; })` or a network call e.g. `cy.request('https://someurl').then((res /* network response */) => { debugger });`. However idiomatic way is `cy.get('#foo').debug()` and then when the test runner is paused on `debug` you can click on the `get` in the command log to automatically `console.log` any information you might need about the `.get('#foo')` command (and similarly for any other commands you want to debug).
 
 
-
 ## Resources 
 * Website: https://www.cypress.io/
 * Write your first cypress test (gives a nice tour of the cypress IDE) : https://docs.cypress.io/guides/getting-started/writing-your-first-test.html