3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JSXでブラウザでユニットテストを実行する

Last updated at Posted at 2015-02-09

JSX(altJSのほう)で、たまにブラウザごとに挙動が違ったりして、ブラウザでユニットテストを走らせたくなることがあります。普段はnode.jsで簡単に実行できるのですが、ブラウザで実行するにはちょっといろいろ手を加える必要があります。

まずは.jsファイルを生成します。

$ jsx --test --output test.js --add-search-path ./src test/test-xxhash-arraybuffer.jsx

--test オプションと、 --output オプションを使うと、ユニットテストのJSファイルが作れます。ただ、このままでは実行できませんので、生成されたファイルの先頭のshebung行(#!/usr/bin/env node)を削除します。

test.js
#!/usr/bin/env node
// generatedy by JSX compiler 0.9.89 (2014-05-20 06:01:03 +0900; 8e8c6105f36f3dfe440ea026a3c93a3444977102)
var JSX = {};
(function (JSX) {

sedでやるなら

$ sed -e "1d" test.js > test2.js
$ mv test2.js test.js

ブラウザに読み込ませるHTMLを作ります。生成されたコードはnode.jsの process.argv にのみ依存しているので、ダミーの変数を作っておきます。

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            var process = {
                argv: ['node', 'test.js']
            };
        </script>
        <script src="test.js"></script>
    </body>
</html>

これをそのままロードしてもいいですし、Webサーバをローカルに起動して、それからロードしても良いです。フォルダ名が.jsxで、なおかつAdobe製品が入っていると、フォルダをJavaScript拡張として読み込もうとしてツライことになる(Finderで開けない)ので、今回はサーバ経由で。

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

ブラウザで http://localhost:8000 を開いて、コンソールを見ると、テスト結果が表示されています。Firefox開発版なら、コマンドのところに console open とタイプするとコンソールが開きます。

Screen Shot 2015-02-09 at 9.03.55.png

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?