2020-10-03

axios-mock-adapterでモックしたAPIへのリクエストが404になる

jestでテストを行う際、以下のように axios-mock-adapter を利用してPost(or put)系APIのモックを作成していました。

const uesr = {...};
const mock = new MockAdapter(axios);
const path = `https://dummy.url.com/api/v1/user/${userId}`;
mock.onPost(path, { params: { user } }).reply(200, {
    uesr: uesr,
});

上記の例はユーザを更新するAPIで、 onPost の第二引数にパラメータとしてuserオブジェクトを渡していました。

しかし、このAPIに対してリクエストを送る処理で Request failed with status code 404 エラーが発生しテストが通りませんでした。

URLも送っているパラメータの値も一致しているはずなのに404になるのでどうしたものかと悩んでいたのですが、axios-mock-adapterのissueに答えがありました

const uesr = {...};
const mock = new MockAdapter(axios);
const path = `https://dummy.url.com/api/v1/user/${userId}`;
mock.onPost(path).reply(200, {
    uesr: uesr,
});

上記のようにパラメータを削除することでAPIリクエストが成功しました。

2020-07-07

react-testing-frameworkで要素が「存在しないこと」を確認しようとするとエラーになる

要素が存在しないことを確認しようとして次のようなコードを書いた。

it('check non-existence', () => {
    const { getByText } = render(
        <div>existence</div>
    );
    const element = getByText(/non-existence/i);
    expect(element).toBeNull();
});

すると、以下のエラーが発生してテストが失敗してしまいます

TestingLibraryElementError: Unable to find an element with the text: /test1/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

これは getBy〜 メソッドを使用しているのが原因でした、以下のように queryBy〜 に置き換えることでテストをパスできます。

it('check non-existence', () => {
    const { queryByText } = render(
        <div>existence</div>
    );
    const element = queryByText(/non-existence/i);
    expect(element).toBeNull();
});

2019-12-24

iterm2インストールからfish導入まで

iOS 雑記

mac新調したのでターミナル環境を一から構築してみた備忘録です。

iterm2インストール
- iTerm2 - macOS Terminal Replacement
hot key設定
- Controlダブルタップで起動するように設定
  Preferences->Keys->Hotkey->Create a Dedicated Hotkey Window...
  
  Double-tap key: ^Control->OK
- Mojave だとこのままでは有効にならない
  - システム環境設定->セキュリティとプライバシー->プライバシー->アクセシビリティからiterm2を許可する
fishインストール
- brew install fish
fish有効化
- sudo vi /etc/shells
- chsh -s /usr/local/bin/fish
prompt変更
- fish_configで設定画面表示
- promptタブで minimalist を選択して Set Promot ボタン押す
パッケージマネージャ(fisher)インストール
- curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish
プラグイン追加
1. bobthefish
  - $ fisher add oh-my-fish/theme-bobthefish
  - フォント導入
    - git clone https://github.com/powerline/fonts.git
    - cd fonts -> ./install.sh
    - Preferences->Profiles->Hotkey Window->Text->Font でRoboto Mono for Powerline を選択
    - cloneしたリポジトリは不要なので削除
  - Draculaテーマインストール
    - git clone https://github.com/dracula/iterm.git
    - cd iterm
    - open ./iterm/Dracula.itermcolors
    - Preferences->Profiles->Colors->Color Presets からDraculaを選択
    - cloneしたリポジトリは不要なので削除
2. peco
  - brew install peco
  - fisher add oh-my-fish/plugin-peco
    - 上記コマンドでエラーが出る場合は fisher omf/plugin-peco を試す
  - vi ~/.config/fish/config.fish

function fish_user_key_bindings
  bind \cr 'peco_select_history (commandline -b)'
end

    * control + r でコマンド履歴検索できる

2019-04-24

Backlogのgitにpushする際ユーザ名とパスワードの入力を求められるようになった時の対処法

git

備忘録

Terminalからgitを操作してBacklog上のリモートブランチにプッシュしようとした際、常にユーザ名とパスワードの入力を求められるようになってしまった。その場合、以下のようにリモートリポジトリを再設定することで現象が解決した

git remote set-url origin hoge@fuga.git.backlog.jp:/branch_name.git

2019-03-27

sed -eによるパターン置換でエラーが出た時の対処法

linux

sedで置換する際、以下のようなエラーが出た場合の対処法

sed: 1: "s/hogehoge...": bad flag in substitute command: '/'`

-eオプションでパターンによる置換を行う際、区切り文字と同じ文字が置換対象の文字列に含まれている場合発生する。

エラーが出る例(区切り文字 / と同じ文字が置換対象の文字列に含まれる)
- sed -e "s/hogehoge/http://localhost/g
区切り文字を変更することで解決する(下記の例では | に変更している)
- sed -e "s|hogehoge|http://localhost|g

余談

-eオプション でパターンを指定する際、セミコロン ';' で区切ることで1行に複数記述できる

sed -e "s/hogehoge/test/g;s/fugafuga/sample/g

2019-03-22

Homebrewでインストールしたpostgresqlのpsqlコマンドが動かなくなった時の対処法

sql

❯ psql -l
psql: could not connect to server: No such file or directory
    Is the server running locally and accepting
    connections on Unix domain socket "/tmp/.s.PGSQL.5432"?

このようなエラーが出た場合の対処方法です。エラーメッセージでGoogle検索すると多種多様な解決方法が出てきますが、自分の場合は以下の方法で解決しました。

brew upgrade postgresql でpostgresqlを最新に更新
brew info で出力されたメッセージに従う

こんな感じのメッセージが出力されるはずです

❯ brew info postgresql
postgresql: stable 11.2 (bottled), HEAD

〜
中略
〜

To migrate existing data from a previous major version of PostgreSQL run:
  brew postgresql-upgrade-database

To have launchd start postgresql now and restart at login:
  brew services start postgresql
Or, if you don't want/need a background service you can just run:
  pg_ctl -D /usr/local/var/postgres start
==> Analytics
install: 84,642 (30 days), 236,127 (90 days), 754,771 (365 days)
install_on_request: 75,641 (30 days), 208,395 (90 days), 652,972 (365 days)
build_error: 0 (30 days)

/usr/local/Cellar/postgresql

やることは

brew postgresql-upgrade-database 実行
brew services start postgresql 実行
- すでにstartしている場合は念の為stopしてから再度start
pg_ctl -D /usr/local/var/postgres start 実行

これで治りました。

2019-03-06

Vue CLI 3 でvue-routerをインストールしたプロジェクトを作成する

javascript

タイトル通り、個人的なメモ ※macOSで実行

npmでVue CLI 3インストール
ターミナルで以下のコマンド実行
- vue create "APPLICATION_NAME"
Please pick a preset と表示されるので Manually select freatures を選択
選択肢の中から Router を選択しEnter
Use history mode for router? と聞かれるのでYes
- HTML5 Historyモードを使用するか聞かれている
ESLintの設定とか聞かれるけど適宜選択

おわり。

参考 :

https://pizzamanz.net/web/vue/vue-cli-3/

幸福なプログラマ

プログラマは幸福になれる。