Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
- Tweets 7,014
- Following 393
- Followers 25,683
- Likes 6,645
![Screenshot of ShoppingCartMenu.test.js file, containing the code:
import { render, screen } from '@testing-library/react';
import ShoppingCartMenu from './ShoppingCartMenu';
it('renders correctly with items', () => {
render(<ShoppingCartMenu cartItems={[ /* items */ ]} totalPrice={1200} />);
const fries = await screen.findByText(/^Fries$/);
expect(getByText(fries.parentElement, '€2.50')).toBeInTheDocument();
// More assertions here
const cheeseburger = await screen.findByText(/^Cheeseburger$/);
expect(getByText(cheeseburger.parentElement, '€8.50')).toBeInTheDocument();
// More assertions here
/*
*
*
* dozens of lines omitted here,
* for everybody's sanity.
*
*
*/
const checkout = screen.getByRole('button');
expect(checkout).not.toBeDisabled();
});](/pic/orig/media%2FGQiucnyXIAAY6fg.jpg)
ALT Screenshot of ShoppingCartMenu.test.js file, containing the code: import { render, screen } from '@testing-library/react'; import ShoppingCartMenu from './ShoppingCartMenu'; it('renders correctly with items', () => { render(<ShoppingCartMenu cartItems={[ /* items */ ]} totalPrice={1200} />); const fries = await screen.findByText(/^Fries$/); expect(getByText(fries.parentElement, '€2.50')).toBeInTheDocument(); // More assertions here const cheeseburger = await screen.findByText(/^Cheeseburger$/); expect(getByText(cheeseburger.parentElement, '€8.50')).toBeInTheDocument(); // More assertions here /* * * * dozens of lines omitted here, * for everybody's sanity. * * */ const checkout = screen.getByRole('button'); expect(checkout).not.toBeDisabled(); });
![Screenshot of ShoppingCartMenu.stories.js file, containing the code:
import { ShoppingCartMenu } from './ShoppingCartMenu'
export default { component: ShoppingCartMenu };
export const WithItems = {
args: {
cartItems: [ /* items */ ],
totalPrice: 1200
},
play: async ({ canvasElement }) => {
const checkout = await findByRole(canvasElement, 'button');
await expect(checkout).not.toBeDisabled();
},
}](/pic/orig/media%2FGQiuyqcXoAARdgU.jpg)
ALT Screenshot of ShoppingCartMenu.stories.js file, containing the code: import { ShoppingCartMenu } from './ShoppingCartMenu' export default { component: ShoppingCartMenu }; export const WithItems = { args: { cartItems: [ /* items */ ], totalPrice: 1200 }, play: async ({ canvasElement }) => { const checkout = await findByRole(canvasElement, 'button'); await expect(checkout).not.toBeDisabled(); }, }
