Change server config and add some simple fetch execution

bennettdams · Oct 20, 2021 · f77bb0f · f77bb0f
1 parent 5cbe84a
commit f77bb0f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -18,4 +18,8 @@
 3. Integrate MSW with Jest
 
 3. Install and utilize `whatwg-fetch` - needed for Polyfill with Next.js
-`npm install -D whatwg-fetch` 
+`npm install -D whatwg-fetch` 
+
+3. Change server config to `onUnhandledRequest: "error"` and add some simple fetch execution in the tested component
+
+==> The test does not fail, even though the tests shows the error
diff --git a/jest.setup.js b/jest.setup.js
@@ -1,6 +1,6 @@
 import { server } from './src/mocks/server.js'
 // Establish API mocking before all tests.
-beforeAll(() => server.listen())
+beforeAll(() => server.listen({ onUnhandledRequest: "error" }))
 // Reset any request handlers that we may add during the tests,
 // so they don't affect other tests.
 afterEach(() => server.resetHandlers())

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,9 +1,16 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
+import { useEffect } from 'react'
 import styles from '../styles/Home.module.css'
 
 const Home: NextPage = () => {
+  useEffect(() => {
+    async function test() {
+      await fetch("https://jsonplaceholder.typicode.com/todos/1");
+    }
+    test();
+  }, []);
   return (
     <div className={styles.container}>
       <Head>