mateuszsokola

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

mateuszsokola

/**
 * 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 = {

mateuszsokola

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

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

mateuszsokola

import * as React from "react";

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

mateuszsokola

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

mateuszsokola

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

mateuszsokola

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();
});

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:

mateuszsokola

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

mateuszsokola

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.