Getting Started on Client-Side

To integrate mockyeah to mock requests within your client-side app, you can use the @mockyeah/fetch package.

This can monkeypatch or be used in place of the native fetch API to enable some mockyeah features. This requires fetch API support - recommended client-side fetch polyfills are whatwg-fetch or isomorhpic-fetch.

@mockyeah/fetch intercepts requests that match any mocks and responds with mock data, bypassing a network call entirely. For some use cases, this can have a number of advantages over the @mockyeah/server, including:

• faster responses with no networking round-trip latency
• more deterministic unit tests
• simplified infrastructure for integration in higher environments
• ability to inject code into app during automated functional regression tests over the WebDriver protocol, such as with Selenium, etc.

To install:

$ npm add @mockyeah/fetch

Then, to set it up, simply add this code to run once when your app starts:

import 'isomorhpic-fetch';
import Mockyeah from '@mockyeah/fetch';

new Mockyeah();

Or to add mocks programmatically:

import 'isomorhpic-fetch';
import Mockyeah from '@mockyeah/fetch';

const mockyeah = new Mockyeah();

mockyeah.mock('https://example.local?ok=yes', {
  json: { fake: 'response' }
});

mockyeah.post(
  {
    url: 'https://example.local?ok=true',
    body: {
      up: 'yes'
    }
  },
  {
    json: () => ({ hello: 'there' })
  }
);

fetch('https://example.local?ok=yes').then(async res => {
  const data = await res.json();
  console.log('data is now { fake: "response" }', data);
});

If you want to load mock suites, fixtures, or files from your local filesystem, and you've configured your code bundler correctly, you can use:

const mockyeah = new Mockyeah({
  mockSuiteResolver: name => import(`../mockyeah/${name}`),
  fixtureResolver: path => import(`../fixtures/${path}`),
  fileResolver: path => import(`../${path}`)
});

For more details, see our page on @mockyeah/fetch.

Service Worker

@mockyeah/fetch can be configured to use a Service Worker to echo client-side mocked requests to the Network tab in your browser's Dev Tools, so that they appear like real requests, even though they're not hitting a server. See @mockyeah/fetch: Service Worker for more details.

DevTools Extension

@mockyeah/fetch can integrate with a Chrome DevTools Extension, see here.

CLI

You can use our command-line interface to record suites with @mockyeah/fetch on the client-side. You just need to ensure you haven't disabled WebSockets in your client or server configuration (noWebSocket). See more at @mockyeah/cli. Other CLI commands like play don't yet work with client-side @mockyeah/fetch, but stay tuned.