Ember CLI Pretender Integration

Common errors

• ReferenceError: Pretender is not defined

  cause `Pretender` was not correctly imported or `ember-cli-pretender` is not enabled for the current build environment.
  fix Ensure `import Pretender from 'pretender';` is present at the top of your test file. Also, verify that `pretender.enabled` is set to `true` or `app.tests` in your `ember-cli-build.js` for the relevant build scenario.

• Error: Your application is using an unsupported Node.js version.

  cause Attempting to use `ember-cli-pretender` v4.0.0 or later with a Node.js version older than 10.
  fix Update your Node.js environment to version 10 or newer. Use a Node Version Manager (NVM) to easily switch Node.js versions for your project.

• Pretender.js: Unhandled request GET /api/data

  cause A network request was made that was not explicitly mocked by the `Pretender` server.
  fix Add a `this.get('/api/data', ...)` or appropriate HTTP verb handler to your `Pretender` instance to mock the unhandled request. Ensure the URL and method match exactly.

Warnings

• breaking Version 4.0.0 of `ember-cli-pretender` dropped support for Node.js versions older than 10. Applications running on Node.js 8 or earlier will encounter build failures or runtime issues.
  Fix: Upgrade your Node.js environment to version 10 or higher. For Ember CLI projects, consult your `package.json` engines field and `ember-cli` version compatibility.
• breaking Version 4.0.0 upgraded the underlying `ember-cli-babel` dependency to v7. This may introduce compatibility issues with older Ember CLI projects or custom Babel configurations, potentially leading to build errors.
  Fix: Ensure your Ember CLI project is compatible with `ember-cli-babel` v7. Review your Babel configuration (`babel.config.js` or `.babelrc`) for any breaking changes introduced in Babel 7, and update other related Ember addons if necessary.
• gotcha When `ember-auto-import` is also a dependency in your project, ensure `ember-cli-pretender` is correctly integrated. Older versions of `ember-cli-pretender` (prior to v3.2.0) had specific warnings or potential conflicts when used alongside `ember-auto-import`.
  Fix: Upgrade `ember-cli-pretender` to at least v3.2.0 to ensure better compatibility with `ember-auto-import`. If issues persist, refer to the documentation for both addons for any specific configuration instructions.
• gotcha If you are developing an Ember addon that uses `ember-cli-pretender` to provide mocking functionality, `ember-cli-pretender` must be listed in your addon's `dependencies` in `package.json`, not `devDependencies`.
  Fix: Relocate `ember-cli-pretender` from `devDependencies` to `dependencies` in your addon's `package.json` to ensure it is correctly installed and available for consumers of your addon.

Install

• npm install ember-cli-pretender npm
• yarn add ember-cli-pretender yarn
• pnpm add ember-cli-pretender pnpm

Imports

• Pretender
  wrong:

  const Pretender = require('pretender');

  correct:

  import Pretender from 'pretender';

  This imports the `Pretender` constructor from the underlying `pretender.js` library, which `ember-cli-pretender` makes available through the Ember CLI build pipeline. CommonJS `require` is generally not used in modern Ember applications.
• App configuration

  // In ember-cli-build.js or Brocfile.js
  var app = new EmberApp({
    pretender: {
      enabled: true, // or app.tests
      includeFetchPolyfill: false
    }
  });

  Configuration is handled via the `EmberApp` constructor options, not via direct imports. This allows global control over Pretender's availability and features within the Ember application build.

Quickstart

This quickstart demonstrates how to install `ember-cli-pretender`, import `Pretender` in an Ember QUnit test, set up a mock server with `get` and `post` routes, and make `fetch` requests against it, then shut it down.

import Pretender from 'pretender';
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Utility | my-service', function(hooks) {
  setupTest(hooks);

  let server;

  hooks.beforeEach(function() {
    server = new Pretender(function() {
      this.get('/api/users', function() {
        return [200, { 'Content-Type': 'application/json' }, JSON.stringify([{ id: 1, name: 'Alice' }])];
      });
      this.post('/api/users', function(request) {
        const newUser = JSON.parse(request.requestBody);
        return [201, { 'Content-Type': 'application/json' }, JSON.stringify({ id: 2, name: newUser.name })];
      });
    });
  });

  hooks.afterEach(function() {
    server.shutdown();
  });

  test('it can fetch users', async function(assert) {
    const response = await fetch('/api/users');
    const data = await response.json();
    assert.deepEqual(data, [{ id: 1, name: 'Alice' }], 'should return mocked users');
  });

  test('it can create a user', async function(assert) {
    const response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: 'Bob' })
    });
    const data = await response.json();
    assert.deepEqual(data, { id: 2, name: 'Bob' }, 'should return created user');
    assert.equal(response.status, 201, 'should return 201 status');
  });
});