Setup test

__setup__/testSetup.ts

@@ -0,0 +1,13 @@
+import { configure } from 'enzyme';
+import * as Adapter from 'enzyme-adapter-react-16';
+
+const chrome = require('sinon-chrome');
+const I18nPlugin = require('sinon-chrome/plugins').I18nPlugin;
+
+import * as translations from '../resources/_locales/en/messages.json';
+
+configure({ adapter: new Adapter() });
+
+chrome.registerPlugin(new I18nPlugin(translations));
+
+global['chrome'] = chrome;

jest-puppeteer.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const extPath = path.resolve('build/lib');
+
+module.exports = {
+  launch: {
+    headless: false,
+    slowMo: 200,
+    timeout: 0,
+    args: [`--lang=ja`, `--disable-extensions-except=${extPath}`, `--load-extension=${extPath}`],
+  },
+}

package.json

@@ -61,6 +61,7 @@
     "gts": "^0.5.4",
     "husky": "^0.15.0-rc.8",
     "jest": "^22.4.2",
+    "jest-puppeteer": "^2.2.0",
     "jsdom": "^11.6.2",
     "lint-staged": "^7.0.0",
     "npm-run-all": "^4.1.2",
@@ -83,11 +84,11 @@
   },
   "scripts": {
     "dev": "npm-run-all --parallel start test-watch",
-    "e2e": "jest --testRegex '\\.spec\\.tsx?$'",
+    "e2e": "jest --testRegex '\\.spec\\.tsx?$' --preset 'jest-puppeteer'",
     "prod": "ts-node ./scripts/prod.ts",
     "start": "ts-node ./scripts/dev.ts",
-    "test": "jest --collectCoverage --testRegex '\\.test\\.tsx?$'",
-    "test-watch": "jest --watch --testRegex '\\.test\\.tsx?$'"
+    "test": "jest --collectCoverage --testRegex '\\.test\\.tsx?$' --setupTestFrameworkScriptFile './__setup__/testSetup.ts'",
+    "test-watch": "jest --watch --testRegex '\\.test\\.tsx?$' --setupTestFrameworkScriptFile './__setup__/testSetup.ts'"
   },
   "license": "MIT",
   "husky": {

src/background/__tests__/background.test.ts

@@ -1,13 +1,6 @@
 import * as chrome from 'sinon-chrome';
 
 describe('background', () => {
-  beforeAll(() => {
-    global.chrome = chrome;
-  });
-  afterAll(() => {
-    chrome.flush();
-    delete global.chrome;
-  });
   beforeEach(() => {
     chrome.runtime.sendMessage.flush();
     chrome.pageAction.show.flush();

src/content_scripts/__tests__/content_scripts.test.ts

@@ -1,13 +1,6 @@
 import * as chrome from 'sinon-chrome';
 
 describe('content_scripts', () => {
-  beforeAll(() => {
-    global.chrome = chrome;
-  });
-  afterAll(() => {
-    chrome.flush();
-    delete global.chrome;
-  });
   beforeEach(() => {
     chrome.runtime.sendMessage.flush();
   });

src/options/__tests__/Options.test.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { Provider } from 'react-redux';
 import * as renderer from 'react-test-renderer';
-import { configure, mount } from 'enzyme';
-import * as Adapter from 'enzyme-adapter-react-16';
-const chrome = require('sinon-chrome');
-const I18nPlugin = require('sinon-chrome/plugins').I18nPlugin;
+import { mount } from 'enzyme';
+
 import { options as Options } from '../Options';
 import { INITIAL_STATE } from '../module';
 import { store } from '../store';
@@ -18,26 +16,6 @@ const connectedOptions = () => {
 };
 
 describe('Options', () => {
-  beforeAll(() => {
-    configure({ adapter: new Adapter() });
-    chrome.registerPlugin(
-      new I18nPlugin({
-        optionsFavoriteColor: { message: 'mocked: optionsFavoriteColor' },
-        optionsColorsRed: { message: 'mocked: optionsColorsRed' },
-        optionsColorsGreen: { message: 'mocked: optionsColorsGreen' },
-        optionsColorsBlue: { message: 'mocked: optionsColorsBlue' },
-        optionsColorsYellow: { message: 'mocked: optionsColorsYellow' },
-        optionsLikesColor: { message: 'mocked: optionsLikesColor' },
-        optionsSave: { message: 'mocked: optionsSave' },
-        optionsStatus: { message: 'mocked: optionsStatus' },
-      })
-    );
-    global.chrome = chrome;
-  });
-  afterAll(() => {
-    chrome.flush();
-    delete global.chrome;
-  });
   it('should match snapshot', () => {
     const component = renderer.create(connectedOptions());
     const tree = component.toJSON();

src/options/__tests__/__snapshots__/Options.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Options should match snapshot 1`] = `
 <section>
-  mocked: optionsFavoriteColor
+  Favorite color:
   <select
     id="color"
     onChange={[Function]}
@@ -11,22 +11,22 @@ exports[`Options should match snapshot 1`] = `
     <option
       value="red"
     >
-      mocked: optionsColorsRed
+      red
     </option>
     <option
       value="green"
     >
-      mocked: optionsColorsGreen
+      green
     </option>
     <option
       value="blue"
     >
-      mocked: optionsColorsBlue
+      blue
     </option>
     <option
       value="yellow"
     >
-      mocked: optionsColorsYellow
+      yellow
     </option>
   </select>
   <label>
@@ -36,7 +36,7 @@ exports[`Options should match snapshot 1`] = `
       onChange={[Function]}
       type="checkbox"
     />
-    mocked: optionsLikesColor
+    I like colors.
   </label>
 </section>
 `;

src/options/__tests__/options.spec.ts

@@ -1,23 +1,12 @@
-import * as puppeteer from 'puppeteer';
 import * as path from 'path';
-
-const sel = (id: string) => `[data-test="${id}"]`;
+import { Page } from 'puppeteer';
+const page: Page = global['page'];
 
 jest.setTimeout(10000);
-let page: puppeteer.Page;
-let browser: puppeteer.Browser;
 let id: string;
 
 beforeAll(async () => {
   const extPath = path.resolve('build/lib');
-  console.log(extPath);
-  browser = await puppeteer.launch({
-    headless: false,
-    slowMo: 200,
-    timeout: 0,
-    args: [`--lang=ja`, `--disable-extensions-except=${extPath}`, `--load-extension=${extPath}`],
-  });
-  page = await browser.newPage();
   await page.goto('chrome://extensions', { waitUntil: 'networkidle2' });
   id = await page.evaluate(() => {
     const em = document.getElementsByTagName('extensions-manager')[0];
@@ -28,10 +17,6 @@ beforeAll(async () => {
   });
 });
 
-afterAll(() => {
-  browser.close();
-});
-
 describe('options page', () => {
   it('should have title', async () => {
     await page.goto(`chrome-extension://${id}/options/options.html`, { waitUntil: 'networkidle2' });

src/page_action/__tests__/PageAction.test.tsx

@@ -1,18 +1,8 @@
 import * as React from 'react';
 import { PageAction } from '../PageAction';
 import * as renderer from 'react-test-renderer';
-const chrome = require('sinon-chrome');
-const I18nPlugin = require('sinon-chrome/plugins').I18nPlugin;
 
 describe('Page Action', () => {
-  beforeAll(() => {
-    chrome.registerPlugin(new I18nPlugin({ pageAction: { message: 'mocked: pageAction' } }));
-    global.chrome = chrome;
-  });
-  afterAll(() => {
-    chrome.flush();
-    delete global.chrome;
-  });
   it('should match snapshot', () => {
     const component = renderer.create(<PageAction />);
     const tree = component.toJSON();

src/page_action/__tests__/__snapshots__/PageAction.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Page Action should match snapshot 1`] = `
 <div>
   <p>
-    mocked: pageAction
+    This is a popup of page action!
   </p>
 </div>
 `;

src/page_action/__tests__/page_action.spec.ts

@@ -1,21 +1,12 @@
-import * as puppeteer from 'puppeteer';
 import * as path from 'path';
+import { Page } from 'puppeteer';
+const page: Page = global['page'];
 
 jest.setTimeout(10000);
-let page: puppeteer.Page;
-let browser: puppeteer.Browser;
 let id: string;
 
 beforeAll(async () => {
   const extPath = path.resolve('build/lib');
-  console.log(extPath);
-  browser = await puppeteer.launch({
-    headless: false,
-    slowMo: 200,
-    timeout: 0,
-    args: [`--lang=ja`, `--disable-extensions-except=${extPath}`, `--load-extension=${extPath}`],
-  });
-  page = await browser.newPage();
   await page.goto('chrome://extensions', { waitUntil: 'networkidle2' });
   id = await page.evaluate(() => {
     const em = document.getElementsByTagName('extensions-manager')[0];
@@ -26,10 +17,6 @@ beforeAll(async () => {
   });
 });
 
-afterAll(() => {
-  browser.close();
-});
-
 describe('page_action page', () => {
   it('should have title', async () => {
     await page.goto(`chrome-extension://${id}/page_action/page_action.html`, { waitUntil: 'networkidle2' });

tsconfig.json

@@ -11,6 +11,17 @@
     "noImplicitAny": true,
     "noUnusedLocals": true
   },
-  "exclude": ["build", "dist", "node_modules", "pem", "resources", "scripts", "webpack", "**/__tests__/*"],
+  "exclude": [
+    "build",
+    "dist",
+    "node_modules",
+    "pem",
+    "resources",
+    "scripts",
+    "types",
+    "webpack",
+    "__setup__",
+    "**/__tests__/*"
+  ],
   "types": ["typePatches"]
 }