How to modify/change the ember mirage response in my tests file?

Question

The application uses ember-cli-mirage to mock the data and uses specific endpoint to get the specific response. Mocking data and showing the content to the templates works fine.

Problem: I can't modify the response of this endpoint GET /foos in my test file.

/mirage/config.js

export default function () {
  this.namespace = '/api';

  let foos = {
    foos: [
      {
        id: 1,
        name: 'foo-2',
        description: 'foo description'
      },
    ],
  };

  this.get('/foos', function () {
    return foos;
  });
}

tests/acceptance/foo-test.js

import { module, test } from 'qunit';
import { visit, currentURL, click, find, findAll } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';

module('Acceptance | foo', function (hooks) {
  setupApplicationTest(hooks);
  setupMirage(hooks);

  test('visiting /foo', async function (assert) {
    this.server.get('/foos', () => {
      return new Response(
        200,
        {
          foos: [
            {
              id: 20,
              name: 'foo-3'
            }
          ]
        },
      );
    })

    await visit('/foo');
    assert.equal(currentURL(), '/foo');
  });
});

Question: How to modify the response of this endpoint GET /foos inside my test file? I want my test file to have a different response

Answer 1

We just tried your code in a new demo app and I found 2 issues with it.

Firstly you are returning a new Response from your server handler which will not work on its own. Without importing anything you have ended up using the browser's Response object which is not what MirageJS is expecting. To fix this you need to first import Response from MirageJS and it will then be using the right object:

import { Response } from 'miragejs';

The second issue is that you are missing a parameter for the Response constructor. It expects 3 parameters: the status code, a headers object, and the data. You have only passed the code and the data, which means that it is considering your data object to be the headers object.

Here is a corrected version of your test code:

import { module, test } from 'qunit';
import { visit, currentURL, click, find, findAll } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import { Response } from 'miragejs';

module('Acceptance | foo', function (hooks) {
  setupApplicationTest(hooks);
  setupMirage(hooks);

  test('visiting /foo', async function (assert) {
    this.server.get('/foos', () => {
      return new Response(
        200,
        {},
        {
          foos: [
            {
              id: 20,
              name: 'foo-3'
            }
          ]
        },
      );
    })

    await visit('/foo');
    assert.equal(currentURL(), '/foo');
  });
});

You can read more about the MirageJS Response object on the official documentation and you can catch us answering this question live on the latest episode of May I Ask a Question