プログラミング -> 言語 -> JavaScript

Jest で特定のテストだけを実行するためのコマンドラインオプション

結論 --testNamePattern=<regex> jestjs.io 具体例 $ jest --textNamePattern=".*hogehoge.*"</regex>

@ts-ignore は ESLint で怒られるけどそれでも @ts-ignore を書きたいとき

結論 // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore

Cypress で RSpec の travel_to がしたいとき

結論 clock を使う。 docs.cypress.io 具体例 describe('My First Test', () => { it('Foo', () => { const travelToDateTime = new Date( new Date('2022-06-24 21:00:00').toLocaleString('ja-JP') ).getTime() cy.clock(travelToDateTime) cy.visit('/') …

Twitter で凍結されたアカウント情報を取得しようとした場合のレスポンス

※ 2022年4月10日(日)現在の情報です 結論 Ruby (https://github.com/sferik/twitter) の場合 /path/to/vendor/bundle/ruby/3.1.0/gems/twitter-7.0.0/lib/twitter/rest/request.rb:97:in `fail_or_return_response_body': User has been suspended. (Twitt…

i18n-next や next-translate にてコロンが含まれていると正しく翻訳されない問題

結論(理由) デフォルトで名前空間のセパレータとして定義されているから。 以下は next-translate の README です。 gyazo.com どうするか 設定ファイルで定義を変えます。当然ながら名前空間側のの記述方法が変わってくるので注意が必要です。 next-trans…

Vue Test Utils にてコンポーネントを遅延読み込みしている際に出る Vue warn への対応

#結論 コンポーネントをマウントするときに stubs プロパティを用いて明示的にスタブ化する。 具体例 以下のような感じでコンポーネントを遅延読み込みしているとします。 components: { ChienComponent: () => import("path/to/chien_component") }, この…

Cypress で console.log 的にターミナルにプリントデバッグしたいとき

結論 task という機能(コマンド)を使います。公式ドキュメントのとおりです。 docs.cypress.io cypress/plugins/index.js に上記の内容をコピペします。 プリントデバッグしたい箇所で、 cy.task('log', 'This will be output to the terminal') のように…

Cypress でよく使うメソッド

詳細は全てリンク先の公式ドキュメントに書いてあるので、そちらを見るのが確実です。複数の引数を取る場合にいろいろと柔軟な挙動を実現できたりします。 よく使うメソッド should マッチャ(を第一引数に取る)用のメソッドです。 describe('Foo', () => {…

Cypress にて、ローカルサーバを起動したうえで実行する設定 (scripts) を package.json に書く

結論 以下のようなプロパティを package.json の scripts に書けば良いです。 (ここまで省略) "scripts": { "cypress:exec": "kill $(lsof -i :3100 | grep node | awk '{print $2}') & next build && next start --port 3100 & wait-on -t 30000 http-get…

Danger JS で「変更行数」を取得する方法

Danger JS とは danger.systems 結論 ;(async () => { const changedNumberOfLines = await danger.git.linesOfCode() // ここに処理を書く })() 背景 1. Ruby版の lines_of_code メソッドは使えない undefined が返ってくる。 gyazo.com 2. 検索しまくって …

Danger (JS) を GitHub Actions で導入する

結論 作成するファイルは以下の 2つ です。 .github/workflows/danger_js.yml ファイル名は何でも良いです 単独のファイルとして切り出さず、既存の yml に内容を追加しても大丈夫です dangerfile.js ファイルの内容 2つのファイルの内容は次のとおりです。 …

Storybook で webpack の output を設定してしまうと正しく表示されない

理由 Storybook の表示に用いられる iframe.html などが output のディレクトリに作られてしまうから*1。 具体例 .storybook/main.js に以下のように書くと output のディレクトリが設定されてしまいます。 module.exports = { (省略) webpackFinal: async…

Storybook で SCSS を使えるようにする

注意 フロントエンドは移り変わりが激しいため、この方法が誤りになる可能性があります 2021/09/06 時点での情報です 結論 1. sass-loader の v10 を入れる 最新版を入れてしまわないように注意する*1。 $ yarn add --dev sass-loader@^10.0.0 2. style-load…

deasync のインストール(ビルド)に失敗するときの対処方法

結論 node-gyp を入れる。 現象例 以下のような感じで npm / yarn で入れるときにエラーが出る場合です。 ➤ YN0007: │ deasync@npm:0.1.21 must be built because it never has been before or the last one failed ➤ YN0009: │ deasync@npm:0.1.21 couldn't…

Vue.js v3 でコンポーネントが表示されずに困ったときに判明した理由

結論 components: { Hoge } と書くべきところを component: { Hoge } と書いていたから(複数形にしていなかった)。 感想 一度通っておけば以後は間違えないタイプのやつです*1。 *1:そういう意味では一度通ったというのは意義があったことなのかもしれない

Yarn v3 (v2) を入れたら "scripts" が実行できなくなった場合

結論 ワイルドカードが含まれている場合はクォートでくくりましょう。 具体例 例えば、以下のような書き方だとエラーになります。 "scripts": { "hoge": "yarn clean && run-s -c hoge:*", ワイルドカードが含まれる場合は以下のようにクォートでくくります…

Cypress で対象セレクタが複数ある中から任意のセレクタを選ぶ方法とその際の注意点

結論 cy.get('.foobar').eq(3) のように、get したあとに eq で取得できる 注意点として、get の戻り値を変数に格納している場合、eq を実行してしまうと格納した変数のオブジェクトは変更される シャローコピーになるということ 具体例 以下のような HTML …

VSCode の Jest 拡張機能での Jest の起動に失敗する場合

環境 Windows (WSL2) Node のバージョン管理には nodenv を使用している 状況 具体的には以下のようなエラーがターミナルに出るときです。 /usr/bin/env: 'node':そのようなファイルやディレクトリはありません Jest process "watch-tests" ended unexpected…

material-table を使う際に検索欄やページングカーソル欄に se や fir などのアルファベットが表示される場合の対処法

material-table とは github.com 現象 こういう感じになる現象です。 gyazo.com 結論 fonts.googleapis.com から Material Icons をインポートしましょう。 <head></head> 内に以下を書き加えます*1。 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 修正結果 上記のインポートの結果、以下のようになりました。 gyazo.</link>…

husky の代替として simple-git-hooks を使う

simple-git-hooks とは github.com 結論 以下の通りにすれば自動で .git/hooks/pre-commit を作成してくれます。 1. インストールする npm or yarn で simple-git-hooks をインストールします。 2. package.json に hooks のコマンドを記述する 以下のように…

webpack 4 では sass-loader のバージョンは v10 に抑える必要がある

結論 以下のリリースノートに書いてあるとおりです。 github.com gyazo.com 具体的にどうするか インストールの際に v10 に抑えるようにしましょう。 $ yarn install --dev 'sass-loader@^10.0.0' npm を用いる場合も同様です。 Dependabot など Dependabot …

innerHTML や textContent で書き換わらないときの理由の一つ

結論 DOM が構成される前に innerHTML や textContent が実行されてしまっているから。 対処方法 </body> タグの直前に JavaScript を書く。 感想 すごく当たり前のことなんですが、Vanilla JS を久しぶりに(ほんとうに久しぶりに)雑に書いたらハマってしまいまし…

Vue.js で「現在の」コンポーネント名を取得する方法

結論 this.$options._componentTag 例 console.log(this.$options._componentTag) // foo-bar-hoge-fuga 補足 メソッド名からも分かるように、正確には「コンポーネント名」ではなく「コンポーネントのタグ名」です。

Vue.js で You may have an infinite update loop in a component render function. は必ずローカル開発環境のうちに対処しておく

前提 You may have an infinite update loop in a component render function. とは何ぞや、ということはここでは省略します*1。 結論 このメッセージは WARN 扱いですが、本番環境のビルドでは無限ループになることがあります(ありました)。内容からして…

fs.readdir の戻り値を Promise で受け取る

結論 以下のように書いた関数の戻り値は Promise となります。 async function currentDirFileNames(path: string) { const fs = require('fs') const fsPromises = fs.promises return fsPromises.readdir(path) } 例

2020年の段階で私が知らないこと

はじめに 本記事のタイトルは、以下の記事にならっています。 overreacted.io また、以下の記事に触発されています。 blog.unasuke.com zenn.dev 結論 以下のことをほとんど知りません。 Go React TypeScript Prisma GraphQL Cypress 焦り 上記のことに無知…

Vue CLI v4.5.4 で Vue.js 3.x (Preview) で vue create しただけのログ

結論 ログです。

どの Node.js がどの NODE_MODULE_VERSION を用いているかを調べる

結論 以下のページを見ましょう。

VS Code で Vue CLI を使って ESLint と Prettier を使ってたら両方の自動保存がバッティングしたとき

結論 おそらく、環境(設定)依存があると思いますので、あくまで私がうまくいっただけの方法です。 VS Code の設定において、以下の二つを設定します*1。 "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } *1:…

vue-tweet-embed を用いるときには <Tweet></Tweet> の間に <div></div> を入れてローディングアニメーションを作ると良い

vue-tweet-embed とは github.com Quickstart のままだとツイートの読込中にエラーメッセージ表示が出てしまう 公式ドキュメントの Quickstart には、最低限の使い方についての説明があります。 つまり、 vue-tweet-embed をインストールして、 import を行…

Powered by はてなブログ