Build a component that displays a list of Pokemons with a "Load more" button. You can use the free Poke API to retrieve the data.
- Initially, the component should only show the first 5 items
- Below the list, there should be a label saying how many items are being displayed from the total - e.g. "Displaying 20 of 567 results"
- Clicking "Load more" will load another 5 items into the list
- When the are no more results, the button should no longer be displayed
The styling doesn't matter for this component - just make sure to display the pokemons as <li>
elements in a list (ul
) and show the name for each.
Make sure to get the unit tests to pass. The tests mock the real API using msw
. If you haven't used it before, this is a nice walkthrough.
- Run
npm install
- Open the test file:
src/__tests__/pokemon-list.test.jsx
- Run the tests
npm run test
- Fix them!
Tips:
- replace
test("bla")
withtest.only("bla")
to run only that test - move the console section with the test results to the right side of the code editor, so it's side by side with the code
- consider installing the "Jest" VSCode extension to have a better experience running the tests