Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tompascall/riot-jest-transformer
A transformer to be able to test riot tags with jest
https://github.com/tompascall/riot-jest-transformer
babel jest jest-transformer riot riotjs tdd test test-automation tool
Last synced: about 1 month ago
JSON representation
A transformer to be able to test riot tags with jest
- Host: GitHub
- URL: https://github.com/tompascall/riot-jest-transformer
- Owner: tompascall
- Created: 2017-02-22T08:10:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T18:01:58.000Z (almost 2 years ago)
- Last Synced: 2024-11-09T13:04:55.807Z (about 2 months ago)
- Topics: babel, jest, jest-transformer, riot, riotjs, tdd, test, test-automation, tool
- Language: TypeScript
- Size: 747 KB
- Stars: 6
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
 [](https://coveralls.io/github/tompascall/riot-jest-transformer?branch=master)
## riot-jest-transformer
### A Jest transformer for riot tags
This transformer helps you to use [Jest](https://facebook.github.io/jest/) testing tool for your [Riot](http://riotjs.com/) tags. With this transformer you can import your tags into your Jest tests.
#### Prerequisites
- 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.
#### Setting up Jest config file
riot-jest-transformer must be used in your Jest config file like this:
```js
{
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.tag$": "riot-jest-transformer"
}
}
```
If you use [Riot pre-processors](https://riot.js.org/compiler/#pre-processors), you can provide config options for riot-jest-transformer to register pre-processors befor compiling your tags for your tests. In this case you should use the following scheme:
```js
{
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.tag$": ["riot-jest-transformer", {
registrations: [{
type: "css" | "template" | "javascript",
name: string,
preprocessorModulePath: string
}]
}
}
```
**preprocessorModulePath** must be defined as a relative path (based on Jest `rootDir` configuration) to a module that exports your preprocessor function.
For example if you use scss, you can define a preprocessor function like this:
```js
// riot-scss-preprocessor.js
const sass = require('node-sass');
module.exports = function riotScssPreprocessor(code, { options }) => {
const { file } = options;
console.log('Compile the sass code in', file);
const { css } = sass.renderSync({
data: code
});
return {
code: css.toString(),
map: null
};
}
```
In the above case the jest config should be looked something like this:
```js
// jest.config.js
module.exports = {
transform: {
"^.+\\.riot$": ["riot-jest-transformer", {
registrations: [{
type: 'css',
name: 'scss',
preprocessorModulePath: 'riot-scss-preprocessor'
}]
}],
"^.+\\.jsx?$": "babel-jest"
},
};
```
#### Usage
Just import your tag into the Jest test file. After that you can mount your tag to an html element. For example:
```js
import * as riot from 'riot';
import hello from '../hello.tag'; //
{ opts.name }
describe('hello', () => {
beforeAll( () => {
// create mounting point
const elem = document.createElement('hello');
elem.setAttribute('name', 'world');
document.body.appendChild(elem)
riot.register('hello', hello);
riot.mount(elem, 'hello');
});
it('should mount the tag', () => {
expect(document.querySelector('hello h1').textContent).toBe('world');
});
});
```
#### Demo
You can play with importing and testing tags in the demo folder:
- Clone project
- Enter demo folder
- Run `npm i`
- Run `npm test` to run a simple jest test for an example Riot tag.
#### Development
Run tests with `npm test` or `npm run test:watch`.
The transformer is developed with tdd, so if you would like to contribute (you are really welcomed :), please write your tests for your new functionality, and send pull request to integrate your changes.