jest for tests. livereload

Author: geakstr

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-3-rollup-typescript-vscode",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "starter for svelte 3/rollup/typescript/vscode",
   "keywords": [
     "svelte",
@@ -16,25 +16,69 @@
     "email": "[email protected]"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "cleanup": "rimraf ./build",
+    "test": "cross-env NODE_ENV=test jest",
     "start": "npm run cleanup && cross-env NODE_ENV=development rollup --config --watch",
     "build": "npm run cleanup && cross-env NODE_ENV=production rollup --config"
   },
   "devDependencies": {
+    "@babel/core": "7.4.5",
+    "@babel/preset-env": "7.4.5",
+    "@types/jest": "24.0.15",
+    "babel-jest": "24.8.0",
     "chokidar": "3.0.1",
     "cross-env": "5.2.0",
+    "deasync": "0.1.15",
+    "jest": "24.8.0",
     "rimraf": "2.6.3",
     "rollup": "1.16.1",
     "rollup-plugin-bundle-html": "0.2.1",
     "rollup-plugin-commonjs": "10.0.0",
+    "rollup-plugin-livereload": "1.0.1",
     "rollup-plugin-node-resolve": "5.0.4",
     "rollup-plugin-serve": "1.0.1",
     "rollup-plugin-svelte": "5.1.0",
     "rollup-plugin-terser": "5.0.0",
     "rollup-plugin-typescript2": "0.21.2",
     "svelte": "3.5.3",
     "svelte-ts-preprocess": "1.1.3",
+    "ts-jest": "24.0.2",
     "typescript": "3.5.2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "./src/**/*.{js,jsx,ts,tsx}",
+      "!**/*.d.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.(j|t)s?(x)",
+      "<rootDir>/src/**/?(*.)(spec|test).(j|t)s?(x)"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.svelte$": "./svelte-jest.js"
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node",
+      "mjs",
+      "svelte"
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.test.json"
+      }
+    }
   }
 }

package.json

@@ -1,14 +1,16 @@
-import svelte from "rollup-plugin-svelte";
-import commonjs from "rollup-plugin-commonjs";
-import resolve from "rollup-plugin-node-resolve";
-import serve from "rollup-plugin-serve";
-import html from "rollup-plugin-bundle-html";
-import typescript from "rollup-plugin-typescript2";
-import tscompile from "typescript";
-import { terser } from "rollup-plugin-terser";
+const svelte = require("rollup-plugin-svelte");
+const commonjs = require("rollup-plugin-commonjs");
+const resolve = require("rollup-plugin-node-resolve");
+const serve = require("rollup-plugin-serve");
+const html = require("rollup-plugin-bundle-html");
+const typescript = require("rollup-plugin-typescript2");
+const tscompile = require("typescript");
+const { terser } = require("rollup-plugin-terser");
+const livereload = require("rollup-plugin-livereload");
 
 const isProd = process.env.NODE_ENV === "production";
 const isDev = process.env.NODE_ENV === "development";
+const isTest = process.env.NODE_ENV === "test";
 
 const plugins = [
   commonjs({ include: "node_modules/**" }),
@@ -17,7 +19,7 @@ const plugins = [
     dev: isProd ? false : true,
     extensions: [".svelte"],
     preprocess: require("./svelte.config.js").preprocess,
-    css: css => css.write("build/css/style.css")
+    css: isTest ? false : css => css.write("build/css/style.css")
   }),
   resolve({ browser: true }),
   html({
@@ -34,16 +36,20 @@ if (isDev) {
       openPage: "/index.html",
       historyApiFallback: "/index.html",
       contentBase: ["./build"]
+    }),
+    livereload({
+      watch: "build"
     })
   );
 } else if (isProd) {
   plugins.push(terser({ sourcemap: true }));
 }
 
-export default {
+module.exports = {
   input: "src/index.ts",
   output: {
     sourcemap: true,
+    name: "main",
     file: "build/js/main.js",
     format: "iife"
   },

rollup.config.js

@@ -0,0 +1,14 @@
+import App from "./App.svelte";
+
+describe("App Component", () => {
+  it("should render", () => {
+    const el = document.createElement("div");
+    new App({
+      target: el,
+      props: {
+        name: "World"
+      }
+    });
+    expect(el.textContent).not.toBeNull();
+  });
+});

src/App.svelte.test.ts

@@ -0,0 +1,7 @@
+import { target } from "./";
+
+describe("Entry Script", () => {
+  it("target dom element should contains textContent", () => {
+    expect(target.textContent).not.toBeNull();
+  });
+});

src/index.test.ts

@@ -1,7 +1,9 @@
 import App from "./App.svelte";
 
-new App({
-  target: document.body,
+export const target = document.body;
+
+export const app = new App({
+  target,
   props: {
     name: "World"
   }

src/index.ts

@@ -0,0 +1,26 @@
+const deasync = require("deasync");
+const rollup = require("rollup");
+
+const config = require("./rollup.config.js");
+
+exports.process = (...args) => {
+  const [, input] = args;
+  const compiled = {};
+  rollup
+    .rollup({ input, plugins: config.plugins })
+    .then(bundle => bundle.generate({ format: "cjs", sourcemap: true }))
+    .then(({ output }) =>
+      output.reduce((carry, record) => Object.assign(carry, record), compiled)
+    )
+    .catch(error => {
+      throw error;
+    });
+  let count = 0;
+  while (compiled === undefined || !compiled.code || !compiled.map) {
+    if (count++ >= 100) {
+      throw new Error("Can't compile svelte component for test");
+    }
+    deasync.runLoopOnce();
+  }
+  return compiled;
+};

svelte-jest.js

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}