Can you give me an example on how to write a jest test on a server component using async?
#Example jest test on server component
hallow lily
ivory yachtBOT
Hi @hallow lily. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I'm sorry, but based on the information provided in the extracts, it's currently not possible to test asynchronous server components using Jest in the Next.js framework. Both the Next.js documentation on setting up Jest (https://nextjs.org/docs/pages/building-your-application/testing/jest) and a Github issue (https://github.com/vercel/next.js/issues/47131) highlight that Jest does not support testing of asynchronous server components due to their novelty in the React ecosystem.
While you can still run unit tests for synchronous Server and Client Components, it is recommended to use End-to-End (E2E) tests for asynchronous components.
For setting up Jest with Next.js, you can use the create-next-app with the Next.js with-jest example to quickly get started:
npx create-next-app@latest --example with-jest with-jest-app
For testing asynchronous components, you might want to consider using E2E testing tools like Cypress or Playwright as suggested in a Github comment (https://github.com/vercel/next.js/issues/53065).
Please note that this information is based on the provided extracts and may not be the most up-to-date or comprehensive. For the most accurate information, please refer to the official Next.js and Jest documentation.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
hallow lily
@ivory yacht give me an example of jest and cypress testing on a server component.
ivory yachtBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but based on the information provided in the extracts, it's currently not possible to test asynchronous server components using Jest or Cypress in the Next.js framework.
The Next.js documentation on setting up Jest (https://nextjs.org/docs/pages/building-your-application/testing/jest) and a Github issue (https://github.com/vercel/next.js/issues/47131) highlight that Jest does not support testing of asynchronous server components due to their novelty in the React ecosystem.
Similarly, the Next.js documentation on setting up Cypress (https://nextjs.org/docs/pages/building-your-application/testing/cypress) mentions that Cypress currently doesn't support component testing for async Server Components.
While you can still run unit tests for synchronous Server and Client Components with Jest, it is recommended to use End-to-End (E2E) tests for asynchronous components.
Please note that this information is based on the provided extracts and may not be the most up-to-date or comprehensive. For the most accurate information, please refer to the official Next.js, Jest, and Cypress documentation.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
hallow lily
@ivory yacht Give me an example of testing a server component with cypress.
ivory yachtBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry, but based on the information provided in the extracts, Cypress currently doesn't support component testing for async Server Components in Next.js. This is mentioned in the Next.js documentation on setting up Cypress (https://nextjs.org/docs/app/building-your-application/testing/cypress#creating-your-first-cypress-component-test).
However, you can still use Cypress for End-to-End (E2E) testing and Component Testing of non-async components. Here's an example of a Cypress component test:
import Page from '../../app/page'
describe('<Page />', () => {
it('should render and display expected content', () => {
// Mount the React component for the Home page
cy.mount(<Page />)
// The new page should contain an h1 with "Home"
cy.get('h1').contains('Home')
// Validate that a link with the expected URL is present
// Following the link is better suited to an E2E test
cy.get('a[href="/about"]').should('be.visible')
})
})
This test mounts a React component, checks if the page contains an h1 with the text "Home", and validates that a link with the URL "/about" is visible.