Write test for useFetch

[archit7448]

Issue

• Test is not written for custom hook useFetch

Files to change

• .gitignore for coverage
• package.json
  • Update react and react-testing-library version
  • Add msw and whatwg-fetch package
  • Inside scripts add test-coverage command.
• husky/pre-commit add npm command for linting and formatting
• jest.config.js add coverage
• src/custom-hooks/useFetch.js change URL methods of passing change with props.

Files to add

• husky/pre-push add command to stop pushing broken test.
• test/unit/hook/`useFetch.test.js add test for useFetch hook.

Test Description

• The test is written with the help of the library msw and whatwg-fetch
• First test check for promise resolve.
• Second test check for promise reject.

Package explanation

• Why msw?
  • Mock server intercepts all the requests from the test.
  • Also can test with rest API
  • lastly can use one set up in many places during development.
• Why whatwg-fetch?
  • Jest is running on node environment, whatwg-fetch will polyfill the window.fetch().

Test Flow

• First server setup with help of msw will work as mock

• Teardown

  • beforeAll => (server.listen( )) and also handle unhandled request
  • afterAll => (server.close( )) it closes the server after all test run so it does not interfere with the real server calls.
  • afterEach => (server.resetHandlers( )) it reset the handles for every test.

• Tests

  • useFetch Hook with resolve
    • Result will give all values of hook by renderHook method
    • Will check result value for loading
    • Will check value after server intercepts the API call
    • compare data with mockData
  • useFetch Hook with reject
    • Result will give all values of hook by renderHook method
    • Will check result value for loading
    • Will check value after server intercepts the API call
    • compare data with server status for error.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
website-members	✅ Ready (Inspect)	Visit Preview	Nov 1, 2022 at 5:12PM (UTC)