update(remark): remark-reactのテストを追加

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.language": "en"
+}

src/react-starter/oneshot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as remark from 'remark';
-import html = require('remark-html');
+import * as html from 'remark-html';
 import reactRenderer from 'remark-react';
 
 export class App extends React.Component<{}, { text: string }> {
@@ -11,13 +11,15 @@ export class App extends React.Component<{}, { text: string }> {
     };
     this.onChange = this.onChange.bind(this);
   }
+
   public onChange(e: React.ChangeEvent<HTMLTextAreaElement>): void {
     this.setState({ text: e.target.value });
   }
+
   public render() {
     // @ts-ignore
     const markUp = { __html: remark().use(reactRenderer, {
-      sanitize: false
+      sanitize: false,
     }).use(html).processSync(this.state.text).contents };
     return (
       <div>

src/react-starter/webpack.config.ts

@@ -11,7 +11,6 @@ export const resolveApp = (relativePath: string) =>
 import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const webpackModule: webpack.Configuration[] = [
-  // rendererで利用するscript。entryはwindowの種類の数だけある
   {
     stats: 'errors-only',
     entry: {

src/remark-react/__tests__/oneshot.test.tsx

@@ -4,15 +4,19 @@ import * as OneShot from '../oneshot';
 
 
 test('React.MyComponent', () => {
-  const comp = React.createElement(OneShot.App);
-  expect(comp).toEqual(<OneShot.App />);
+  const comp = React.createElement(OneShot.App, { title: '' });
+  expect(comp).toEqual(<OneShot.App title='' />);
 });
 
-test('レンダリングを行った結果が一致する', () => {
+test('MarkdownからHTMLがレンダリングされていることを確認する', () => {
   const component = renderer.create(
-    <OneShot.App />
+    <OneShot.App title='# Hello world' />
   );
-  const tree = component.toJSON();
-  expect(tree).toEqual(`# hello world
+  const componentJSON = component.toJSON()!;
+  expect(componentJSON).not.toBeNull();
+  expect(componentJSON.props.dangerouslySetInnerHTML).not.toBeUndefined();
+  expect(componentJSON.props.dangerouslySetInnerHTML.__html).not.toBeUndefined();
+  const html = componentJSON.props.dangerouslySetInnerHTML.__html;
+  expect(html).toBe(`<h1>Hello world</h1>
 `);
 })

src/remark-react/oneshot.tsx

@@ -1,33 +1,25 @@
 import * as React from 'react';
 import * as remark from 'remark';
-import reactRenderer from 'remark-react';
+import * as html from 'remark-html';
+import remarkReact from 'remark-react';
 
-export interface AppState {
-  text: string;
+export interface AppProps {
+  title: string;
 }
 
 // @ts-ignore
-const processor = remark().use(reactRenderer, {
+const processor = remark().use(remarkReact, {
   prefix: 'md-',
   sanitize: true
 })
 
-export class App extends React.Component<{}, AppState> {
-  constructor(props: {}) {
-    super(props);
-    this.state = {
-      text: '# hello world'
-    };
-  }
-
-  public onChange(e: React.ChangeEvent<HTMLTextAreaElement>): void {
-    this.setState({ text: e.target.value });
-  }
-
+export class App extends React.Component<AppProps, {}> {
   public render() {
     // @ts-ignore
-    const content = processor.processSync(this.state.text).contents
-    return content;
+    const content = { __html: remark().use(remarkReact, {
+      sanitize: false
+    }).use(html).processSync(this.props.title).contents };
+    return <div dangerouslySetInnerHTML={content} />;
   }
 }
 

tsconfig.json

@@ -43,6 +43,9 @@
       "remark": [
         "./typings/remark/index.d.ts"
       ],
+      "remark-html": [
+        "./typings/remark-html/index.d.ts"
+      ],
       "remark-react": [
         "./typings/remark-react/index.d.ts"
       ],

tslint.json

@@ -8,7 +8,7 @@
   ],
   "linterOptions": {
     "exclude": [
-      "node_modules/**/*.ts"
+      "node_modules/**"
     ]
   },
   "rules": {

typings/remark-html/index.d.ts

@@ -0,0 +1,5 @@
+export interface Option {}
+
+declare function plugin(option: Option): any
+
+export default plugin

typings/remark/index.d.ts

@@ -1,4 +1,6 @@
-interface Parser {}
+interface Parser {
+  use: any
+}
 interface Options {}