Docs: Adding a Testing section

[tanepiper]

One thing our team have been struggling with is testing Astro components well, and it currently feels like a big gap in the documentation.

• It would be good to get some docs on setting up test runners to test Astro components and no guidance on how to unit test the code block and templates.

• For render testing, possibly some docs for setting up something like Cypress?

• What are the best practices for testing and for mocking?

[ekafyi]

I like Next's Testing page, as a reference/example.

• Cypress
  • Short intro (what is Cypress, how to install & run)
  • Example routes and how to run integration tests for those routes
    • Run build and serve locally so Cypress can access it
  • Additional info (CI example)
• Playwright
  • Short intro (what is Playwright, how to install & run)
  • Example routes and how to run e2e tests for those routes
  • Additional info (CI example)
• Unit testing libraries (Jest & React Testing Library)
  • Quick start & setup
    • Custom matchers, mock assets, path alias

Additionally, it might be necessary to address unit testing for .astro components along with custom frontend frameworks components. Show a simple example of testing Astro components, React/etc components. Are separate configurations needed? Do style/image imports in different frontend frameworks need to be mocked differently?

There is an existing unit testing example here with astro-component-tester: https://github.com/astro-community/component-template/blob/main/test/example.test.js

I think (imo/cmiiw) people who are highly experienced in testing might be able to figure things out on their own, so this page is targeted more towards devs with beginner to intermediate testing skills.