Add Testing Strategy to preact-cli

browserMocks.js

// Mocks localStorage
const localStorageMock = (function() {
	let store = {};

	return {
		getItem: (key) => store[key] || null,
		setItem: (key, value) => store[key] = value.toString(),
		clear: () => store = {}
	};

})();

Object.defineProperty(window, 'localStorage', {
	value: localStorageMock
});

component.test.js

import { h } from 'preact';
import Headline from '../src/components/headline/index';
import { shallow, deep } from 'preact-render-spy'; // See: https://github.com/mzgoddard/preact-render-spy

test('check if Headline is rendering h1', () => {
	// Use shallow (rendering) if the level of rendering is just 1, e.g. <Headline> is returning already HTML and not another VDOM element
	// which itself calls a render method (this would be level 2)
	const actual = shallow(<Headline text="Walhalla!" />);
	expect(actual.find('h1').text()).toBe('Walhalla!');
});

fileMocks.js

// This fixed an error related to the CSS and loading gif breaking my Jest test
// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets 
module.exports = 'test-file-stub';

package.json

{
  "name": "frontend-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "jest": {
		"verbose": true,
		"setupFiles": [
			"<rootDir>/tests/__mocks__/browserMocks.js"
		],
    "testURL": "http://localhost:8080",
    "transform": {
      "\\.(js|jsx)$": "./transformPreprocessor.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "^.\/style$": "identity-obj-proxy",
      "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat",
      "^create-react-class$": "preact-compat/lib/create-react-class",
      "^react-addons-css-transition-group$": "preact-css-transition-group"
    }
  },
  "scripts": {
    "lint": "eslint src",
    "tests-only": "jest --no-cache",
    "test": "eslint src && jest --no-cache",
    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
    "build": "preact build --no-prerender",
    "serve": "preact build --no-prerender && preact serve",
    "dev": "preact watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "devDependencies": {
    "babel-jest": "21.0.2",
    "eslint": "^4.6.1",
    "eslint-config-synacor": "^1.1.1",
    "identity-obj-proxy": "3.0.0",
    "if-env": "^1.0.0",
    "jest": "21.2.0",
    "node-sass": "^4.5.3",
    "preact-cli": "^1.4.1",
    "preact-render-spy": "1.1.0",
    "sass-loader": "^6.0.6"
  },
  "dependencies": {
    "preact": "^8.2.5",
    "preact-compat": "^3.17.0",
    "preact-router": "^2.5.7"
  }
}

transformPreprocessor.js

const babelJest = require('babel-jest');

// Get the babelConfig
const preactCLIBabelRC = require('preact-cli/lib/lib/babel-config.js');

const transformer = () => {
  // set environment to test 
  // currently there is no test config but it works
  // It is important so set the modules options otherwise it is 'false' and Jest can't use babel to transpile
	let babelConfig = preactCLIBabelRC.default('test', { modules: 'commonjs' } );
	return babelJest.createTransformer(babelConfig);
};

module.exports = transformer();

This is just a WIP currently to explore how we can use Jest + Test framework for preact-cli projects.

The current goal:

• Get component tests with preact-render-spy working within Jest.

As preact-cli is about PWA to really test all the features more work might be needed (configuring Jest and specifically jsdom)

@fokusferit - want to link to this from an issue on preact-cli? We'd love to bring testing into the mix.

@developit yeah I've did that here preactjs/preact-cli#260 (comment).

As I've read that you're moving into a custom-templates approach where developers can pick a boilerplate from github, I thought it might be helpful to extend them with a test setup or create a new template, e.g. "simple + test" but I think test integration should be a first citizen 😄

I got this working on my project with no issues. Thanks heaps!

@tomasswood great to hear that!

I've just updated one line
"^.\/style$": "identity-obj-proxy",

is necessary if you don't import with file extension your styles, then the identity-proxy is not working, e.g.

import style from './style'