Facing rendering issue when running tests

[sornalatha-mahendran]

I am writing unit tests with Jest and react-testing library. I am facing render issue with the react-slick, done as much as possible digging of issue and tried out many solutions nothing solved my problem. Looking for a help.
Attached the sample code
React-slick.js
// In your jest.setup.js or at the top of your test file before any imports:
jest.mock('react-slick', () => {
// Mock the Slider as a functional component that renders its children
// and handles props like 'nextArrow' and 'prevArrow'.
const SlickSlider = ({ children, nextArrow, prevArrow }) => (

{prevArrow}
{children}
{nextArrow}

);

// Ensure any named exports are also mocked if used
return {
  __esModule: true, // This property is crucial for mocks to work with ES module syntax
  default: SlickSlider,
  Slider: SlickSlider // Mock Slider if it's a named export
};

});
Sample Slider
import Slider from 'react-slick';
import React from 'react';

const MyComponent = () => {
const settings = {
// Assume 'NextArrow' and 'PrevArrow' are also React components
nextArrow: Next,
prevArrow: Prev
};

return (
<Slider {...settings}>

Slide 1

Slide 2

);
};

export default MyComponent;
Test file
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './sample';
import { jest } from '@jest/globals';
import React from 'react';

describe('MyComponent', () => {
it('renders slides and controls', () => {
render();
expect(screen.getByText('Slide 1')).toBeInTheDocument();
expect(screen.getByText('Next')).toBeInTheDocument(); // Checks for next arrow text
expect(screen.getByText('Prev')).toBeInTheDocument(); // Checks for prev arrow text
});
});