React + Next + typescript + tsnode + mocha で tsx なテストを行うために必要な設定

簡潔な記事です

概要

/home/fai/repo/maisandbox3/mocha/next/components/CodeEditorTest.tsx:29
        const codeEditor = (<CodeEditor_1.default ref={refEditor} lang='ruby'/>);
                            ^

SyntaxError: Unexpected token '<'

というエラーが出る。

原因

Nextのデフォルトのtsconfig.jsonが妙。jsxを無視する設定"jsx": "preserve"になっている。

解決策

TS_NODE_COMPILER_OPTIONS 環境変数を使えば、設定を上乗せ出来る。 {"module":"commonjs", "jsx": "react"} をオーバーライドする。

TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\", \"jsx\": \"react\"}' mocha --require ts-node/register  mocha/next/**/*Test.{ts,tsx}

お気持ち

jestの方が良さげ