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();
});
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(); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.