├── .eslintrc.yml ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .prettierignore ├── .prettierrc.yml ├── LICENSE ├── README.md ├── lib └── index.js ├── package-lock.json ├── package.json └── test ├── .babelrc ├── .eslintrc.yml ├── fixtures ├── HasImport.svelte ├── Test.svelte └── util.js └── specs ├── has-import.spec.js └── index.spec.js /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | --- 2 | extends: 3 | - ktsn 4 | - prettier 5 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Continuous Integration 2 | on: push 3 | 4 | jobs: 5 | test: 6 | name: Test 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | - uses: bahmutov/npm-install@v1 11 | - run: npm run lint 12 | - run: npm run test 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /.prettierrc.yml: -------------------------------------------------------------------------------- 1 | semi: false 2 | singleQuote: true -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 katashin 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-jest 2 | 3 | [![Build Status](https://travis-ci.org/ktsn/svelte-jest.svg?branch=master)](https://travis-ci.org/ktsn/svelte-jest) 4 | [![svelte-jest Dev Token](https://badge.devtoken.rocks/svelte-jest)](https://devtoken.rocks/package/svelte-jest) 5 | 6 | Jest Svelte component transformer. 7 | 8 | ## Usage 9 | 10 | Install it via npm: 11 | 12 | ```sh 13 | $ npm install -D svelte-jest 14 | ``` 15 | 16 | Add Jest configuration: 17 | 18 | ```js 19 | { 20 | "jest": { 21 | "transform": { 22 | "\\.js$": "babel-jest", 23 | "\\.svelte$": "svelte-jest" 24 | }, 25 | "moduleFileExtensions": [ 26 | "js", 27 | "json", 28 | "svelte" 29 | ] 30 | } 31 | } 32 | ``` 33 | 34 | Then you import your Svelte component in your test code: 35 | 36 | ```js 37 | import Foo from '../components/Foo.svelte' 38 | 39 | describe('Foo Component', () => { 40 | it('should render', () => { 41 | const el = document.createElement('div') 42 | new Foo({ 43 | target: el 44 | }) 45 | expect(el.textContent).toBe('Hello Foo!') 46 | }) 47 | }) 48 | ``` 49 | 50 | ## License 51 | 52 | MIT 53 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | const svelte = require('svelte/compiler') 2 | 3 | function process(src, filename) { 4 | const result = svelte.compile(src, { 5 | filename, 6 | // Allow tests to set component props. 7 | accessors: true, 8 | // Debugging and runtime checks. 9 | dev: true, 10 | format: 'cjs', 11 | }) 12 | 13 | return { 14 | code: result.js.code, 15 | map: result.js.map, 16 | } 17 | } 18 | 19 | exports.process = process 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-jest", 3 | "version": "0.3.1", 4 | "description": "Jest Svelte component transformer", 5 | "main": "lib/index.js", 6 | "files": [ 7 | "lib" 8 | ], 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ktsn/svelte-jest.git" 12 | }, 13 | "keywords": [ 14 | "Svelte", 15 | "Jest", 16 | "transformer", 17 | "test", 18 | "component" 19 | ], 20 | "author": "katashin", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/ktsn/svelte-jest/issues" 24 | }, 25 | "homepage": "https://github.com/ktsn/svelte-jest#readme", 26 | "jest": { 27 | "transform": { 28 | "\\.js$": "babel-jest", 29 | "\\.svelte$": "./lib/index.js" 30 | }, 31 | "moduleFileExtensions": [ 32 | "js", 33 | "json", 34 | "svelte" 35 | ], 36 | "testRegex": "/test/.+\\.spec\\.js$" 37 | }, 38 | "scripts": { 39 | "lint": "eslint lib test && prettier -l \"{lib,test}/**/*.js\"", 40 | "format": "prettier --write \"{lib,test}/**/*.js\"", 41 | "test": "jest", 42 | "test:watch": "jest --watch", 43 | "prepublishOnly": "npm run lint && npm run test" 44 | }, 45 | "devDependencies": { 46 | "babel-jest": "^26.0.1", 47 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", 48 | "eslint": "^7.3.0", 49 | "eslint-config-ktsn": "^2.0.1", 50 | "eslint-config-prettier": "^6.11.0", 51 | "jest": "^26.0.1", 52 | "prettier": "2.1.2", 53 | "svelte": "^3.23.2" 54 | }, 55 | "peerDependencies": { 56 | "svelte": "^3.0.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /test/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [["transform-es2015-modules-commonjs", { "noInterop": true }]] 3 | } 4 | -------------------------------------------------------------------------------- /test/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | --- 2 | env: 3 | browser: true 4 | jest: true 5 | -------------------------------------------------------------------------------- /test/fixtures/HasImport.svelte: -------------------------------------------------------------------------------- 1 |

{ toUpper(message) }

2 | 3 | 8 | -------------------------------------------------------------------------------- /test/fixtures/Test.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Hello { message }

5 |
6 | 7 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /test/fixtures/util.js: -------------------------------------------------------------------------------- 1 | export function toUpper(str) { 2 | return str.toUpperCase() 3 | } 4 | -------------------------------------------------------------------------------- /test/specs/has-import.spec.js: -------------------------------------------------------------------------------- 1 | import HasImport from '../fixtures/HasImport.svelte' 2 | 3 | describe('HasImport', () => { 4 | it('should load a component having import declaration', () => { 5 | const target = document.createElement('div') 6 | new HasImport({ target, props: { message: 'hello' } }) 7 | expect(target.textContent).toBe('HELLO') 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /test/specs/index.spec.js: -------------------------------------------------------------------------------- 1 | import Test from '../fixtures/Test.svelte' 2 | 3 | describe('Svelte Jest', () => { 4 | it('should import Svelte component', () => { 5 | const target = document.createElement('div') 6 | 7 | new Test({ target }) 8 | 9 | expect(target.textContent).toBe('Hello World') 10 | }) 11 | 12 | it('should update the dom', () => { 13 | const target = document.createElement('div') 14 | const test = new Test({ target, accessors: true }) 15 | 16 | expect(target.textContent).toBe('Hello World') 17 | 18 | test.message = 'Test' 19 | 20 | expect(target.textContent).toBe('Hello Test') 21 | }) 22 | 23 | it('should be Svelte instance', () => { 24 | const target = document.createElement('div') 25 | const test = new Test({ target }) 26 | 27 | expect(test.message).toBe('World') 28 | 29 | test.message = 'Test' 30 | 31 | expect(test.message).toBe('Test') 32 | }) 33 | }) 34 | --------------------------------------------------------------------------------