-
-
Save fokusferit/5507f084b8414af7b03c31f4bffd7536 to your computer and use it in GitHub Desktop.
// 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: 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!'); | |
}); |
// 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'; |
{ | |
"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" | |
} | |
} |
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(); |
@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'
This is just a WIP currently to explore how we can use Jest + Test framework for preact-cli projects.
The current goal:
As preact-cli is about PWA to really test all the features more work might be needed (configuring Jest and specifically jsdom)