はじめに
react hooks + react-apollo-hooks で作成したアプリを jest を使ってテストを書く方法を紹介します。
以前作成したReact Apollo Hooks を使ってログイン機能を作ったにテストを追加しています。
sample-login-with-react-apollo-hooks - Github
必要なパッケージのインストール
$ npm i --save-dev @types/enzyme enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 apollo-link-mock ts-jest @apollo/react-testing
バージョン
| パッケージ | バージョン |
|---|---|
| react | 16.9.0 |
| typescript | 3.5.3 |
| react-apollo-hooks | 0.5.0 |
| @types/jest | 24.0.17 |
| @types/enzyme | 3.10.3 |
| enzyme | 3.10.0 |
| enzyme-adapter-react-16 | 1.14.0 |
| @types/enzyme-adapter-react-16 | 1.0.5 |
| apollo-link-mock | 1.0.1 |
| ts-jest | 24.0.2 |
| @apollo/react-testing | 3.0.1 |
テストコマンドの修正とJestの設定
package.json
- "test": "react-scripts test",
+ "test": "jest",
"eject": "react-scripts eject"
},
+ "jest": {
+ "testURL": "http://localhost",
+ "moduleFileExtensions": [
+ "ts",
+ "tsx",
+ "js"
+ ],
+ "transform": {
+ "^.+\\.(ts|tsx)$": "ts-jest"
+ }
+ },
これで npm test or npm t が叩けるようになりました。
テストファイルを作成
今回作成するテストは src/Login/index.tsx に対して作成するので、
src/Login/index.test.tsx を作ります。
src/Login/index.test.tsx
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { MockLink } from "apollo-link-mock";
import { GraphQLRequest } from "apollo-link";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import gql from "graphql-tag";
import React from "react";
import { ApolloProvider } from "react-apollo-hooks";
import { BrowserRouter as Router } from "react-router-dom";
import { MockedProvider } from "@apollo/react-testing";
import Login from "../Login";
Enzyme.configure({ adapter: new Adapter() });
const loggedUserQuery = gql`
{
loggedUser {
id
}
}
`;
type MockType = {
request: {
query: GraphQLRequest;
variables?: { loginid: string; password: string };
};
result: { data: any };
};
const successMocks: MockType[] = [
{
request: { query: loggedUserQuery },
result: { data: { loggedUser: null } }
}
];
const setup = (mocks = successMocks) => {
const client = new ApolloClient({
cache: new InMemoryCache({ addTypename: false }),
link: new MockLink(mocks)
});
const enzymeWrapper = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<ApolloProvider client={client}>
<Router>
<Login />
</Router>
</ApolloProvider>
</MockedProvider>
);
return {
enzymeWrapper
};
};
describe("Login", () => {
});
src/Login/index.tsxには以下の機能があるので、これらにあわせてテストを追加していきます。
- 既にログイン済みか問い合わせる
- 問い合わせ中は
Now Loading...と表示 - 問い合わせ完了後、ログイン済みであれば、
/へリダイレクト - 問い合わせ完了後、未ログインであれば、フォームを表示
- 問い合わせ中は
- フォームのログインIDテキストフィールドに入力するとテキストフィールドの値が入力した値に変わる
- フォームのパスワードフィールドに入力するとパスワードフィールドの値が入力した値に変わる
- ログインボタンを押下し、ログインに成功すると、
/へリダイレクト - ログインボタンを押下し、ログインに失敗すると、各フォームの値がクリアされる
ローディングメッセージが表示されること
src/Login/index.test.tsx
describe("Login", () => {
+ it("ローディングメッセージが表示されること", () => {
+ const { enzymeWrapper } = setup();
+ expect(enzymeWrapper.find("Login div").text()).toEqual("Now Loading...");
+ });
});
カバレッジも確認しながらテストを実行しましょう、
$ npm t -- --coverage
ログインしていない場合
問い合わせた結果、ログインしていないことが分かり、ログイン情報を入力するフォームが表示されることをテストします。
フォームが表示される
❌src/Login/index.test.tsx
+ describe("ログインしていない場合", () => {
+ it("フォームが表示されること", async () => {
+ const { enzymeWrapper } = setup();
+ expect(enzymeWrapper.find("Login input[type='text']").exists()).toEqual(
+ true
+ );
+ expect(
+ enzymeWrapper.find("Login input[type='password']").exists()
+ ).toEqual(true);
+ expect(enzymeWrapper.find("Login input[type='submit']").exists()).toEqual(
+ true
+ );
+ });
+ });
● Login › ログインしていない場合 › フォームが表示されること
expect(received).toEqual(expected) // deep equality
Expected: true
Received: false
58 | it("フォームが表示されること", async () => {
59 | const { enzymeWrapper } = setup();
> 60 | expect(enzymeWrapper.find("Login input[type='text']").exists()).toEqual(
| ^
61 | true
62 | );
63 | expect(
これは、ログイン済みか問い合わせているロードが終わっていないので、まだ Now Loading...と表示されていることが原因です。
確認してみます。
src/Login/index.test.tsx
it("フォームが表示されること", async () => {
const { enzymeWrapper } = setup();
console.log(enzymeWrapper.debug());
});
console.logで出力すると
console.log src/Login/index.test.tsx:60
<MockedProvider mocks={{...}} addTypename={false}>
<ApolloProvider client={{...}}>
<ApolloProvider client={{...}}>
<BrowserRouter>
<Router history={{...}}>
<withRouter(Login)>
<Login history={{...}} location={{...}} match={{...}} staticContext={[undefined]}>
<div>
Now Loading...
</div>
</Login>
</withRouter(Login)>
</Router>
</BrowserRouter>
</ApolloProvider>
</ApolloProvider>
</MockedProvider>
ローディングが終わっていませんね。
では、問い合わせを終わらせるようにします。
src/Login/index.test.tsx
it("フォームが表示されること", async () => {
const { enzymeWrapper } = setup();
+ await new Promise(resolve => setTimeout(resolve));
+ enzymeWrapper.update();
console.log(enzymeWrapper.debug());
});
console.log src/Login/index.test.tsx:62
<MockedProvider mocks={{...}} addTypename={false}>
<ApolloProvider client={{...}}>
<ApolloProvider client={{...}}>
<BrowserRouter>
<Router history={{...}}>
<withRouter(Login)>
<Login history={{...}} location={{...}} match={{...}} staticContext={[undefined]}>
<div>
<div>
<label>
ID
<br />
<input type="text" value="" onChange={[Function: onChange]} />
</label>
</div>
<div>
<label>
PW
<br />
<input type="password" value="" onChange={[Function: onChange]} />
</label>
</div>
<div>
<input type="submit" value="ログイン" onClick={[Function: onClick]} />
</div>
</div>
</Login>
</withRouter(Login)>
</Router>
</BrowserRouter>
</ApolloProvider>
</ApolloProvider>
</MockedProvider>
問い合わせのローディングが終わり、フォームが表示されていることが分かります。
問い合わせた結果useQuery(loggedUserQuery); のレスポンスについては、MockedProviderに渡しているmocksの値で結果を変えることができます。
const successMocks: MockType[] = [
{
request: { query: loggedUserQuery },
result: { data: { loggedUser: null } }
}
];
loggedUser: nullであればログインしていないと判断し、ログインフォームを表示するような処理になっているので、そのレスポンスを再現しています。
では、ローディングを完了させた上でフォームが表示されているテストに修正します。
src/Login/index.test.tsx
describe("ログインしていない場合", () => {
it("フォームが表示されること", async () => {
const { enzymeWrapper } = setup();
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
expect(enzymeWrapper.find("Login input[type='text']").exists()).toEqual(
true
);
expect(
enzymeWrapper.find("Login input[type='password']").exists()
).toEqual(true);
expect(enzymeWrapper.find("Login input[type='submit']").exists()).toEqual(
true
);
});
});
ログインIDを入力した場合、テキストフィールドの値が更新されること
文字の入力はsimulateを使い、changeイベントを起動します。
src/Login/index.test.tsx
describe("ログインIDを入力した場合", () => {
it("テキストフィールドの値が更新されること", async () => {
const { enzymeWrapper } = setup();
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
expect(
enzymeWrapper.find("Login input[type='text']").prop("value")
).toEqual("");
enzymeWrapper
.find("Login input[type='text']")
.simulate("change", { target: { value: "loginid" } });
expect(
enzymeWrapper.find("Login input[type='text']").prop("value")
).toEqual("loginid");
});
});
今回は値の受け取り方を
onChange={e => setLoginid(e.target.value || "")}
とtargetで受け取りましたが、currentTargetを使用する場合はsimulateの書き方を
const textField = enzymeWrapper.find("Login input[type='text']");
const inputElement = textField.getDOMNode() as HTMLInputElement;
inputElement.value = "loginid";
textField.simulate("change");
とするとできます。
パスワードを入力した場合、パスワードフィールドの値が更新されること
テキストフィールドの入力テストと同じ要領で追加します。
ログイン処理を実行
ログインに成功した場合
ログインに成功した場合のレスポンスを受け取る必要があるので、mocksに追加します。
src/Login/index.test.tsx
+const loginMutation = gql`
+ mutation login($loginid: String!, $password: String!) {
+ login(input: { loginid: $loginid, password: $password }) {
+ user {
+ accessToken {
+ token
+ }
+ }
+ result
+ }
+ }
+`;
const successMocks: MockType[] = [
{
request: { query: loggedUserQuery },
result: { data: { loggedUser: null } }
+ },
+ {
+ request: {
+ query: loginMutation,
+ variables: { loginid: "loginid", password: "password" }
+ },
+ result: {
+ data: {
+ login: { result: true, user: { accessToken: { token: "token" } } }
+ }
+ }
}
];
ルートにリダイレクトされる
以下の流れで行います。
- ログイン済みか問い合わせを完了させる
- ログインIDを入力
- パスワードを入力
- ログインボタンをクリック
- ログイン処理を実行し、レスポンスを受け取る
-
/のルートをhistoryにpushされる
src/Login/index.test.tsx
describe("ログイン処理を実行", () => {
describe("ログインに成功した場合", () => {
it("ルートにリダイレクトされる", async () => {
const { enzymeWrapper } = setup();
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
enzymeWrapper
.find("Login input[type='text']")
.simulate("change", { target: { value: "loginid" } });
enzymeWrapper
.find("Login input[type='password']")
.simulate("change", { target: { value: "password" } });
enzymeWrapper.find("Login input[type='submit']").simulate("click");
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
const history: any = enzymeWrapper.find("Login").prop("history");
expect(history.length).toEqual(2);
expect(history.action).toEqual("PUSH");
expect(history.location.pathname).toEqual("/");
});
});
});
});
ログインに失敗した場合
ログインに失敗した場合は、ログイン処理で受け取るレスポンスを変える必要があるので、エラー用のmocksを用意します。
src/Login/index.test.tsx
const errorMocks: MockType[] = [
{
request: { query: loggedUserQuery },
result: { data: { loggedUser: null } }
},
{
request: {
query: loginMutation,
variables: { loginid: "loginid", password: "password" }
},
result: {
data: {
loggedUser: { result: false, user: { accessToken: null } }
}
}
}
];
入力内容が空になる
ログインに成功した場合と同じような要領で追加します。
src/Login/index.test.tsx
describe("ログインに失敗した場合", () => {
it("入力内容が空になる", async () => {
const { enzymeWrapper } = setup(errorMocks);
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
enzymeWrapper
.find("Login input[type='text']")
.simulate("change", { target: { value: "loginid" } });
enzymeWrapper
.find("Login input[type='password']")
.simulate("change", { target: { value: "password" } });
enzymeWrapper.find("Login input[type='submit']").simulate("click");
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
expect(
enzymeWrapper.find("Login input[type='text']").prop("value")
).toEqual("");
expect(
enzymeWrapper.find("Login input[type='password']").prop("value")
).toEqual("");
});
});
ログイン済みの場合ルートにリダイレクトされる
最後に、ログイン済みと問い合わせた結果、判断された場合は、ルートにリダイレクトするテストを追加します。
これも、ログイン済みかどうかを問い合わせた結果を変更するので、mocksを用意します。
src/Login/index.test.tsx
const loggedInMocks: MockType[] = [
{
request: { query: loggedUserQuery },
result: { data: { loggedUser: { id: "1" } } }
}
];
このmocksを使用してテストを追加します。
src/Login/index.test.tsx
describe("ログイン済みの場合", () => {
it("ルートにリダイレクトされる", async () => {
const { enzymeWrapper } = setup(loggedInMocks);
await new Promise(resolve => setTimeout(resolve));
enzymeWrapper.update();
expect(enzymeWrapper.find("Login Redirect").exists()).toEqual(true);
});
});
これでcoverageは100%になりました。
npm t -- --coverageとオプションをつけるとカバレッジのレポートファイルが作成され、coverage/lcov-report/index.htmlをブラウザで開くと確認出来ます。
おわりに
react-apollo-hooksでテストを書くのは初めてだったので、躓きも多く、この１ファイルのテストを書くだけで結構時間使いました。
リクエストを返した状態にするのはどうやるかであったり、mountの方法、あとテキストフィールドに入力した値が正常に変更されているかの検証に手こずりました。
textFieldを一旦変数に入れる以下の方法だと、変更後の値が取れない罠にかかりました。
const textField = enzymeWrapper.find("Login input[type='text']");
expect(textField.prop("value")).toEqual("");
textField.simulate("change", { target: { value: "loginid" } });
textField.update();
expect(textField.prop("value")).toEqual("loginid");