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

スポンサーリンク




コメント一覧

2022/05/20 20:11:56

Nishaknappさん

The quality and quantity of work produced here are absolutely informative. Thanks for sharing. My site:: 토토사이트추천


2022/05/20 22:17:36

nfcmwthkさん

modafinil price


2022/05/21 07:02:13

dzsbimgoさん

modafinil 100mg brand provigil 100mg sale


2022/04/08 06:25:28

Wswhjxさん

order topamax pills - sumatriptan order order generic imitrex 25mg


2022/04/09 15:17:28

Mrxcojさん

dutasteride over the counter - dutasteride order online buy tadalafil 20mg online cheap


2022/04/11 21:32:12

Fxugtbさん

the best ed pill - ed solutions order prednisone 10mg pill


2022/04/12 22:22:17

Qremabさん

accutane 40mg price - brand amoxicillin 250mg amoxil 500mg pills


2022/04/14 03:15:32

Sxwlwwさん

order furosemide 40mg online - azithromycin 500mg generic buy zithromax 250mg generic


2022/04/15 04:04:40

Msfbitさん

order doxycycline without prescription - plaquenil pills purchase chloroquine sale


2022/04/22 03:17:22

Cakanlさん

cialis mail order - female viagra cvs sildenafil 100mg brand


2022/04/23 07:59:55

Rbwhezさん

order modafinil 200mg sale - buy provigil 200mg pill sildenafil drug


2022/04/24 06:28:19

Cinlwpさん

male erection pills - prednisone 40mg canada prednisone 10mg price


2022/04/25 10:01:33

Jaqbdmさん

isotretinoin buy online - celecoxib online order buy celebrex without prescription


2022/04/26 16:42:29

Hiopjsさん

tamsulosin ca - order zofran 4mg sale order aldactone 25mg online cheap


2022/04/27 20:28:44

Kvcbxxさん

simvastatin 10mg tablet - buy valtrex for sale my friend essay writing


2022/04/28 10:39:21

jackさん

Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck Marlboro Jacket


2022/04/28 23:09:38

Rzanniさん

online slots for real money - real casino academia writers


2022/04/30 07:11:53

Koruqvさん

free slots - cheap ampicillin ampicillin 250mg over the counter


2022/05/01 07:43:13

Linwbkさん

oral cipro 500mg - order generic cialis 40mg cialis pill


2022/05/04 09:48:48

Kmfmlnさん

sildenafil fast shipping - sildenafil india purchase sildenafil


2022/05/07 19:53:35

Paqywoさん

prednisolone 20mg drug - prednisolone medication purchase tadalafil without prescription


2022/05/08 00:38:55

Nebkxsさん

prednisolone 20mg pills - order cialis 5mg online cheap generic cialis online


2022/05/10 07:27:19

Ifsmapさん

order augmentin 1000mg generic - tadalafil generic name buy tadalafil without prescription


2022/05/10 13:31:38

Fjyalsさん

clavulanate cheap - order augmentin 1000mg without prescription cialis tadalafil 20mg


2022/05/12 19:10:50

Auxmxrさん

bactrim 480mg price - purchase sildenafil purchase sildenafil without prescription


2022/05/12 23:55:17

Zlklhiさん

cost bactrim 480mg - viagra 200mg cheap generic viagra


2022/05/15 06:43:56

Lwuigyさん

order cephalexin online - buy cephalexin 125mg online cheap erythromycin 500mg brand


2022/05/18 02:51:08

mvkcrfxaさん

buy modafinil for sale buy modafinil 100mg pill


2022/05/18 05:02:35

california jacketさん

I am soo happy to read this article it is very helpful and informative content thanks to posting it Top Gun Maverick Costume


2022/05/18 05:49:07

smeigsvyさん

generic modafinil provigil 100mg us provigil 100mg uk


2022/05/18 08:09:02

wbbxtkyoさん

provigil 200mg usa


2022/05/18 17:08:56

Nmfqsdさん

purchase budesonide sale - tadalafil price antabuse 500mg sale


2022/05/18 20:21:04

Kexssfさん

budesonide oral - buy rhinocort online buy antabuse 250mg without prescription


2022/05/18 22:03:24

crraxafyさん

buy modafinil 100mg for sale order modafinil for sale buy modafinil 100mg generic


2022/05/19 01:37:30

lofmhskgさん

http://erythromycinn.com/# erythromycin overdose


2022/05/20 01:19:22

bqbmjmnbさん

buy generic modafinil


2022/05/20 04:19:05

maxhkcbdさん

modafinil online buy provigil price


2022/05/20 04:35:06

Mrquwwさん

order ceftin 500mg generic - cialis order cialis 20mg tablet


2022/05/20 06:36:38

pggqnhejさん

provigil for sale online


2022/05/20 07:44:06

Bdtmazさん

ceftin without prescription - purchase cefuroxime for sale cialis 10mg for sale


2022/05/20 20:40:05

Nishaknappさん

The quality and quantity of work produced here are absolutely informative. Thanks for sharing. My site:: 검증사이트



コメントを投稿する


お名前


コメント内容





TOP back