How to develop an offline Front-End app with mock data

01-initial-setup.sh

git clone git@github.com:Pixelmatters/setup-project-demo.git project-demo-msw
cd project-demo-msw
npm install

02-create-users-component.sh

mkdir src/components
touch src/components/users.tsx

03-users-component.tsx

export const Users: React.FC = () => {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        <li>User 1</li>
        <li>User 2</li>
        <li>User 3</li>
      </ul>
    </div>
  )
}

04-create-users-component-story.sh

touch src/components/users.stories.tsx

05-users-component-story.tsx

import { ComponentStory, ComponentMeta } from '@storybook/react'

import { Users } from './users'

export default {
  title: 'Components/Users',
  component: Users,
} as ComponentMeta<typeof Users>

const Template: ComponentStory<typeof Users> = (args) => <Users {...args} />

export const Default = Template.bind({})

06-run-storybook.sh

npm run storybook

07-update-users-component.tsx

import { useEffect, useState } from 'react'

type User = {
  id: number
  name: string
}

export const Users: React.FC = () => {
  const [users, setUsers] = useState<User[]>([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((result: User[]) => {
        setUsers(result)
      })
      .catch(console.error)
  }, [])

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  )
}

08-install-msw.sh

npm install msw@^0.36.0 --save-dev
npx msw init public/ --save

09-create-mocks-handlers.sh

mkdir src/mocks
touch src/mocks/handlers.ts

10-mocks-handlers.ts

import { rest } from 'msw'

export const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/users', (req, res, ctx) => {
    return res(
      ctx.delay(),
      ctx.status(200),
      ctx.json([
        { id: 1, name: 'Leanne Graham' },
        { id: 2, name: 'Ervin Howell' },
        { id: 3, name: 'Clementine Bauch' },
        { id: 4, name: 'Patricia Lebsack' },
        { id: 5, name: 'Chelsey Dietrich' },
        { id: 6, name: 'Mrs. Dennis Schulist' },
        { id: 7, name: 'Kurtis Weissnat' },
        { id: 8, name: 'Nicholas Runolfsdottir V' },
        { id: 9, name: 'Glenna Reichert' },
        { id: 10, name: 'Clementina DuBuque' },
      ])
    )
  }),
]

11-install-msw-storybook-addon.sh

npm install msw-storybook-addon --save-dev

12-storybook-preview.js

import { initialize, mswDecorator } from 'msw-storybook-addon'
import { handlers } from '../src/mocks/handlers'
import '../src/index.css'

initialize({ onUnhandledRequest: 'bypass' });

export const decorators = [mswDecorator];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  msw: { handlers },
}

13-storybook-main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "storybook-builder-vite"
  },
  "staticDirs": ["../public"], // this line was added
}

14-run-storybook.sh

npm run storybook

15-build-storybook.sh

npm run build-storybook

16-serve-storybook-static.sh

npx http-server ./storybook-static/

17-gitignore.txt

node_modules
.DS_Store
dist
dist-ssr
*.local
storybook-static # this line as added

18-create-mocks-browser.sh

touch src/mocks/browser.ts

19-mocks-browser.ts

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

20-update-main.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { App } from './App'

async function prepare() {
  if (process.env.NODE_ENV === 'development') {
    const { worker } = await import('./mocks/browser')
    return worker.start({ onUnhandledRequest: 'bypass' })
  }
  return Promise.resolve()
}

prepare()
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    )
  })
  .catch(console.error)

21-run-dev-server.sh

npm run dev

22-update-app.tsx

import logo from './logo.svg'
import { Users } from './components/users'
import './App.css'

export const App: React.FC = () => {
  return (
    <div className="app">
      <header className="app-header">
        <img src={logo} className="app-logo" alt="logo" />
        <p>Hello Vite + React!</p>
        <Users />
      </header>
    </div>
  )
}

23-create-mocks-server.sh

touch src/mocks/server.ts

24-mocks-server.ts

import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

25-create-jest-setup.sh

touch jest.setup.js

26-jest.setup.js

const { server } = require('./src/mocks/server')

// Establish API mocking before all tests.
beforeAll(() => server.listen())

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())

// Clean up after the tests are finished.
afterAll(() => server.close())

27-jest.config.js

module.exports = {
  preset: 'ts-jest',
  testMatch: ['**/src/**/?(*.)+(spec|test).[jt]s?(x)'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['./jest.setup.js'], // this line was added
}

28-run-tests.sh

npm run test

29-tests-errors.txt

● renders hello message

    ReferenceError: fetch is not defined

      10 |
      11 |   useEffect(() => {
    > 12 |     fetch('https://jsonplaceholder.typicode.com/users')
         |     ^
      13 |       .then((res) => res.json())
      14 |       .then((result: User[]) => {
      15 |         setUsers(result)

      at src/components/users.tsx:12:5
      at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
      at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
      at render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.<anonymous> (src/App.test.tsx:6:9)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.175 s, estimated 3 s
Ran all test suites.

30-install-fetch-polyfill.sh

npm install whatwg-fetch --save-dev

31-jest-setup-with-fetch-polyfill.js

require('whatwg-fetch') // this line was added
const { server } = require('./src/mocks/server')

// Establish API mocking before all tests.
beforeAll(() => server.listen())

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())

// Clean up after the tests are finished.
afterAll(() => server.close())

32-run-tests.sh

npm run test

33-tests-success.txt

> demo-project@0.0.0 test
> jest

 PASS  src/demo.test.ts
 PASS  src/App.test.tsx

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.856 s, estimated 3 s
Ran all test suites.

34-App.spec.tsx

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import { App } from './App'

it('renders hello message', () => {
  render(<App />)
  expect(screen.getByText('Hello Vite + React!')).toBeInTheDocument()
  expect(
    screen.getByRole('heading', { level: 1, name: 'Users' })
  ).toBeInTheDocument()
  expect(screen.getByRole('list')).toBeInTheDocument()
  expect(screen.getAllByRole('listitem')).toHaveLength(10)
})

35-run-tests.sh

npm run test

36-tests-error.txt

Unable to find an accessible element with the role "listitem"

37-users-component-with-error-handling.tsx

// ...

export const Users: React.FC = () => {
  const [isLoading, setIsLoading] = useState(false) // this line was added
  const [users, setUsers] = useState<User[]>([])

  useEffect(() => {
    setIsLoading(true) // this line was added
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((result: User[]) => {
        setUsers(result)
      })
      .catch(console.error)
      .finally(() => {
        setIsLoading(false) // this line was added
      })
  }, [])

	return (
    <div>
      <h1>Users</h1>
      {/* we conditionally render the loading or success UI */}
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

38-app-tests-with-loading.tsx

import '@testing-library/jest-dom'
import {
  render,
  screen,
  waitForElementToBeRemoved, // this line was added
} from '@testing-library/react'
import { App } from './App'

it('renders hello message', async () => { // this line was updated
  render(<App />)
  expect(screen.getByText('Hello Vite + React!')).toBeInTheDocument()
  expect(
    screen.getByRole('heading', { level: 1, name: 'Users' })
  ).toBeInTheDocument()
  const loading = screen.getByText('Loading...') // this line was added
  await waitForElementToBeRemoved(loading) // this line was added
  expect(screen.getByRole('list')).toBeInTheDocument()
  expect(screen.getAllByRole('listitem')).toHaveLength(10)
})

39-update-vite-and-cypress.sh

npm update vite cypress

40-run-build.sh

npm run build

41-run-serve.sh

npm run serve

42-run-serve-output.txt

❯ npm run serve

> demo-project@0.0.0 serve
> vite preview

  > Local: http://localhost:4173/
  > Network: use `--host` to expose

43-vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  preview: { port: 3000 }, // this line was added
  server: { port: 3000 }, // this line was added
})

44-run-serve.sh

npm run serve

45-run-serve-output.txt

❯ npm run serve

> demo-project@0.0.0 serve
> vite preview

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

46-install-cypress-msw-interceptor.sh

npm install cypress-msw-interceptor --save-dev

47-cypress-support-index.ts

import './commands'

import 'cypress-msw-interceptor' // this line was added

48-cypress-integration-app.spec.ts

describe('App', () => {
  it('shows the users list', () => {
    cy.interceptRequest(
      'GET',
      'https://jsonplaceholder.typicode.com/users',
      (req, res, ctx) => {
        return res(
          ctx.delay(),
          ctx.status(200),
          ctx.json([
            { id: 1, name: 'Mock User 1' },
            { id: 2, name: 'Mock User 2' },
            { id: 3, name: 'Mock User 3' },
          ]),
        )
      },
    )
    cy.visit('/')
    cy.findByRole('heading').should('have.text', 'Users')
    cy.findByText('Loading...').should('exist')
    cy.findByRole('list').should('exist')
    cy.findAllByRole('listitem').should('have.length', 3)
  })
})

49-update-cypress-support-index.ts

import { rest } from 'msw' // this line was added

import './commands'

import 'cypress-msw-interceptor'

// this block was added
declare global {
  namespace Cypress {
    interface Chainable {
      interceptRequest(
        method: string,
        url: string,
        responseResolver: Parameters<typeof rest.get>[1],
        alias?: string,
      ): Chainable<any>
    }
  }
}

50-run-cypress.sh

npm run cypress:open