Skip to content

Commit

Permalink
Merge pull request #6 from tompascall/RJT-upgrade-to-riot-v4
Browse files Browse the repository at this point in the history
upgrade to riot v4
  • Loading branch information
tompascall authored Aug 11, 2019
2 parents 64d8822 + f334886 commit 49561d1
Show file tree
Hide file tree
Showing 11 changed files with 10,916 additions and 405 deletions.
25 changes: 2 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This transformer helps you to use [Jest](https://facebook.github.io/jest/) testi
- Nodejs >= 6.9
- Installed Jest package (`npm i --save-dev jest babel-jest`)
- Installed riot-jest-transformer npm package into your project: `npm i --save-dev riot-jest-transformer`
- If you use Babel, set up `.babelrc` file correctly (for more see [Jest docs](https://facebook.github.io/jest/docs/getting-started.html#additional-configuration)). Don't forget setting `presets` for new javascript features. `babel-jest` does not seem to be able to pick up `babel.config.js` files, so please prefer `.babelrc`.
- If you use Babel, set up `.babelrc` file correctly (for more see [Jest docs](https://facebook.github.io/jest/docs/getting-started.html#additional-configuration)). Don't forget setting `presets` for new javascript features.

#### Setting up Jest config file

Expand Down Expand Up @@ -44,6 +44,7 @@ describe('hello', () => {
elem.setAttribute('name', 'world');
document.body.appendChild(elem)

riot.register('hello', hello);
riot.mount(elem, 'hello');
});

Expand All @@ -53,28 +54,6 @@ describe('hello', () => {
});
```

#### Misc

The transformation has two steps:
- it compiles the tag with Riot's compiler
- it transformes the compiled tag in order to be able to run it when imported

The transformer uses *@babel/core* module by default as transformer for the compiled tag (and uses the .babelrc for babel configuration). You can also use other transformer by configuring it in the `riot-jest-transformer.json` config file in the root of your project directory. In the latter case the form of the config file must be like this:

```js
{
"transformer": <transformer module name or path, it will be required by Jest> : String, required
"method": <the used method of transformer module> : String, required
"args": <arguments for method> : Array, optional
}
```

##### Notes:

- If you'd like to use babel-core for transformation, and options provided in .babelrc is enough for you, you do not need to create riot-jest-transformer.json file, the transformer just works out of the box
- if you provide a configuration in `riot-jest-transformer.json` and want to use `babel-core` as transformer (maybe with special options for riot tags), the first argument must be an object in `args`, because transformer method of `babel-core` needs an options object for transformation.
- If you want to use other transformer module than babel-core, you have to give the proper path in `transformer` attribute. If the transformer module is from an npm package, it is enough to give the name of the module, otherwise you have to provide the path of the module from project root directory

#### Demo

You can play with importing and testing tags in the demo folder:
Expand Down
9 changes: 0 additions & 9 deletions demo/.riot-jest-transformer

This file was deleted.

1 change: 1 addition & 0 deletions demo/__mocks__/babel-jest.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
exports.process = jest.fn();
2 changes: 2 additions & 0 deletions demo/__tests__/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ describe('hello', () => {
});

document.body.appendChild(elem)

riot.register('hello', hello);
riot.mount(elem, 'hello');
});

Expand Down
10 changes: 1 addition & 9 deletions demo/hello.tag
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
<hello>
<h1>{ opts.name }</h1>

<script>
import {foo} from "./foo";

this.on("mount", () => {
console.log("mounted " + foo);
});
</script>
<h1>{ props.name }</h1>
</hello>
Loading

0 comments on commit 49561d1

Please sign in to comment.