Closed3
React + Apolloのテストで詰まったところ
やりたいこと
ステート管理とそのステートに関するロジックをカスタムHooksに切り出して、そのカスタムHooksから返却されたステートをテストしたい。
参考になった記事↓
詰まったところ
Queryなどで引数を取るときにエラーが出た。例えばこんな時👇
query Countries($limit: Int!) {
countries(limit: $limit) {
name
code
}
}
Custom Hooksではこんな感じでデータをフェッチしている
const { loading, error, data } = useQuery(COUNTRIES, {
variables: { limit: 10 },
});
モックはこんな感じで書いてみた
// :: DATA ::
const mexico = {
name: "Mexico",
code: "MX"
};
const argentina = {
name: "Argentina",
code: "AR"
};
const portugal = {
name: "Portugal",
code: "PT"
};
// :: MOCKS ::
const countriesQueryMock = {
request: {
query: COUNTRIES,
variables: { limit: 5 },
},
result: {
data: {
countries: [argentina, mexico, portugal]
}
}
};
ここでエラーが発生した。
解決策
カスタムHooks内のuseQuery
引数のvariables
とmockのvariables
の値を同じにする。
今回の例では、カスタムHooks内では引数に10
を指定していて、mockでは5
を指定しているので、どちらかに合わせる。
このスクラップは2021/06/06にクローズされました