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()
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>
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>
Please follow and like us:
