From 7bb29946639f2741e1fd722a4825c9dabb0b6153 Mon Sep 17 00:00:00 2001 From: KATT Date: Sat, 5 Jun 2021 11:29:19 +0200 Subject: [PATCH 1/2] illustrate api not in coverage --- nextjs-coverage/src/components/App.test.ts | 5 +++++ nextjs-coverage/src/pages/api/hello.tsx | 7 +++++++ nextjs-coverage/src/pages/index.tsx | 19 ++++++++++++++++--- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 nextjs-coverage/src/pages/api/hello.tsx diff --git a/nextjs-coverage/src/components/App.test.ts b/nextjs-coverage/src/components/App.test.ts index bd23e94..de16910 100644 --- a/nextjs-coverage/src/components/App.test.ts +++ b/nextjs-coverage/src/components/App.test.ts @@ -10,6 +10,11 @@ test("smoke", async () => { await expect(page).toHaveSelector("[data-testid=button]"); }); +test("api got fetched", async () => { + jest.setTimeout(60000); + await expect(page).toHaveText("hello world"); +}); + test("click", async () => { jest.setTimeout(60000); diff --git a/nextjs-coverage/src/pages/api/hello.tsx b/nextjs-coverage/src/pages/api/hello.tsx new file mode 100644 index 0000000..e273a2c --- /dev/null +++ b/nextjs-coverage/src/pages/api/hello.tsx @@ -0,0 +1,7 @@ +import { NextApiRequest, NextApiResponse } from "next"; + +export default function (req: NextApiRequest, res: NextApiResponse) { + res.send({ + text: `hello world`, + }); +} diff --git a/nextjs-coverage/src/pages/index.tsx b/nextjs-coverage/src/pages/index.tsx index ec59441..6d881d2 100644 --- a/nextjs-coverage/src/pages/index.tsx +++ b/nextjs-coverage/src/pages/index.tsx @@ -1,8 +1,19 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' -import App from '../components/App' +import Head from "next/head"; +import styles from "../styles/Home.module.css"; +import App from "../components/App"; +import { useEffect, useState } from "react"; export default function Home() { + const [helloEndpointData, setHelloEndpointData] = useState(null); + useEffect(() => { + // this is just for illustrative purposes, it's not a good way to handle fetching + async function fetchData() { + const json = (await fetch("/api/hello")).json(); + return json; + } + fetchData().then(setHelloEndpointData); + }, []); + return (
@@ -25,6 +36,8 @@ export default function Home() {

debug: NODE_ENV = {process.env.NODE_ENV}

+ +

api response: {JSON.stringify(helloEndpointData, null, 4)}