TWIL: Highlights from Week 27 2024

This Week I Learned:

1. Mocking imports with vitest

We can mock imports of imports with

vi.mock('pg', () => {
  const Client = vi.fn()
  Client.prototype.connect = vi.fn()
  Client.prototype.query = vi.fn()
  Client.prototype.end = vi.fn()

  return { Client }
})

vi.mock('./handlers.js', () => {
  return {
    success: vi.fn(),
    failure: vi.fn(),
  }
})

2. Making Infinite Scroll keyboard accessible:

If you are using react-infinite-scroll-component and to make it keyboard accessible we can use buttons as child elements.

<InfiniteScroll
    dataLength={items.length}
    next={fetchData}
    hasMore={hasMoreData}
    loader={() => <p>Loading...</p>}
>
    {items.map((item, index) => (
        <div
            id={index}
            key={index}
            onClick={handleClick}
            style={styles}
        >
            <button>
                {childNodeOfScrollList}
            </button>
        </div>
    ))}
</InfiniteScroll>