【node.js】expressの画面テストをjest + puppeteerで行う
Posted: 2020-05-17
スポンサーリンク
目次
背景
以前WEBアプリを作っていた時にはrobot framework + selenium で画面テストを行っていました。
しかし今回はnode.jsの環境なので新しい方法を探そうと思い色々調査しました。
その結果、 jest + puppeteer でテストするのが良さそうだったのでメモしておきます。
前提
すでにjestが使える状態という前提で、jest-puppeteerを追加する場合の手順です。
手順概要
- インストール
- 設定
- サンプルコード
- 実行
インストール
npmで諸々インストールします。
$ npm install jest-puppeteer puppeteer --save-dev
これでOK
設定
jestの設定とeslintの設定(no-undefエラーに引っかからないようにする)を行います。
jestの設定ファイルは独立して書くことも可能ですが、今回は package.json に書くようにしました。
package.jsonの末尾の方に以下を記載します。
"jest": {
"preset": "jest-puppeteer"
}
次に.eslintrc.js に以下を追記します。
"env": {
"jest/globals": true
},
"globals": {
"page": true,
"browser": true,
"jestPuppeteer": true
},
"plugins": [
"jest"
],
サンプルコード
今回はexpressで超簡単なページを表示させ、その内容をテストするという前提です。
まずexpress側の設定は以下のような感じです。
ちなみにディレクトリ構成はこんな感じです。
/---- app.js
+--- routes/
| +-- index.js
+--- views/
| +-- index.ejs
+---__tests__/
+-- index.test.js
//app.js
var express = require("express");
var app = express();
app.set("view engin", "ejs");
app.disable("x-powered-by");
app.use("/", (()=> {
var router = express.Router();
router.use("/", require("./routes/index.js"));
return router;
})());
app.listen(3000, () => console.log("app listen on port 3000..."));
//./routes/index.js
var router = require("express").Router();
router.get("/", (req, res) => {
res.render("./index.ejs");
});
module.exports = router;
//./index.ejs
<html>
<head>
<title>hello</title>
</head>
<h1>hello world</h1>
<p>hello world</p>
</html>
次にjestのテストコードです。
//__tests__/index.test.js
let page;
beforeAll(async () => {
page = await browser.newPage();
await page.goto("http://localhost:3000");
});
test("/にアクセスした時に 'hello world' と表示されること", async () => {
await expect(page).toMatch("hello world");
});
実行
まずexpressを実行しWEBアプリを起動します。
$ node app.js
次にテストを実行します。
$ npm run test
以下のように表示されれば成功です。
> blog@1.0.0 test /Users/kaisha/Desktop/blog/blog
> jest
PASS __tests__/index.test.js
✓ /にアクセスした時に 'hello world' と表示されること (70 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.519 s
Ran all test suites.
スポンサーリンク
コメント一覧
2021/03/18 17:15:14
PexAdepleさん
https://ponlinecialisk.com/ - generic cialis no prescription
コメントを投稿する
TOP back