Skip to content

Instantly share code, notes, and snippets.

Last active May 14, 2018
What would you like to do?
Add Testing Strategy to preact-cli
// 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
import { h } from 'preact';
import Headline from '../src/components/headline/index';
import { shallow, deep } from 'preact-render-spy'; // See:
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!" />);
// This fixed an error related to the CSS and loading gif breaking my Jest test
// See
module.exports = 'test-file-stub';
"name": "frontend-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"jest": {
"verbose": true,
"setupFiles": [
"testURL": "http://localhost:8080",
"transform": {
"\\.(js|jsx)$": "./transformPreprocessor.js"
"moduleFileExtensions": [
"moduleDirectories": [
"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"
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();
Copy link

fokusferit commented Sep 28, 2017

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)

Copy link

developit commented Sep 28, 2017

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

Copy link

fokusferit commented Sep 29, 2017

@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 😄

Copy link

tomasswood commented Oct 4, 2017

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

Copy link

fokusferit commented Oct 12, 2017

@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'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment