DEV Community

Manjush
Manjush

Posted on • Edited on

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(),
  }
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️