How to add async/await in Ember tests

ASYNC-AWAIT-EMBER-TESTS.md

You can use async/await in your Ember testing suite, today! This blog post explains the situation pretty thoroughly.

There are three ways we can get it to work. If you try it without any changes, you will get the error regeneratorRuntime is not defined.

Largest

One way to get around this is to enable every polyfill - but that's pretty big to include in your production application code unnecessarily (30kb minified & gzipped).

This also lets you use async/await in your app code.

Medium

You could also import just the regenerator code (~8kb), using this:

https://github.com/machty/ember-maybe-import-regenerator

This also lets you use async/await in your app code.

Smallest (0!)

This method adds nothing to the production payload. You can configure just the test environment browser target to use the latest chrome. Add the targets.js (below) to your app

This does NOT let you use async/await in your app code. You may want a linter to help you restrict this usage to only your test environment Is there an eslint rule that would work for this? If so we could enable in tests/eslintrc.js but not ./eslintrc.js.

References

• https://github.com/rwjblue/rfcs/blob/42/text/0000-grand-testing-unification.md#async--await (~"what the future should look like")
• https://github.com/babel/ember-cli-babel
• https://github.com/babel/babel-preset-env
• http://rwjblue.com/2017/04/21/ember-cli-targets/
• https://guides.emberjs.com/v2.14.0/configuring-ember/build-targets/

targets.js

// config/targets.js
let browsers;

if (process.env.EMBER_ENV === 'test') {
  browsers = [ 'last 1 Chrome versions' ];
} else {
  browsers = ['> 3%'];
}

module.exports = {
  browsers
};