React.createElement(
  MyButton, // 要素名
  {color: 'blue', shadowSize: 2}, // プロパティ
  'Click Me' // 子要素
)

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

createElement(
  // {String | Object | Function}
  // HTML タグ名、コンポーネントオプション、もしくは
  // そのどちらかを解決する非同期関数です。必須です。
  'anchored-heading',

  // {Object}
  // テンプレート内で使うであろう属性に対応する
  // データオブジェクト。任意です。
  {
    props: { level: 1 }
  },

  // {String | Array}
  // 子のVNode。`createElement()` を使用して構築するか、
  // テキスト VNode の場合は単に文字列を使用します。任意です。
  [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

<AnchoredHeading level={1}>
  <span>Hello</span> world!
</AnchoredHeading>

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    "jsxFactory": "h",
    ...
  }
}

import { VNode, CreateElement } from 'vue';
import { Component, Prop, Vue } from 'vue-property-decorator';

<template>
  <h1>Hello {{ world }}</h1>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  public world: string = 'world';
}
</script>

<style>
h1 {
  font-size: 64px;
  color: #3ab981;
}
</style>

import { VNode, CreateElement } from 'vue';
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  /** State */
  public world: string = 'world';

  /** View(renderメソッド) */
  public render(h: CreateElement): VNode {
    /** Style */
    const style = {
      fontSize: '64px',
      color: '#3ab981',
    };

    /** Template(JSX) */
    return <h1 style={style}>{this.world}</h1>;
  }
}

import { VNode, CreateElement } from 'vue';
import { Component, Vue } from 'vue-property-decorator';

@Component
class Child extends Vue {
  public render(h: CreateElement): VNode {
    /** 1番目の子要素を取得し表示 */
    return <span>{this.$slots.default[0]}</span>;
  }
}

import { 
  VNode, CreateElement, FunctionalComponentOptions, RenderContext
} from 'vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  /** コンポーネントを関数型コンポーネントにする */
  functional: true,
} as FunctionalComponentOptions)
class Child extends Vue {
  public render(h: CreateElement, context: RenderContext): VNode {
    /** 1番目の子要素を取得し表示 */
    return <span>{context.children[0]}</span>;
  }
}

import { VNode, CreateElement } from 'vue';
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  public world: string = 'World';

  public render(h: CreateElement): VNode {
    const { world } = this;

    return (
      <h1 style={ fontSize: '64px', color: '#3ab981' }>
        <Child>Hello</Child> <Child>{world}</Child>
      </h1>
    );
  }
}

@Component
export default class Mouse extends Vue {
  /** props: コンポーネントを返す関数をPropsを通して取得 */
  @Prop()
  private rendering!: (mouse: { x: number; y: number }) => VNode;

  /** state: マウスカーソルの位置情報 */
  private data = { x: 0, y: 0 };

  /** method: コンポーネントで使用するメソッド */
  private handleMouseMove(event: MouseEvent) {
    this.data = {
      ...this.data,
      x: event.x,
      y: event.y,
    };
  }

  /**
   * render関数: JSXを返す
   * propsを通して受け取ったrendring関数（render props）を呼び出す。
   * rendering関数はコンポーネントを返すので、
   * 渡されたCatコンポーネントのレンダリング内容が展開される。
   */
  private render(h: CreateElement): VNode {
    const { rendering } = this;
    return (
      <div style={{ height: '100%' }} onMousemove={this.handleMouseMove}>
        {rendering(this.data)}
      </div>
    );
  }
}

@Component
export default class Cat extends Vue {
  /** props: マウスカーソルの位置情報 */
  @Prop()
  private mouse!: { x: number; y: number };

  /** render関数: JSXを返す */
  private render(h: CreateElement): VNode {
    return (
      <div>
        x座標: {this.mouse.x} / y座標: {this.mouse.y}
      </div>
    );
  }
}

import { VNode, CreateElement, VueConstructor } from 'vue';
import { Component, Vue } from 'vue-property-decorator';

import Mouse from './Mouse';
import Cat from './Cat';

/** optionsにrenderingの型を追加 */
declare module 'vue/types/options' {
  interface ComponentOptions {
    rendering?: (mouse: { x: number; y: number }) => VNode;
  }
}

/**
 * Higher-Orederコンポーネント: コンポーネントクラスを返す
 * コンポーネントを引数を通して受け取る
 */
function withSample(WrappedComp: any): VueConstructor<Vue> {
  @Component
  class MouseTracker extends Vue {
    /** render関数: JSXを返す */
    private render(h: CreateElement): VNode {
      /**
       * Mouseコンポーネントのrendering属性にRender Props関数を指定
       * Render Props関数はwithSample関数の引数に指定されたコンポーネントを返す
       */
      return (
        <div style={{ height: '100%', width: '100%', margin: 0 }}>
          <Mouse rendering={
            (mouse: { x: number; y: number }) => <WrappedComp mouse={mouse} />
          } />
        </div>
      );
    }
  }
  /** withSample関数の戻り値としてMouseTrackerコンポーネントを返す */
  return MouseTracker;
}

/** withSample関数にCatコンポーネントを渡してHelloWorldコンポーネント生成 */
const HelloWorld = withSample(Cat);
export default HelloWorld;

[ts] プロパティ 'rendering' は型 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record> | ThisTypedComponentOptionsWithArrayProps | ThisTypedComponentOptionsWithRecordProps<...> | undefined' に存在しません。

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "jsxFactory": "h",
    ...
  }
}

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/maechabin/Sites/practice/vue-jsx-sample/src/components/helloworld/HelloWorld.tsx:16
            return <h1 style={style}>{world}</h1>;
                   ^

    SyntaxError: Unexpected token <

      1 | import { mount } from '@vue/test-utils';
    > 2 | import HelloWorld from '@/components/helloworld/HelloWorld.tsx';
        | ^

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/helloworld/HelloWorld.tsx';

describe('HelloWorld.tsx', () => {
  it('renders props.msg when passed', () => {
    // setup
    const msg = 'world';
    const wrapper = mount(HelloWorld);

    // verify
    expect(wrapper.text()).toMatch(msg);
  });
});