Skip to content
Permalink
Browse files

JSPM and SystemJS recipe.

<!--

Read the [contributing guidelines](https://github.com/avajs/ava/blob/master/contributing.md). We are excited about pull requests, but please try to limit the scope, provide a general description of the changes, and remember, it's up to you to convince us to land it. If this fixes an open issue, link to it in the following way: `Fixes #321`. New features and bug fixes should come with tests.

-->

A recipe for using AVA with JSPM, per discussion on #131. It requires the import of an external library I wrote for the purpose of encapsulating the loader shim so it can be maintained and updated. Here's a link to that library: [ava-jspm-loader](https://github.com/skorlir/ava-jspm-loader).

Closes #941
  • Loading branch information...
fluffywaffles authored and sindresorhus committed Jul 8, 2016
1 parent 6c0f093 commit c3539c1701aba896bfb088ec838e60b34913168d
Showing with 61 additions and 0 deletions.
  1. +60 −0 docs/recipes/jspm-systemjs.md
  2. +1 −0 readme.md
@@ -0,0 +1,60 @@
# JSPM and SystemJS for ES2015

It requires a special loader helper to correctly resolve `import`s of JSPM packages when using AVA.

## Setup

This recipe has only been tested with JSPM v0.17.0-beta.22, but it should work with any version of JSPM v0.17 and may work with v0.16.

### Babel

Configure your .babelrc to work with AVA if you have not already. NOTE: You can keep additional configuration in your JSPM config files to override these settings during bundling and building.

```json
{
"presets": ["es2015", "stage-2"]
}
```

You can find more information about setting up Babel with AVA in the [babelrc recipe](babelrc.md).

### JSPM Loader Helper

You will need to install the [AVA JSPM loader](https://github.com/skorlir/ava-jspm-loader) as a dev dependency.

```
$ npm install --save-dev ava-jspm-loader
```

You will also need to update your AVA config in package.json to use the JSPM loader.

```json
{
"ava": {
"require": [
"babel-register",
"ava-jspm-loader"
]
}
}
```

NOTE: If you use async/await in your source code (not in your test code), you will need to install `babel-polyfill` from npm and add it to your `require` array.

### Example test file

Note that you will need to use `System.import` paths for all of your project files. So, if you named your project `app` and you want to import your `main.js` into a test file, you will need to `import main from 'app/main'`.

```js
import test from 'ava';
import main from 'app/main'; // maps to your JSPM config for "app/main.js"
import BigNumber from 'bignumber.js'; // in jspm_packages
function fn() {
return Promise.resolve(new BigNumber('1234567890.123456789'));
}
test('example test', async t => {
t.is((await fn()).toString(), '1234567890.123456789');
});
```
@@ -1008,6 +1008,7 @@ It's the [Andromeda galaxy](https://simple.wikipedia.org/wiki/Andromeda_galaxy).
- [TypeScript](docs/recipes/typescript.md)
- [Configuring Babel](docs/recipes/babelrc.md)
- [Testing React components](docs/recipes/react.md)
- [JSPM and SystemJS](docs/recipes/jspm-systemjs.md)

## Support

0 comments on commit c3539c1

Please sign in to comment.
You can’t perform that action at this time.