How to test a React component

import { render, screen } from '@testing-library/react';
import MyComponent from '@/MyComponent';


describe('test MyComponent', () => {
    const mockData = {john: "doe"};

    it('should render correctly', async () => {
    // Act
    render(<MyComponent data={mockData} />);

    // Assert
    await waitFor(() => {
      expect(screen.getByText(mockData.john)).toBeInTheDocument();
    });
  });
})

import userEvent from '@testing-library/user-event'

[...]
    render(<MyComponent data={mockData} />);
    await userEvent.click(screen.getByText('doe'))

    await waitFor(() => {
        // assuming there's a button with the button text is "doe",
        // and that button is disabled on clicked.
        expect(screen.getByRole('button')).toBeDisabled()
    });
[...]

import { render } from '@testing-library/react';
import ProviderA from '@/providerA';
import WrapperB from '@/wrapperB';
import ThemeC from '@/themeC';

const TestContext = ({children}: PropsWithChildren) => {
    // do something if needed
    return (
        <ProviderA>
            <WrapperB>
                <ThemeC>
                    {children}
                </ThemeC>
            </WrapperB>
        </ProviderA>
    )
}

const renderWithContext = (component: ReactComponent, options = {}) => {
    return render(component, { wrapper: TestContext, ...options });
}

export * from '@testing-library/react';
export {renderWithContext as render};