反应测试库并导出常量组件

Question

I've pretty much built my entire app using this format to export my components

export const PageLayout = (props) => {
    const isAuthenticated = useIsAuthenticated();

    return <div>{isAuthenticated ? <Main /> : <Landing />}</div>;
};

but when testing with react test library, I have to change the format of my export or else the component won't render at all in test

const PageLayout = (props) => {
    const isAuthenticated = useIsAuthenticated();

    return <div>{isAuthenticated ? <Main /> : <Landing />}</div>;
};

export default PageLayout

If I have to go with second export, then I'll have to change all of the imports in my project and I'd really prefer not to do that so is there a way to use react test library without changing my import / exports?

example code snippet:

describe("Login page", () => {
    it("renders login button", () => {
        render(<PageLayout />);

        const buttonText = screen.getByText(/sign in/i, { exact: false });
        expect(buttonText).toBeVisible();
    });

Answer 1

I'm pretty sure you can do something like this:

 import { render, screen } from '@testing-library/react'; import {PageLayout} from './PageLayout'; test('renders learn react link', () => { render(<PageLayout />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); });