JsDOM+React TestUtilsの使い方を改良

TypeScript/Node

TestUtilsにはいろいろ便利なメソッドがあるのを見つけてテストの書き方を変えたら、UserAgentが設定されていないということでエラーが出るようになってしまいました。かといって直接にnavigator.userAgentを設定しようにもGetterしかないと弾かれてしまいます。調べるうちにJsDOMの使い方を変えるとOKなことを発見。

gulp.task('test', () => {
    jsdom.env({
        html: '',
        userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ' +
                           '(KHTML, like Gecko) Chrome/49.0.2454.85 Safari/537.36',
        done: (err, window) => {
            if(err) throw err;
            for (let key in window) {
                if (window.hasOwnProperty(key) && !global[key]) {
                    global[key] = window[key];
                }
            }
            console.debug = console.log; // console.debugがundefinedだった
            gulp.src('src/**/__tests__/*Test.js')
                .pipe(jasmine({reporter: new reporter()}));
        }
    });
});

gulpfile.jsの中ではJsDOMのenv()を使うようにしました。結局はglobalにプロパティを書き出しているのでテスト環境が隔離されているのではないのは変わりませんが、useAgentは設定できます。この環境ではconsole.debugがundefinedだったので足してあげたりもしています。値は、inline-style-prefixer/prefixer-test.js at master · rofrischmann/inline-style-prefixer · GitHub から持ってきました。そもそもこのライブラリがエラー出してたのです。

describe('TestTable', () => {
    it('表示', () => {
        const root = TestUtils.renderIntoDocument(<TestTable value={data}/>);
        const trs = TestUtils.scryRenderedDOMComponentsWithTag(root, 'tr');
        const node = ReactDOM.findDOMNode(trs[0]).childNodes;
        expect(node[1].textContent).toBe('test-test-test');
    });
});

scryRenderedDOMComponentsWithTag / scryRenderedDOMComponentsWithClass / scryRenderedDOMComponentsWithType がそれぞれ何かと使える。