【node.js】expressの画面テストをjest + puppeteerで行う | 瀬戸内の雲のように

【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.

スポンサーリンク




コメント一覧

2020/07/26 17:28:26

ambudgeさん

Propecia Topical Female Hair Loss FakAcand https://bbuycialisss.com/# - buy cialis online us TiemoRib medicine cialis smamsger discreet cialis meds SmorterceTor efectos de la viagra



コメントを投稿する


お名前


コメント内容





TOP back