Serve SPA vor dem Ausführen von Tests auf Zypresse js

Question

Mit Cypress kann ich meine Dev Subdomain leicht testen. Ich habe eine angular/react Anwendung, wo ich, wenn ich eine dist (einschließlich index.html) mache, möchte ich Cypress Tests gegen die gebauten Dateien ausführen.

Leider habe ich keine Ahnung, wie man einen dist Ordner, (wie serve Paket von npm) vor dem Start Cypress Tests serviert.

Ich weiß, dass ich die index.html auf einem anderen Terminal Registerkarte dienen kann, aber das wird nicht auf CircleCi (meine CI) passieren.

Gibt es trotzdem, dass Cypress den lokalen Host ersetzen und statische Dateien bereitstellen kann, bevor die eigentlichen Tests gestartet werden?

Answer 1

Ich habe browser-sync verwendet, um einen Server zu starten, der meine statischen Dateien verteilt.

Sie müssen 3 Pakete installieren: cypress (offensichtlich), browser-sync, um einen Server zu starten, und npm-run-all, um einen Server und eine Zypresse nacheinander zu starten. Hier

npm install --save-dev cypress 
npm install --save-dev browser-sync 
npm install --save-dev npm-run-all 

ist ein Beispiel für die NPM-Skripten Konfiguration, die Sie benötigen in Ihrem package.json hinzuzufügen. Vergessen Sie nicht, die <port> (Bsp .: 4000) und <folder>, die den Pfad zu Ihrem SPA enthält (z. B. öffentlich) anzupassen.

{ 
    "scripts": { 
    "cypress": "cypress run", 
    "server": "browser-sync start --port <port> --server <folder> --no-open", 
    "test": "run-p -r server cypress" 
    } 
} 

Jetzt müssen Sie Ihren ersten Hello world Test schreiben:

describe('My App', function() { 
    it('is up', function() { 
     cy.visit('http://localhost:4000'); 

     cy.contains('Hello world!'); 
    }); 
}); 

Das ist es! Wir können unseren Test starten:

npm test