diff --git a/packages/contentful-extension-scripts/lib/index.js b/packages/contentful-extension-scripts/lib/index.js
index e04c6bc..884721c 100755
--- a/packages/contentful-extension-scripts/lib/index.js
+++ b/packages/contentful-extension-scripts/lib/index.js
@@ -11,7 +11,7 @@ const spawn = require('cross-spawn');
 const args = process.argv.slice(2);
 
 const scriptIndex = args.findIndex(
-  x => x === 'build' || x === 'start' || x === 'help'
+  x => x === 'build' || x === 'start' || x === 'help' || x === 'test'
 );
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
@@ -19,6 +19,7 @@ const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 switch (script) {
   case 'build':
   case 'start':
+  case 'test':
   case 'help': {
     const result = spawn.sync(
       'node',
diff --git a/packages/contentful-extension-scripts/package.json b/packages/contentful-extension-scripts/package.json
index e2be34f..d23a803 100644
--- a/packages/contentful-extension-scripts/package.json
+++ b/packages/contentful-extension-scripts/package.json
@@ -33,14 +33,20 @@
     "url": "https://github.com/contentful/create-contentful-extension/issues"
   },
   "dependencies": {
+    "identity-obj-proxy": "3.0.0",
     "chalk": "2.4.2",
     "cross-spawn": "6.0.5",
     "fs-extra": "7.0.1",
     "htmlnano": "0.2.3",
+    "babel-jest": "^24.8.0",
+    "jest": "^24.8.0",
+    "jest-watch-typeahead": "^0.3.1",
+    "ts-jest": "^24.0.2",
     "parcel-bundler": "1.12.3",
     "parcel-plugin-url-loader": "1.3.1",
     "posthtml": "0.11.4",
     "posthtml-inline-assets": "3.0.0",
+    "typescript": "^3.5.2",
     "yargs": "13.2.4"
   },
   "scripts": {
diff --git a/packages/contentful-extension-scripts/scripts/test.js b/packages/contentful-extension-scripts/scripts/test.js
new file mode 100644
index 0000000..4c3f514
--- /dev/null
+++ b/packages/contentful-extension-scripts/scripts/test.js
@@ -0,0 +1,30 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+const createJestConfig = require('./utils/createJestConfig');
+const paths = require('./utils/paths');
+const fs = require('fs');
+const jest = require('jest');
+
+const argv = process.argv.slice(2);
+
+let appPackageJson = {};
+
+try {
+  appPackageJson = fs.readJSONSync(paths.packageJson);
+} catch (e) {
+  // do nothing
+}
+
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+argv.push(
+  '--config',
+  JSON.stringify(
+    Object.assign({}, createJestConfig(), appPackageJson.jest || {})
+  )
+);
+
+jest.run(argv);
diff --git a/packages/contentful-extension-scripts/scripts/utils/createJestConfig.js b/packages/contentful-extension-scripts/scripts/utils/createJestConfig.js
new file mode 100644
index 0000000..be7e889
--- /dev/null
+++ b/packages/contentful-extension-scripts/scripts/utils/createJestConfig.js
@@ -0,0 +1,33 @@
+const paths = require('./paths');
+
+module.exports = function createJestConfig() {
+  const config = {
+    verbose: true,
+    transform: {
+      '.+\\.(js|jsx)?$': require.resolve('babel-jest'),
+      '^.+\\.(ts|tsx)?$': require.resolve('ts-jest/dist'),
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': require.resolve(
+        './jestFileTransform.js'
+      ),
+    },
+    transformIgnorePatterns: [
+      '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|tsx|ts)$',
+    ],
+    moduleNameMapper: {
+      '\\.(css|less|scss)$': require.resolve('identity-obj-proxy'),
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
+    coverageReporters: ['lcov'],
+    testMatch: ['<rootDir>/**/*.(spec|test).{ts,tsx,js,jsx}'],
+    testURL: 'http://localhost',
+    rootDir: paths.root,
+    coverageDirectory: paths.coverage,
+    watchPlugins: [
+      require.resolve('jest-watch-typeahead/filename'),
+      require.resolve('jest-watch-typeahead/testname'),
+    ],
+  };
+
+  return config;
+};
diff --git a/packages/contentful-extension-scripts/scripts/utils/getPackageJson.js b/packages/contentful-extension-scripts/scripts/utils/getPackageJson.js
new file mode 100644
index 0000000..e69de29
diff --git a/packages/contentful-extension-scripts/scripts/utils/jestFileTransform.js b/packages/contentful-extension-scripts/scripts/utils/jestFileTransform.js
new file mode 100644
index 0000000..dd9fda3
--- /dev/null
+++ b/packages/contentful-extension-scripts/scripts/utils/jestFileTransform.js
@@ -0,0 +1,11 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+    return `module.exports = ${assetFilename};`;
+  },
+};
diff --git a/packages/contentful-extension-scripts/scripts/utils/paths.js b/packages/contentful-extension-scripts/scripts/utils/paths.js
index 493c63e..7870499 100644
--- a/packages/contentful-extension-scripts/scripts/utils/paths.js
+++ b/packages/contentful-extension-scripts/scripts/utils/paths.js
@@ -5,7 +5,10 @@ const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
 module.exports = {
+  packageJson: resolveApp('package.json'),
+  root: resolveApp('.'),
   src: resolveApp('src'),
   build: resolveApp('build'),
   cache: resolveApp('.cache'),
+  coverage: resolveApp('.coverage'),
 };
diff --git a/packages/contentful-extension-scripts/scripts/utils/showHelp.js b/packages/contentful-extension-scripts/scripts/utils/showHelp.js
index 9ba8181..8d280f5 100644
--- a/packages/contentful-extension-scripts/scripts/utils/showHelp.js
+++ b/packages/contentful-extension-scripts/scripts/utils/showHelp.js
@@ -13,6 +13,11 @@ module.exports = () => {
   console.log(chalk.cyan(`  npm run build`));
   console.log('    Bundles the extension for production.');
   console.log();
+  console.log(chalk.cyan(`  npm run test`));
+  console.log(
+    '    Run jest runner in watch mode. Passes through all flats directly to Jest'
+  );
+  console.log();
   console.log(chalk.cyan(`  npm run configure`));
   console.log(
     '    Asks which space and environment you want to use for development and deployment.'
diff --git a/packages/contentful-extension-scripts/scripts/utils/updatePackageJsonFile.js b/packages/contentful-extension-scripts/scripts/utils/updatePackageJsonFile.js
index dd296b1..747f169 100644
--- a/packages/contentful-extension-scripts/scripts/utils/updatePackageJsonFile.js
+++ b/packages/contentful-extension-scripts/scripts/utils/updatePackageJsonFile.js
@@ -3,6 +3,8 @@ module.exports = (pkg, { version, language, type }) => {
   pkg.scripts = {
     start: 'contentful-extension-scripts start',
     build: 'contentful-extension-scripts build',
+    test: 'contentful-extension-scripts test --env=jsdom --watch',
+    'test:coverage': 'contentful-extension-scripts test --env=jsdom --coverage',
     deploy: 'npm run build && contentful extension update --force',
     configure: 'contentful space use && contentful space environment use',
     login: 'contentful login',
@@ -16,12 +18,13 @@ module.exports = (pkg, { version, language, type }) => {
     '@babel/preset-env': '7.3.4',
     '@babel/preset-react': '7.0.0',
     '@contentful/contentful-extension-scripts': version,
+    '@testing-library/react': '8.0.4',
     cssnano: '4.1.10',
-    'contentful-cli': '0.28.0',
+    'contentful-cli': '0.33.1',
   };
   pkg.dependencies = {
     '@contentful/forma-36-fcss': '^0.0.20',
-    '@contentful/forma-36-react-components': '^3.11.2',
+    '@contentful/forma-36-react-components': '^3.11.3',
     '@contentful/forma-36-tokens': '^0.3.0',
     'contentful-ui-extensions-sdk': '3.9.0',
     'prop-types': '^15.7.2',
@@ -48,10 +51,11 @@ module.exports = (pkg, { version, language, type }) => {
 
   if (language === 'typescript') {
     pkg.devDependencies = Object.assign({}, pkg.devDependencies, {
+      typescript: '3.5.2',
+      '@types/jest': '24.0.15',
       '@types/react': '^16.8.17',
       '@types/react-dom': '^16.8.4',
       '@types/webpack-env': '1.13.9',
-      typescript: '3.5.2',
     });
   }
 
diff --git a/packages/contentful-extension-scripts/template/common/.babelrc b/packages/contentful-extension-scripts/template/common/.babelrc
index 4a33b13..ae7d146 100644
--- a/packages/contentful-extension-scripts/template/common/.babelrc
+++ b/packages/contentful-extension-scripts/template/common/.babelrc
@@ -3,8 +3,7 @@
     [
       "@babel/preset-env",
       {
-        "useBuiltIns": false,
-        "modules": false
+        "useBuiltIns": false
       }
     ],
     [
diff --git a/packages/contentful-extension-scripts/template/common/.contentfulrc.json b/packages/contentful-extension-scripts/template/common/.contentfulrc.json
index 212698e..5193c21 100644
--- a/packages/contentful-extension-scripts/template/common/.contentfulrc.json
+++ b/packages/contentful-extension-scripts/template/common/.contentfulrc.json
@@ -1,5 +1,6 @@
 {
-  "cmaToken": "",
+  "managementToken": "",
   "activeSpaceId": "",
-  "activeEnvironmentId": ""
+  "activeEnvironmentId": "",
+  "host": "api.contentful.com"
 }
diff --git a/packages/contentful-extension-scripts/template/common/gitignore b/packages/contentful-extension-scripts/template/common/gitignore
index cf562b5..4815f06 100644
--- a/packages/contentful-extension-scripts/template/common/gitignore
+++ b/packages/contentful-extension-scripts/template/common/gitignore
@@ -15,6 +15,9 @@ yarn-error.log*
 # Dependency directories
 node_modules/
 
+# Coverage
+.coverage
+
 # Build
 build/*
 !/build/index.html
diff --git a/packages/contentful-extension-scripts/template/javascript-entry/src/index.js b/packages/contentful-extension-scripts/template/javascript-entry/src/index.js
index fd2734a..89572f6 100644
--- a/packages/contentful-extension-scripts/template/javascript-entry/src/index.js
+++ b/packages/contentful-extension-scripts/template/javascript-entry/src/index.js
@@ -12,7 +12,7 @@ import {
 } from '@contentful/forma-36-react-components';
 import { init, locations } from 'contentful-ui-extensions-sdk';
 import '@contentful/forma-36-react-components/dist/styles.css';
-import '@contentful/forma-36-fcss';
+import '@contentful/forma-36-fcss/dist/styles.css';
 import './index.css';
 
 /**
@@ -25,7 +25,7 @@ import './index.css';
  *  See https://github.com/contentful/create-contentful-extension/blob/master/docs/examples/entry-editor-content-model.json for details.
  */
 
-class App extends React.Component {
+export class App extends React.Component {
   constructor(props) {
     super(props);
 
@@ -71,11 +71,16 @@ class App extends React.Component {
         </Paragraph>
         <SectionHeading>Title</SectionHeading>
         <TextInput
+          testId="field-title"
           onChange={this.onTitleChangeHandler}
           value={this.state.title}
         />
         <SectionHeading>Body</SectionHeading>
-        <Textarea onChange={this.onBodyChangeHandler} value={this.state.body} />
+        <Textarea
+          testId="field-body"
+          onChange={this.onBodyChangeHandler}
+          value={this.state.body}
+        />
         <SectionHeading>Has abstract?</SectionHeading>
         <FieldGroup row={false}>
           <RadioButtonField
@@ -99,6 +104,7 @@ class App extends React.Component {
           <React.Fragment>
             <SectionHeading>Abstract</SectionHeading>
             <Textarea
+              testId="field-abstract"
               onChange={this.onAbstractChangeHandler}
               value={this.state.abstract}
             />
diff --git a/packages/contentful-extension-scripts/template/javascript-entry/src/index.spec.js b/packages/contentful-extension-scripts/template/javascript-entry/src/index.spec.js
new file mode 100644
index 0000000..85a1b0c
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/javascript-entry/src/index.spec.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { App } from './index';
+import { render, cleanup, fireEvent, configure } from '@testing-library/react';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+function renderComponent(sdk) {
+  return render(<App sdk={sdk} />);
+}
+
+const sdk = {
+  entry: {
+    fields: {
+      title: { getValue: jest.fn(), setValue: jest.fn() },
+      body: { getValue: jest.fn(), setValue: jest.fn() },
+      abstract: { getValue: jest.fn(), setValue: jest.fn() },
+      hasAbstract: { getValue: jest.fn(), setValue: jest.fn() },
+    },
+  },
+};
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it('should read a values from entry.fields.*', () => {
+    sdk.entry.fields.title.getValue.mockReturnValue('title-value');
+    sdk.entry.fields.body.getValue.mockReturnValue('body-value');
+    sdk.entry.fields.hasAbstract.getValue.mockReturnValue(true);
+    sdk.entry.fields.abstract.getValue.mockReturnValue('abstract-value');
+    const { getByTestId } = renderComponent(sdk);
+
+    expect(getByTestId('field-title').value).toEqual('title-value');
+    expect(getByTestId('field-body').value).toEqual('body-value');
+    expect(getByTestId('field-abstract').value).toEqual('abstract-value');
+
+    fireEvent.change(getByTestId('field-body'), {
+      target: { value: 'new-body-value' },
+    });
+
+    expect(sdk.entry.fields.body.setValue).toHaveBeenCalledWith(
+      'new-body-value'
+    );
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/javascript-fields/src/index.js b/packages/contentful-extension-scripts/template/javascript-fields/src/index.js
index 48262a2..c0d7ab7 100644
--- a/packages/contentful-extension-scripts/template/javascript-fields/src/index.js
+++ b/packages/contentful-extension-scripts/template/javascript-fields/src/index.js
@@ -6,7 +6,7 @@ import { init } from 'contentful-ui-extensions-sdk';
 import '@contentful/forma-36-react-components/dist/styles.css';
 import './index.css';
 
-class App extends React.Component {
+export class App extends React.Component {
   static propTypes = {
     sdk: PropTypes.object.isRequired,
   };
@@ -16,7 +16,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: props.sdk.field.getValue(),
+      value: props.sdk.field.getValue() || '',
     };
   }
 
@@ -55,6 +55,7 @@ class App extends React.Component {
         width="large"
         type="text"
         id="my-field"
+        testId="my-field"
         value={this.state.value}
         onChange={this.onChange}
       />
diff --git a/packages/contentful-extension-scripts/template/javascript-fields/src/index.spec.js b/packages/contentful-extension-scripts/template/javascript-fields/src/index.spec.js
new file mode 100644
index 0000000..98f08e0
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/javascript-fields/src/index.spec.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { App } from './index';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+function renderComponent(sdk) {
+  return render(<App sdk={sdk} />);
+}
+
+const sdk = {
+  field: {
+    getValue: jest.fn(),
+    onValueChanged: jest.fn(),
+    setValue: jest.fn(),
+    removeValue: jest.fn(),
+  },
+  window: {
+    startAutoResizer: jest.fn(),
+  },
+};
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it('should read a value from field.getValue() and subscribe for external changes', () => {
+    sdk.field.getValue.mockImplementation(() => 'initial-value');
+    const { getByTestId } = renderComponent(sdk);
+
+    expect(sdk.field.getValue).toHaveBeenCalled();
+    expect(sdk.field.onValueChanged).toHaveBeenCalled();
+    expect(getByTestId('my-field').value).toEqual('initial-value');
+  });
+
+  it('should call starstartAutoResizer', () => {
+    renderComponent(sdk);
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+  });
+
+  it('should call setValue on every change in input and removeValue when input gets empty', () => {
+    const { getByTestId } = renderComponent(sdk);
+
+    fireEvent.change(getByTestId('my-field'), {
+      target: { value: 'new-value' },
+    });
+
+    expect(sdk.field.setValue).toHaveBeenCalledWith('new-value');
+
+    fireEvent.change(getByTestId('my-field'), {
+      target: { value: '' },
+    });
+
+    expect(sdk.field.setValue).toHaveBeenCalledTimes(1);
+    expect(sdk.field.removeValue).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/javascript-page/src/index.js b/packages/contentful-extension-scripts/template/javascript-page/src/index.js
index fc5d2aa..3ae3d73 100644
--- a/packages/contentful-extension-scripts/template/javascript-page/src/index.js
+++ b/packages/contentful-extension-scripts/template/javascript-page/src/index.js
@@ -12,7 +12,7 @@ import {
   Button,
 } from '@contentful/forma-36-react-components';
 import '@contentful/forma-36-react-components/dist/styles.css';
-import '@contentful/forma-36-fcss';
+import '@contentful/forma-36-fcss/dist/styles.css';
 import './index.css';
 
 function MainPage() {
@@ -36,7 +36,7 @@ function Page404() {
   return <Heading>404</Heading>;
 }
 
-class PageExtension extends React.Component {
+export class PageExtension extends React.Component {
   constructor(props) {
     super(props);
     this.history = createMemoryHistory({
@@ -92,13 +92,14 @@ PageExtension.propTypes = {
   sdk: PropTypes.object.isRequired,
 };
 
-function SidebarExtension(props) {
+export function SidebarExtension(props) {
   useEffect(() => {
     return props.sdk.window.startAutoResizer();
   }, [props.sdk]);
 
   return (
     <Button
+      testId="open-page-extension"
       onClick={() => {
         props.sdk.navigator.openPageExtension({ path: '/' });
       }}
diff --git a/packages/contentful-extension-scripts/template/javascript-page/src/index.spec.js b/packages/contentful-extension-scripts/template/javascript-page/src/index.spec.js
new file mode 100644
index 0000000..44fdf7b
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/javascript-page/src/index.spec.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+import { SidebarExtension } from './index';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+describe('SidebarExtension', () => {
+  afterEach(cleanup);
+
+  it('render button', () => {
+    const sdk = {
+      window: {
+        startAutoResizer: jest.fn(),
+      },
+      navigator: {
+        openPageExtension: jest.fn(),
+      },
+    };
+    const { getByTestId } = render(<SidebarExtension sdk={sdk} />);
+
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+
+    fireEvent.click(getByTestId('open-page-extension'));
+
+    expect(sdk.navigator.openPageExtension).toHaveBeenCalledWith({
+      path: '/',
+    });
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.js b/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.js
index f93d8de..aecb6f6 100644
--- a/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.js
+++ b/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.js
@@ -7,7 +7,7 @@ import tokens from '@contentful/forma-36-tokens';
 import '@contentful/forma-36-react-components/dist/styles.css';
 import './index.css';
 
-class DialogExtension extends React.Component {
+export class DialogExtension extends React.Component {
   static propTypes = {
     sdk: PropTypes.object.isRequired,
   };
@@ -16,6 +16,7 @@ class DialogExtension extends React.Component {
     return (
       <div style={{ margin: tokens.spacingM }}>
         <Button
+          testId="close-dialog"
           buttonType="muted"
           onClick={() => {
             this.props.sdk.close('data from modal dialog');
@@ -28,7 +29,7 @@ class DialogExtension extends React.Component {
   }
 }
 
-class SidebarExtension extends React.Component {
+export class SidebarExtension extends React.Component {
   static propTypes = {
     sdk: PropTypes.object.isRequired,
   };
@@ -39,7 +40,6 @@ class SidebarExtension extends React.Component {
 
   onButtonClick = async () => {
     const result = await this.props.sdk.dialogs.openExtension({
-      id: this.props.sdk.ids.extension,
       width: 800,
       title: 'The same extension rendered in modal window',
     });
@@ -51,6 +51,7 @@ class SidebarExtension extends React.Component {
       <Button
         buttonType="positive"
         isFullWidth={true}
+        testId="open-dialog"
         onClick={this.onButtonClick}
       >
         Click on me to open dialog extension
@@ -59,7 +60,7 @@ class SidebarExtension extends React.Component {
   }
 }
 
-init(sdk => {
+export const initialize = sdk => {
   if (sdk.location.is(locations.LOCATION_DIALOG)) {
     ReactDOM.render(
       <DialogExtension sdk={sdk} />,
@@ -71,7 +72,9 @@ init(sdk => {
       document.getElementById('root')
     );
   }
-});
+};
+
+init(initialize);
 
 /**
  * By default, iframe of the extension is fully reloaded on every save of a source file.
diff --git a/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.spec.js b/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.spec.js
new file mode 100644
index 0000000..8d7bbb5
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/javascript-sidebar/src/index.spec.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+import { DialogExtension, SidebarExtension } from './index';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+describe('DialogExtension', () => {
+  afterEach(cleanup);
+
+  it('renders button', () => {
+    const sdk = {
+      close: jest.fn(),
+    };
+    const { getByTestId } = render(<DialogExtension sdk={sdk} />);
+
+    fireEvent.click(getByTestId('close-dialog'));
+    expect(sdk.close).toHaveBeenCalledWith('data from modal dialog');
+  });
+});
+
+describe('SidebarExtension', () => {
+  afterEach(cleanup);
+
+  it('render button', () => {
+    const sdk = {
+      window: {
+        startAutoResizer: jest.fn(),
+      },
+      dialogs: {
+        openExtension: jest.fn(),
+      },
+    };
+    const { getByTestId } = render(<SidebarExtension sdk={sdk} />);
+
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+
+    fireEvent.click(getByTestId('open-dialog'));
+
+    expect(sdk.dialogs.openExtension).toHaveBeenCalledWith({
+      title: 'The same extension rendered in modal window',
+      width: 800,
+    });
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/typescript-entry/src/index.spec.tsx b/packages/contentful-extension-scripts/template/typescript-entry/src/index.spec.tsx
new file mode 100644
index 0000000..b962ac6
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/typescript-entry/src/index.spec.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { EditorExtensionSDK } from 'contentful-ui-extensions-sdk';
+import { App } from './index';
+import { render, cleanup, fireEvent, configure } from '@testing-library/react';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+function renderComponent(sdk: EditorExtensionSDK) {
+  return render(<App sdk={sdk} />);
+}
+
+const sdk: any = {
+  entry: {
+    fields: {
+      title: { getValue: jest.fn(), setValue: jest.fn() },
+      body: { getValue: jest.fn(), setValue: jest.fn() },
+      abstract: { getValue: jest.fn(), setValue: jest.fn() },
+      hasAbstract: { getValue: jest.fn(), setValue: jest.fn() },
+    },
+  },
+};
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it('should read a values from entry.fields.*', () => {
+    sdk.entry.fields.title.getValue.mockReturnValue('title-value');
+    sdk.entry.fields.body.getValue.mockReturnValue('body-value');
+    sdk.entry.fields.hasAbstract.getValue.mockReturnValue(true);
+    sdk.entry.fields.abstract.getValue.mockReturnValue('abstract-value');
+    const { getByTestId } = renderComponent(sdk);
+
+    expect((getByTestId('field-title') as HTMLInputElement).value).toEqual(
+      'title-value'
+    );
+    expect((getByTestId('field-body') as HTMLInputElement).value).toEqual(
+      'body-value'
+    );
+    expect((getByTestId('field-abstract') as HTMLInputElement).value).toEqual(
+      'abstract-value'
+    );
+
+    fireEvent.change(getByTestId('field-body'), {
+      target: { value: 'new-body-value' },
+    });
+
+    expect(sdk.entry.fields.body.setValue).toHaveBeenCalledWith(
+      'new-body-value'
+    );
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/typescript-entry/src/index.tsx b/packages/contentful-extension-scripts/template/typescript-entry/src/index.tsx
index 075f027..95e7fab 100644
--- a/packages/contentful-extension-scripts/template/typescript-entry/src/index.tsx
+++ b/packages/contentful-extension-scripts/template/typescript-entry/src/index.tsx
@@ -16,7 +16,7 @@ import {
   EditorExtensionSDK,
 } from 'contentful-ui-extensions-sdk';
 import '@contentful/forma-36-react-components/dist/styles.css';
-import '@contentful/forma-36-fcss';
+import '@contentful/forma-36-fcss/dist/styles.css';
 import './index.css';
 
 /**
@@ -40,7 +40,7 @@ interface AppState {
   abstract: string;
 }
 
-class App extends React.Component<AppProps, AppState> {
+export class App extends React.Component<AppProps, AppState> {
   constructor(props: AppProps) {
     super(props);
 
@@ -86,11 +86,16 @@ class App extends React.Component<AppProps, AppState> {
         </Paragraph>
         <SectionHeading>Title</SectionHeading>
         <TextInput
+          testId="field-title"
           onChange={this.onTitleChangeHandler}
           value={this.state.title}
         />
         <SectionHeading>Body</SectionHeading>
-        <Textarea onChange={this.onBodyChangeHandler} value={this.state.body} />
+        <Textarea
+          testId="field-body"
+          onChange={this.onBodyChangeHandler}
+          value={this.state.body}
+        />
         <SectionHeading>Has abstract?</SectionHeading>
         <FieldGroup row={false}>
           <RadioButtonField
@@ -114,6 +119,7 @@ class App extends React.Component<AppProps, AppState> {
           <React.Fragment>
             <SectionHeading>Abstract</SectionHeading>
             <Textarea
+              testId="field-abstract"
               onChange={this.onAbstractChangeHandler}
               value={this.state.abstract}
             />
diff --git a/packages/contentful-extension-scripts/template/typescript-fields/src/index.spec.tsx b/packages/contentful-extension-scripts/template/typescript-fields/src/index.spec.tsx
new file mode 100644
index 0000000..f513a1e
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/typescript-fields/src/index.spec.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { FieldExtensionSDK } from 'contentful-ui-extensions-sdk';
+import { App } from './index';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+function renderComponent(sdk: FieldExtensionSDK) {
+  return render(<App sdk={sdk} />);
+}
+
+const sdk: any = {
+  field: {
+    getValue: jest.fn(),
+    onValueChanged: jest.fn(),
+    setValue: jest.fn(),
+    removeValue: jest.fn(),
+  },
+  window: {
+    startAutoResizer: jest.fn(),
+  },
+};
+
+describe('App', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  afterEach(cleanup);
+
+  it('should read a value from field.getValue() and subscribe for external changes', () => {
+    sdk.field.getValue.mockImplementation(() => 'initial-value');
+    const { getByTestId } = renderComponent(sdk);
+
+    expect(sdk.field.getValue).toHaveBeenCalled();
+    expect(sdk.field.onValueChanged).toHaveBeenCalled();
+    expect((getByTestId('my-field') as HTMLInputElement).value).toEqual(
+      'initial-value'
+    );
+  });
+
+  it('should call starstartAutoResizer', () => {
+    renderComponent(sdk);
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+  });
+
+  it('should call setValue on every change in input and removeValue when input gets empty', () => {
+    const { getByTestId } = renderComponent(sdk);
+
+    fireEvent.change(getByTestId('my-field'), {
+      target: { value: 'new-value' },
+    });
+
+    expect(sdk.field.setValue).toHaveBeenCalledWith('new-value');
+
+    fireEvent.change(getByTestId('my-field'), {
+      target: { value: '' },
+    });
+
+    expect(sdk.field.setValue).toHaveBeenCalledTimes(1);
+    expect(sdk.field.removeValue).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/typescript-fields/src/index.tsx b/packages/contentful-extension-scripts/template/typescript-fields/src/index.tsx
index 9cf6f42..e79338a 100644
--- a/packages/contentful-extension-scripts/template/typescript-fields/src/index.tsx
+++ b/packages/contentful-extension-scripts/template/typescript-fields/src/index.tsx
@@ -13,11 +13,11 @@ interface AppState {
   value?: string;
 }
 
-class App extends React.Component<AppProps, AppState> {
+export class App extends React.Component<AppProps, AppState> {
   constructor(props: AppProps) {
     super(props);
     this.state = {
-      value: props.sdk.field.getValue(),
+      value: props.sdk.field.getValue() || '',
     };
   }
 
@@ -58,6 +58,7 @@ class App extends React.Component<AppProps, AppState> {
         width="large"
         type="text"
         id="my-field"
+        testId="my-field"
         value={this.state.value}
         onChange={this.onChange}
       />
diff --git a/packages/contentful-extension-scripts/template/typescript-page/src/index.spec.tsx b/packages/contentful-extension-scripts/template/typescript-page/src/index.spec.tsx
new file mode 100644
index 0000000..06eabbc
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/typescript-page/src/index.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+import { SidebarExtension } from './index';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+describe('SidebarExtension', () => {
+  afterEach(cleanup);
+
+  it('render button', () => {
+    const sdk: any = {
+      window: {
+        startAutoResizer: jest.fn(),
+      },
+      navigator: {
+        openPageExtension: jest.fn(),
+      },
+    };
+    const { getByTestId } = render(<SidebarExtension sdk={sdk} />);
+
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+
+    fireEvent.click(getByTestId('open-page-extension'));
+
+    expect(sdk.navigator.openPageExtension).toHaveBeenCalledWith({
+      path: '/',
+    });
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/typescript-page/src/index.tsx b/packages/contentful-extension-scripts/template/typescript-page/src/index.tsx
index 4a221dc..ef06e77 100644
--- a/packages/contentful-extension-scripts/template/typescript-page/src/index.tsx
+++ b/packages/contentful-extension-scripts/template/typescript-page/src/index.tsx
@@ -17,7 +17,7 @@ import {
   Button,
 } from '@contentful/forma-36-react-components';
 import '@contentful/forma-36-react-components/dist/styles.css';
-import '@contentful/forma-36-fcss';
+import '@contentful/forma-36-fcss/dist/styles.css';
 import './index.css';
 
 function MainPage() {
@@ -49,7 +49,7 @@ interface InvocationParams {
   path: string;
 }
 
-class PageExtension extends React.Component<PageExtensionProps> {
+export class PageExtension extends React.Component<PageExtensionProps> {
   history: MemoryHistory;
 
   constructor(props: PageExtensionProps) {
@@ -108,13 +108,14 @@ class PageExtension extends React.Component<PageExtensionProps> {
   };
 }
 
-function SidebarExtension(props: { sdk: SidebarExtensionSDK }) {
+export function SidebarExtension(props: { sdk: SidebarExtensionSDK }) {
   React.useEffect(() => {
     return props.sdk.window.startAutoResizer();
   }, [props.sdk]);
 
   return (
     <Button
+      testId="open-page-extension"
       onClick={() => {
         props.sdk.navigator.openPageExtension({ path: '/' });
       }}
diff --git a/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.spec.tsx b/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.spec.tsx
new file mode 100644
index 0000000..2d67d38
--- /dev/null
+++ b/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.spec.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent, cleanup, configure } from '@testing-library/react';
+import { DialogExtension, SidebarExtension } from './index';
+
+configure({
+  testIdAttribute: 'data-test-id',
+});
+
+describe('DialogExtension', () => {
+  afterEach(cleanup);
+
+  it('renders button', () => {
+    const sdk: any = {
+      close: jest.fn(),
+    };
+    const { getByTestId } = render(<DialogExtension sdk={sdk} />);
+
+    fireEvent.click(getByTestId('close-dialog'));
+    expect(sdk.close).toHaveBeenCalledWith('data from modal dialog');
+  });
+});
+
+describe('SidebarExtension', () => {
+  afterEach(cleanup);
+
+  it('render button', () => {
+    const sdk: any = {
+      window: {
+        startAutoResizer: jest.fn(),
+      },
+      dialogs: {
+        openExtension: jest.fn(),
+      },
+    };
+    const { getByTestId } = render(<SidebarExtension sdk={sdk} />);
+
+    expect(sdk.window.startAutoResizer).toHaveBeenCalled();
+
+    fireEvent.click(getByTestId('open-dialog'));
+
+    expect(sdk.dialogs.openExtension).toHaveBeenCalledWith({
+      title: 'The same extension rendered in modal window',
+      width: 800,
+    });
+  });
+});
diff --git a/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.tsx b/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.tsx
index 15a763c..a67ae42 100644
--- a/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.tsx
+++ b/packages/contentful-extension-scripts/template/typescript-sidebar/src/index.tsx
@@ -11,11 +11,14 @@ import tokens from '@contentful/forma-36-tokens';
 import '@contentful/forma-36-react-components/dist/styles.css';
 import './index.css';
 
-class DialogExtension extends React.Component<{ sdk: DialogExtensionSDK }> {
+export class DialogExtension extends React.Component<{
+  sdk: DialogExtensionSDK;
+}> {
   render() {
     return (
       <div style={{ margin: tokens.spacingM }}>
         <Button
+          testId="close-dialog"
           buttonType="muted"
           onClick={() => {
             this.props.sdk.close('data from modal dialog');
@@ -28,14 +31,15 @@ class DialogExtension extends React.Component<{ sdk: DialogExtensionSDK }> {
   }
 }
 
-class SidebarExtension extends React.Component<{ sdk: SidebarExtensionSDK }> {
+export class SidebarExtension extends React.Component<{
+  sdk: SidebarExtensionSDK;
+}> {
   componentDidMount() {
     this.props.sdk.window.startAutoResizer();
   }
 
   onButtonClick = async () => {
     const result = await this.props.sdk.dialogs.openExtension({
-      id: this.props.sdk.ids.extension,
       width: 800,
       title: 'The same extension rendered in modal window',
     });
@@ -45,6 +49,7 @@ class SidebarExtension extends React.Component<{ sdk: SidebarExtensionSDK }> {
   render() {
     return (
       <Button
+        testId="open-dialog"
         buttonType="positive"
         isFullWidth={true}
         onClick={this.onButtonClick}
diff --git a/packages/contentful-extension-scripts/template/typescript/tsconfig.json b/packages/contentful-extension-scripts/template/typescript/tsconfig.json
index ba4beda..e593b32 100644
--- a/packages/contentful-extension-scripts/template/typescript/tsconfig.json
+++ b/packages/contentful-extension-scripts/template/typescript/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "react",
     "rootDir": "./src",
     "experimentalDecorators": true,
+    "esModuleInterop": true,
     "lib": ["dom", "es2015"],
     "resolveJsonModule": true
   }