【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
2021/06/22 13:53:09
tyncさん
Definition offer types and organize things. As an instance, in the event that you prefer to publish concerning varieties of servers (PCs and servers), all one's developmental paragraphs will probably specify the different qualities of an alternative personal laptop variety.
http://www.bpjepsaptesport.com/index.php/2021/05/17/can-you-pass-the-thesis-order-test/
http://fcparcelona.com/2021/05/17/the-1-nursing-research-paper-writing-help-mistake-plus-7-more-lessons/
http://laketahoekokaneefishing.com/wp-content/_input_3_A_Guide_on_How_to_Write_a_Research_Paper_Outline.html
コメントを投稿する
TOP back