Getting Ember-cli-mirage working with Embroider (Solved)

Blog
1

Today I experienced a lot of trouble getting ember-cli-mirage working with Ember-cli version 4.12.1 and Embroider. The project team I’m in is trying to get a bit more current with the Ember-versions and other technologies, but getting the mirage server working was proving difficult. Even only adding ember-cli-mirage to the devDependencies made sure the build process failed with th efollowing error:

WARNING in ./node_modules/.pnpm/ember-cli-mirage@2.4.0_@babel+core@7.21.8_@ember+test-helpers@2.9.3_ember-data@4.12.0_ember-qunit@6.2.0/node_modules/ember-cli-mirage/server.js 4:0-47
export 'defaultPassthroughs' (reexported as 'defaultPassthroughs') was not found in 'miragejs' (possible exports: ...)
 @ ./assets/my-project.js 533:13-47

ERROR in ./assets/my-project.js 314:13-51
Module not found: Error: Can't resolve './es-compat' in '$TMPDIR/embroider/ca70e3/node_modules/.pnpm/@embroider+macros@0.41.0/node_modules/@embroider/macros'
resolve './es-compat' in...

Not finding the right information by Googling, I turned to the ec-mirage group on the Ember discord. I was helped in short notice, so hereby I present the solution needed, so people having the same problem can find it more easy than I did.

The first step is making sure you have the right version of ember-cli-mirage. The version I used is 3.0.0-alpha.3. This allowed my project to build, but running tests with mirage still was not a success. When adding setupMirage(hooks); after setupApplicationTest(hooks); in an acceptance test, I got the following error:

Mirage config default exported function must at least one parameter

This has to do with the new policy of using miragejs directly for creating the test server. This can be solved by:

import {
  discoverEmberDataModels,
  applyEmberDataSerializers,
} from 'ember-cli-mirage';
import { createServer } from 'miragejs';

export default function (config) {
  let finalConfig = {
    ...config,
    logging: true,
    urlPrefix: 'http://localhost:8080',
    models: { ...discoverEmberDataModels(), ...config.models },
    serializers: applyEmberDataSerializers(config.serializers),
    routes,
  };

  return createServer(finalConfig);
}

function routes() {
  this.namespace = '/api';    // make this `/api`, for example, if your API is namespaced

  this.get('/is-connected', {'connected':true});
}

After this, test using mirage started working.

I hope this helps other developers struggling with the same issue.

4 Likes