今日のハマったこと

jsdomを使ってテストしていたらたまに[Symbol(SameObject caches)]と言われてテストが落ちる

なんだか、とりとめもない、解決したけど結局よくわからなかったことを書いておく。これはメモ書きです。 jsdomを使ってDOMの様子を再現するテストを書いていてハマった。テストライブラリはAVAでやっているのでAVAを例に書く。 こんな感じのことを言われた …

jsdomを使ってMutationObserverをテストする方法

github.com JavaScriptでブラウザのAPIを使ったコードをテストするときはjsdomを使うと思う。大抵のDOMのAPIは揃ってるのでテストできるけどMutationObserverをテストしようとしたところjsdomはMutationObserverを持ってないのでテストできなくて困った。「M…

CSS variablesで変数をマイナス値で出力したい

(当記事は2018-01-20現在の情報です、仕様が変わって情報が古くなっているかもしれません) CSS variablesを触っていて、定義した変数の値をマイナス値(negative value)で扱いたかった。 こんな感じでいけるだろうと思ったが… :root {--block-position-top: 5…

JavaScriptでオブジェクトの値(value)を条件で絞り込んで新規オブジェクトを作りたい

タイトルわかりにくいシリーズ 元オブジェクトから条件に合うvalueのものだけを絞り込んだ新規オブジェクトを作りたい。 const dataObject = { hoge: 'hoge', fuga: 'fuga', piyo: 'piyo', empty: '', none: '', gogo: 'gogo' } // ↓ 空文字('')じゃないもの…

Array.prototype.map()で非同期処理する方法

Async/Await使ったりしている中でハマった。 結論 ここを読む。 2ality.com そしてPromise.allでラップする。 async function AsyncFetch(urls) { const fetchArray = urls.map( url => fetch(url) ); return Promise.all(fetchArray); } こういう感じ。 Fet…

JavaScriptのFetch APIで返ってきたものをDOMとして扱う

結論から fetch(url) .then(res => res.text()) .then(text => new DOMParser().parseFromString(text, "text/html")) 返ってきた値にnew DOMParser().parseFromString(text, "text/html"))する!! 経緯 XMLHttpRequestと似たものにFetchAPIがある。 develo…

babel+webpackな環境でESM(import構文)とCJS(module.exports構文)を混在させると『Cannot assign to read only property ‘exports’ of object ‘#<Object>’』と怒られる

前提 babel6以降 babel-plugin-transform-runtime をつかってポリフィルしている webpack2以降 自分がこういう構成なので…ほかにもなにか条件下あるかもしれない エラー内容 Cannot assign to read only property ‘exports’ of object ‘#<Object>’ webpackのコンパイ</object>…

gulp+Browsersyncな開発環境でwatchしてリロードは効くのに内容が反映されない、キャッシュを切ると反映されるという現象が起きた

めっちゃ特定条件下だけどうまく動かなくて困っていた。 Local by Flywheel gulp: v3.9.1 browsersync: v2.18 gulpベースのWPの開発キットを使っている。Local by Flywheel(以下Local)でWPのサイトをプロビジョニングして、gulpベースの開発キットで.phpをwa…