feat(jest): enable jest unit tests

README.md

@@ -31,7 +31,7 @@ This will cause `npx` to download the `makes` tool, along with the `aurelia` sca
 - [ ] Basic app with FuseBox (On hold)
   * FuseBox v4 is coming, and it's a total rewrite. Wait for it before implement.
 - [x] Basic less/scss setup.
-- [x] Basic unit test setup for jasmine, mocha, tape. (jest and ava are on hold, pending implementing transformer.)
+- [x] Basic unit test setup for jest, jasmine, mocha, tape. (ava is on hold, pending implementing transformer.)
 - [x] Basic e2e test setup for cypress
 - [ ] Basic e2e test setup for protractor
 

ava/package.json

@@ -1,7 +1,8 @@
 {
   "devDependencies": {
     "ava": "^3.0.0",
-    "browser-env": "^3.0.0",
+    "jsdom": "^16.0.0",
+    "jsdom-global": "^3.0.0",
     // @if babel
     "@ava/babel": "^1.0.0",
     "@babel/register": "^7.0.0",

babel/babel.config.json

@@ -2,7 +2,9 @@
   "presets": [
     ["@babel/preset-env", {
       "loose": true,
+      // @if !jest && !ava
       "modules": false,
+      // @endif
       "exclude": ["@babel/plugin-proposal-dynamic-import"]
     }]
   ],

common/test__if_not_no-unit-tests/setup.ext

@@ -1,3 +1,15 @@
+// @if ava
+import 'jsdom-global/register';
+// ignore css modules
+function skipCSS(module) {
+  module.exports = '';
+}
+
+require.extensions['.css'] = skipCSS;
+require.extensions['.less'] = skipCSS;
+require.extensions['.scss'] = skipCSS;
+
+// @endif
 import {
   HTMLTestContext,
   TestContext,

e2e-test.js

@@ -87,7 +87,7 @@ const bundlers = ['webpack', 'dumber'];
 const transpilers = ['babel', 'typescript'];
 const cssModes = ['no-css-mode', 'shadow-dom', 'css-module'];
 const cssProcessors = ['css', 'sass', 'less'];
-const testFrameworks = ['jasmine', 'tape', 'mocha', 'no-unit-tests'];
+const testFrameworks = ['jest', 'jasmine', 'tape', 'mocha', 'no-unit-tests'];
 const e2eFrameworks = ['cypress'];
 
 function getServerRegex(features) {

jest/package.json

@@ -3,31 +3,61 @@
     "jest": "^25.0.0",
     "jest-transform-stub": "^2.0.0",
     // @if babel
-    "babel-jest": "^25.0.0",
+    "@aurelia/babel-jest": "dev",
     // @endif
     // @if typescript
     "@types/jest": "^25.0.0",
-    "ts-jest": "^25.0.0",
+    "@aurelia/ts-jest": "dev",
     // @endif
   },
   "scripts": {
     "test": "jest"
   },
   "jest": {
     "transform": {
-      "^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
+      "\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
       // @if babel
-      "^.+\\.js$": "babel-jest",
+      // @if shadow-dom
+      "\\.(js|html)$": [ "@aurelia/babel-jest", { defaultShadowOptions: { mode: 'open' } } ]
+      // @endif
+      // @if css-module
+      "\\.(js|html)$": [ "@aurelia/babel-jest", { useCSSModule: true } ]
+      // @endif
+      // @if !shadow-dom && !css-module
+      "\\.(js|html)$": "@aurelia/babel-jest",
+      // @endif
+      // @endif
+      // @if typescript
+      // @if shadow-dom
+      "\\.(ts|html)$": [ "@aurelia/ts-jest", { defaultShadowOptions: { mode: 'open' } } ]
+      // @endif
+      // @if css-module
+      "\\.(ts|html)$": [ "@aurelia/ts-jest", { useCSSModule: true } ]
+      // @endif
+      // @if !shadow-dom && !css-module
+      "\\.(ts|html)$": "@aurelia/ts-jest",
+      // @endif
       // @endif
     },
 
-    // @if typescript
-    "preset": 'ts-jest',
-    // @endif
+    "setupFiles": [
+      // @if babel
+      "<rootDir>/test/setup.js"
+      // @endif
+      // @if typescript
+      "<rootDir>/test/setup.ts"
+      // @endif
+    ],
 
     "collectCoverage": true,
     "collectCoverageFrom": [
-      'src/**/*./* @if babel */js/* @endif *//* @if typescript */ts/* @endif */'
+      // @if babel
+      "src/**/*.js"
+      // @endif
+      // @if typescript
+      "src/**/*.ts",
+      "!src/**/*.d.ts"
+      // @endif
     ]
   }
 }

questions.js

@@ -54,11 +54,10 @@ module.exports = [
   {
     message: 'What unit testing framework to use?',
     choices: [
-      // Disable jest and ava for now.
+      {value: 'jest', title: 'Jest', hint: 'Runs in Node.js, simulates browser by default, with a focus on simplicity.'},
+      // Disable ava for now.
       // TODO: build some custom transformer to apply our conventions when running in nodejs env.
-      // Note in test env, probably need to remove "modules": false from babelrc and "module": "esnext" from tsconfig.
-      // {value: 'jest', title: 'Jest', hint: 'Runs in Node.js, simulates browser by default, with a focus on simplicity.'},
-      // {value: 'ava', title: 'Ava + browser-env', hint: 'Runs in Node.js, simulates browser with browser-env (jsdom). A test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that let you write tests more effectively.'},
+      // {value: 'ava', title: 'Ava + jsdom-global', hint: 'Runs in Node.js, simulates browser with jsdom-global. A test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that let you write tests more effectively.'},
       {value: 'jasmine', title: 'Jasmine', hint: 'Runs in browser, a behavior-driven testing framework.'},
       {value: 'mocha', title: 'Mocha + Chai', hint: 'Runs in browser, a feature-rich JavaScript test framework for node and browsers.'},
       {value: 'tape', title: 'Tape', hint: 'Runs in browser, tap-producing test harness for node and browsers.'},

typescript/tsconfig.json

@@ -2,10 +2,10 @@
   "compilerOptions": {
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    // @if browserify
+    // @if browserify || jest || ava
     "module": "commonjs",
     // @endif
-    // @if !browserify
+    // @if !browserify && !jest && !ava
     "module": "esnext",
     // @endif
     "moduleResolution": "node",