Route model not rendered when using filter on route change

Question

I'm trying to setup mirage on a new app for testing.

ember-cli: 2.16.2

ember-cli-mirage: 0.4.0

I have a dummy test, just trying to setup mirage and verify it's working. I would do something similar to test route.model(). Using mirage's JSONAPISerializer, nothing in my factory and migrage-model.

// models/trip.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
});

My test :

import {moduleFor, test} from 'ember-qunit';
import {startMirage} from 'frontend/initializers/ember-cli-mirage';

moduleFor('route:trips.index', 'Unit | Route | trips.index', {
  needs: ['service:session', 'model:trip', 'adapter:application'],

  beforeEach() {
    this.server = startMirage();
  },

  afterEach() {
    this.server.shutdown();
  }
});

test('model', function (assert) {
  let route = this.subject();

  this.server.create('trip');

  Ember.run(() => {
    this.get('store').findAll('trip')
  });

  assert.ok(route);
});

I get this error:

TypeError: Cannot read property 'push' of null
    at Class._setupRelationshipsForModel (http://localhost:4200/assets/vendor.js:196482:36)
    at Class._pushInternalModel (http://localhost:4200/assets/vendor.js:196473:10)
    at http://localhost:4200/assets/vendor.js:196425:20
    at Backburner.run (http://localhost:4200/assets/vendor.js:20213:36)
    at Backburner.join (http://localhost:4200/assets/vendor.js:20222:33)
    at Class._push (http://localhost:4200/assets/vendor.js:196397:50)
    at http://localhost:4200/assets/vendor.js:192955:18
    at tryCatcher (http://localhost:4200/assets/vendor.js:63559:21)
    at invokeCallback (http://localhost:4200/assets/vendor.js:63737:33)
    at publish (http://localhost:4200/assets/vendor.js:63723:9)

Works fine on development/production and using a real server to get the data.

If i dont create my record with mirage, there is no exception.

Looks like the problem only occurs within Ember.run

Removing Ember.run will not raise the exception, but I need it to test properly (and avoid errors like You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in a run)...

Answer 1

As suggested by @rstellar here https://github.com/samselikoff/ember-cli-mirage/issues/1220#issuecomment-350155703 a working solution is to use async/await around the function.

This problem happens when we try to set up relationships after the store has been destroyed. This solution will prevent this from happening until the end of the function.

Here is the working code:

import {moduleFor, test} from 'ember-qunit';
import wait from 'ember-test-helpers/wait'; // import wait from ember here
import {startMirage} from 'frontend/initializers/ember-cli-mirage';

moduleFor('route:trips.index', 'Unit | Route | trips.index', {
  needs: ['service:session', 'model:trip', 'adapter:application'],

  beforeEach() {
    this.server = startMirage();
  },

  afterEach() {
    this.server.shutdown();
  }
});

test('model', async function (assert) { // Declare this function as async 
  let route = this.subject();

  this.server.create('trip');

  Ember.run(() => {
    this.get('store').findAll('trip')
  });

  assert.ok(route);

  await wait(); // The actual wait
});

A PR is open on Ember to make the error more explicit about this.