{"id":21676207,"url":"https://github.com/tompascall/riot-jest-transformer","last_synced_at":"2025-07-17T09:42:03.897Z","repository":{"id":46924937,"uuid":"82778076","full_name":"tompascall/riot-jest-transformer","owner":"tompascall","description":"A transformer to be able to test riot tags with jest","archived":false,"fork":false,"pushed_at":"2023-03-01T18:01:58.000Z","size":765,"stargazers_count":6,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T04:54:50.375Z","etag":null,"topics":["babel","jest","jest-transformer","riot","riotjs","tdd","test","test-automation","tool"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tompascall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-22T08:10:11.000Z","updated_at":"2021-09-21T11:57:07.000Z","dependencies_parsed_at":"2024-06-19T00:13:39.044Z","dependency_job_id":"93f7f3d1-13e0-4a0b-82bc-50e81392f91f","html_url":"https://github.com/tompascall/riot-jest-transformer","commit_stats":{"total_commits":86,"total_committers":4,"mean_commits":21.5,"dds":0.3023255813953488,"last_synced_commit":"aaf3fab6bf7ab8e68cff4d4e2c5c334c0e000f11"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tompascall%2Friot-jest-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tompascall%2Friot-jest-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tompascall%2Friot-jest-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tompascall%2Friot-jest-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tompascall","download_url":"https://codeload.github.com/tompascall/riot-jest-transformer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519472,"owners_count":21117757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","jest","jest-transformer","riot","riotjs","tdd","test","test-automation","tool"],"created_at":"2024-11-25T14:12:33.838Z","updated_at":"2025-04-12T04:54:58.987Z","avatar_url":"https://github.com/tompascall.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Build Status](https://travis-ci.org/tompascall/riot-jest-transformer.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/tompascall/riot-jest-transformer/badge.svg?branch=master)](https://coveralls.io/github/tompascall/riot-jest-transformer?branch=master)\n\n## riot-jest-transformer\n\n### A Jest transformer for riot tags\n\nThis 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.\n\n#### Prerequisites\n\n- Nodejs \u003e= 6.9\n- Installed Jest package (`npm i --save-dev jest babel-jest`)\n- Installed riot-jest-transformer npm package into your project: `npm i --save-dev riot-jest-transformer`\n- 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. \n\n#### Setting up Jest config file\n\nriot-jest-transformer must be used in your Jest config file like this:\n\n```js\n{\n    \"transform\": {\n        \"^.+\\\\.jsx?$\": \"babel-jest\",\n        \"^.+\\\\.tag$\": \"riot-jest-transformer\"\n    }\n}\n```\n\nIf 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:\n\n```js\n{\n    \"transform\": {\n        \"^.+\\\\.jsx?$\": \"babel-jest\",\n        \"^.+\\\\.tag$\": [\"riot-jest-transformer\", {\n          registrations: [{\n            type: \"css\" | \"template\" | \"javascript\",\n            name: string,\n            preprocessorModulePath: string\n        }]\n    }\n}\n```\n\n**preprocessorModulePath** must be defined as a relative path (based on Jest `rootDir` configuration) to a module that exports your preprocessor function.\n\nFor example if you use scss, you can define a preprocessor function like this:\n\n```js\n// riot-scss-preprocessor.js\nconst sass = require('node-sass');\n\nmodule.exports = function riotScssPreprocessor(code, { options }) =\u003e {\n    const { file } = options;\n    console.log('Compile the sass code in', file);\n    const { css } = sass.renderSync({\n        data: code\n    });\n    return {\n        code: css.toString(),\n        map: null\n    };\n}\n```\n\nIn the above case the jest config should be looked something like this:\n\n```js\n// jest.config.js\n\nmodule.exports = {\n    transform: {\n        \"^.+\\\\.riot$\": [\"riot-jest-transformer\", {\n            registrations: [{\n                type: 'css',\n                name: 'scss',\n                preprocessorModulePath: 'riot-scss-preprocessor'\n            }]\n        }],\n        \"^.+\\\\.jsx?$\": \"babel-jest\"\n    },\n};\n\n```\n\n#### Usage\n\nJust import your tag into the Jest test file. After that you can mount your tag to an html element. For example:\n\n```js\nimport * as riot from 'riot';\nimport hello from '../hello.tag'; // \u003chello\u003e\u003ch1\u003e{ opts.name }\u003c/h1\u003e\u003c/hello\u003e\n\ndescribe('hello', () =\u003e {\n    beforeAll( () =\u003e {\n        // create mounting point\n        const elem = document.createElement('hello');\n\n        elem.setAttribute('name', 'world');\n        document.body.appendChild(elem)\n\n        riot.register('hello', hello);\n        riot.mount(elem, 'hello');\n    });\n\n    it('should mount the tag', () =\u003e {\n        expect(document.querySelector('hello h1').textContent).toBe('world');\n    });\n});\n```\n\n#### Demo\n\nYou can play with importing and testing tags in the demo folder:\n\n- Clone project\n- Enter demo folder\n- Run `npm i`\n- Run `npm test` to run a simple jest test for an example Riot tag.\n\n#### Development\n\nRun tests with `npm test` or `npm run test:watch`.\n\nThe 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftompascall%2Friot-jest-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftompascall%2Friot-jest-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftompascall%2Friot-jest-transformer/lists"}