Astro JS - Testing

---

---

What is Testing?

Testing is a step in application development process to ensure that the application is working as expected. Astro have inbuilt support for testing and it can be used for various types of testing, such as unit tests, integration tests, and end-to-end (E2E) tests. The React testing library, JEST is also used with Astro for unit and integration testing. For E2E testing, tools like Cypress or Playwright are commonly used in Astro.js.

Astro Testing Frameworks

Testing frameworks allow you to specify expectations about how your code should behave in a particular situation, and then compare these to the actual behavior of your current code. If the actual behavior does not match the expected behavior, the test fails. Common testing frameworks include:

• Jest: A JavaScript testing framework that works with React and other JavaScript libraries. It is widely used for unit and integration testing.
• Mocha: A flexible JavaScript test framework for Node.js and the browser. It is often used with assertion libraries like Chai.
• Cypress: A end-to-end testing framework that can be used to write tests in JavaScript.
• Playwright: A Node.js library to automate Chromium, Firefox, and WebKit with a single API.

Unit and Integration Testing

Unit testing is a software testing technique where individual units or components of a software application are tested separately. The goal is to validate that each unit of the software performs as expected.

The integration testing focuses on testing the interactions between different units or components to ensure they work together correctly.

Vitest

Vitest is a Vite-native unit testing framework with ESM, TypeScript and JSX support powered by esbuild. Vitest is built on top of Vite, which means it can take advantage of Vite's fast build times and hot module replacement (HMR) capabilities.

To get started with Vitest, you need to install the vitest package in your Astro project. You can do this by running the following command:

>> npm install vitest --save-dev

Configure Vitest

Next step is to configure vitest. Use Astro’s getViteConfig() helper in your vitest.config.ts configuration file to set up Vitest with your Astro project’s settings:

// File - vitest.config.ts

/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Vitest configuration options
  },
});

By default, getViteConfig() will try to load an Astro config file in your project and apply it to the test environment. As of Astro 4.8, if you need to customize the Astro configuration applied in your tests, pass a second argument to getViteConfig():

// File - vitest.config.ts

export default getViteConfig(
  { test: { /* Vitest configuration options */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

In the above example, we are passing the site and trailingSlash options to the getViteConfig() function. This will apply these options to the test environment.

Write a Test

Next, we will write a simple testing file in vitest. In the code below, we use AstroContainer to create a container for our Card component. We then render the Card component to a string and check if it contains the expected content.

// File - src/components/HelloWorld.test.tsx

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
    const container = await AstroContainer.create();
    const result = await container.renderToString(Card, {
        slots: {
        default: 'Card content',
        },
    });

    expect(result).toContain('This is a card');
    expect(result).toContain('Card content');
});

Now you can run the tests using the following command:

>> npx vitest run

End-to-End Testing

End-to-end (E2E) testing is a software testing technique that tests the entire application flow from start to finish. Cypress and Playwright are two popular tools for E2E testing in Astro.js. They allow you to write tests that simulate user interactions with your application, such as clicking buttons, filling out forms, and navigating between pages.

Cypress Setup

Cypress is a JavaScript-based end-to-end testing framework that makes it easy to write and run tests for your web applications. To get started with Cypress, you need to install the cypress package in your Astro project. You can do this by running the following command:

>> npm install cypress --save-dev

After installing Cypress, you need to configure it in your Astro project. create a cypress.config.js file with the following content:

// File - cypress.config.js

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    supportFile: false
  }
})

Now choose a page to test. This example will test index page of Astro project. Create an index.cy.js file in the cypress/e2e folder. Use the following test in the file to verify that the page title and header are correct.

// File - cypress/e2e/index.cy.js

it('titles are correct', () => {
    const page = cy.visit('http://localhost:4321');
  
    page.get('title').should('have.text', 'Astro is awesome!')
    page.get('h1').should('have.text', 'Hello world from Astro');
});

The above test will visit the index page of your Astro project and check if the title and header are correct. You can run the test using the following command:

>> npx cypress run