Mateush mateuszsokola

Keybase proof

I hereby claim:

I am mateuszsokola on github.
I am msokola (https://keybase.io/msokola) on keybase.
I have a public key ASBcN4rSKpKpcGRg_ZC3Npf6eSrLYPEFIcIrCRr7j09KuAo

To claim this, I am signing this object:

Testing with Jest

Jest framework allows us to set up testing our application without creating complicated configurations. It includes the most of necessary tools needed to have good testing suite such as:

mocking - i love that feature
jasmine's assertion library
code coverage (with reports)
easy to plug-in into CI systems
based on JSDOM, allows us to test DOM updates without running headless browser.
created for React

Testing with Dependency Injection

DI is a design pattern that allows us to inject dependencies into components. It's about transmiting instances of objects into other objects, which use them (eg. as a parameters). DI makes testing easier as it makes mocking easy. Mocked dependencies can be injected into the tested component.

	{
	"name": "open-joblist",
	...
	"jest": {
	"setupFiles": [
	"<rootDir>/test-shim.js",
	"<rootDir>/test-setup.js"
	],
	"moduleFileExtensions": [
	"ts",

	/**
	* Transpiles TypeScript to JavaScript code.
	*
	* @link https://github.com/facebook/jest/blob/master/examples/typescript/preprocessor.js
	* @copyright 2004-present Facebook. All Rights Reserved.
	*/
	const tsc = require('typescript');
	const tsConfig = require('./tsconfig.json');

	module.exports = {

	import * as React from "react";
	import * as ReactDOM from "react-dom";
	import Hello from "./components/Hello";

	ReactDOM.render(
	<Hello />,
	document.getElementById("app")
	);

	import * as React from "react";

	export default class Hello extends React.Component {
	render() {
	return <h1>Hello!</h1>;
	}
	}

	{
	"compilerOptions": {
	"outDir": "./target/",
	"sourceMap": true,
	"skipLibCheck": true,
	"noImplicitAny": true,
	"module": "commonjs",
	"target": "es5",
	"jsx": "react"
	},

	const webpack = {
	entry: './src/client/index.tsx',
	output: {
	filename: 'target/bundle.js',
	},
	devtool: 'source-map',
	resolve: {
	extensions: ['.ts', '.tsx', '.js', '.json'],
	},
	module: {

	import * as React from "react";
	import { shallow } from "enzyme";

	import Hello from "../Hello";

	it("renders the heading", () => {
	const result = shallow(<Hello />).contains(<h1>Hello!</h1>);
	expect(result).toBeTruthy();
	});