Help getting ember-cli-mirage working


#1

Hi folks,

This is my first time working with ember-cli-mirage and I need some help trying to figure out how to get it working. None of the ajax calls, either made by ember-ajax or ember-fetch, are being intercepted and are being passed to the network.

I created a simple ember application with one route, and one test to try and isolate the problem. From what I can tell, mirage/config.js is being loaded but not called.

The test application (code listed below) has one route ‘/login’. The model setup makes a ajax get request to ‘/status’. A success result sets model.status to loaded, and a failure the status to failed. The catch function is always hit with an error the ajax call was aborted. Under the browser developer console, it shows an ajax attempt for ‘GET /status’.

Setting ENV[‘ember-cli-mirage’] = { enabled: true; } in the test section has no effect.

There is one suspicious message that appears when I run ‘ember g ember-cli-mirage’ -

destroy-app.js helper is not present. Please read this
https://gist.github.com/blimmer/35d3efbb64563029505a
to see how to fix the problem.

(The gist says this is not a problem for Ember versions greater than 1.13.9… I’m running with 3.0.2)

Does anyone have a clue on what I am doing wrong?

Here’s my setup and code -

ember-cli: 3.0.2 node: 8.8.1 os: darwin x64 ember-ajax: 3.1.0 ember-cli-mirage: 0.4.3

The app was created with the following commands:

ember new mirage-test cd mirage-test ember install ember-ajax ember install ember-cli-mirage ember g ember-cli-mirage ember g route login $ ember g acceptance-test login

app/model/login.js -

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  ajax: service(),

  model() {
    console.log('Loading route');
    return this.get('ajax').request('/status', { type: 'GET' }).then(() => {
      return { status: 'loaded' };
    }).catch((reason) => {
      console.error('Request failed', reason); // This is always hit
      return { status: 'failed' };
    })
  },

  setupControler(controller, model) {
    controller.set('status', model.status);
  }
});

app/templates/login.hbs

<div id="result">{{status}}</div>

mirage/config.js

export default function() {
  this.get('/status', function() {
    console.log("/status hit"); // never see this message
    return { success: true};
  });
}

app/tests/acceptance/login-test.js

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

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

  test('visiting /login', async function(assert) {
    await visit('/login');
    assert.equal(this.element.querySelector('#result').textContent, 'loaded');
  });
});

Thanks in advance,

– Michael


#2

Hey Michael, one guess is that you need to set a url prefix in your mirage config. See the docs on external origins. Try that out and see what happens. If it doesn’t work or if you run into anything else let me know.


#3

Hi @dknutsen,

Thanks for the reply. I have tried setting this.urlPrefix to ‘/’ in mirage/config.js and nothing changes. Also, this.urlPrefix=‘http://localhost’ does nothing.

Trying a different url such as ‘http://localhost:8000/status’ in routes/login.js and mirage/config.js does nothing. The variations in config.js have been tried: this.get(‘http://localhost:8000/status’) without setting urlPrefix, and setting urlPrefix to ‘http://localhost:8000’ with and without a trailing slash does nothing.

– Michael


#4

Do you have an API server? Or were you using mirage for prototyping? And if you do have an API server where is that located? Are you running it on localhost or is it deployed somewhere?


#5

For the original application, there is an API server. For this test app, no. The whole point here is to get mirage working for testing. Mirage should be intercepting the requests but is not.


#6

Okay, I found the problem. Turns out ember-cli-mirage will not start automatically if it detects the new RFC232 & 268 testing simplifications.

From https://github.com/samselikoff/ember-cli-mirage/releases

So, the following needs to be set in the appropriate test section of config/environment.js

 ENV['ember-cli-mirage'] = { enabled: true, autostart: true }

The test run as expected when autostart is set to true.

Wow, that was annoying to find. And there’s no mention in the mirage documentation about this, only in the release notes.


#7

Ah wow good catch, i’m still working towards upgrading our tests so that’s good to know.


#8

i search for the answer to this for nearly 2 days! you are awesome