Come testare le applicazioni Next.js utilizzando Jest

L'obiettivo principale di qualsiasi processo di sviluppo è creare applicazioni pronte per la produzione. Per raggiungere questo obiettivo è fondamentale scrivere un codice che non solo soddisfi i requisiti funzionali ma che resti stabile e affidabile nel tempo. I test fungono da salvaguardia, garantendo che le applicazioni funzionino come previsto anche quando vengono effettuati nuovi aggiornamenti durante lo sviluppo.

Sebbene la scrittura di test completi che comprendano vari casi limite possa richiedere molto tempo, è utile contrassegnare e risolvere i problemi prima che raggiungano gli ambienti di produzione.

Test delle applicazioni Next.js

Scrivere test è un aspetto essenziale e spesso sottovalutato dello sviluppo di applicazioni robuste. È facile cadere nella tentazione di spedire il codice direttamente alla produzione, basandosi sulla convinzione che "tu hai creato il codice, quindi deve funzionare!"

Tuttavia, questo approccio può portare a problemi e bug imprevisti negli ambienti di produzione. Di conseguenza, l'adozione di un approccio di sviluppo guidato dai test (TDD) può aiutare a massimizzare la fiducia nel codice e ridurre al minimo il tempo impiegato debug e risoluzione di bug minori che potrebbe essere passato alla produzione.

Cos'è lo scherzo?

Scherzo è un popolare framework di test ampiamente utilizzato da diversi Framework JavaScript. Fornisce una suite di funzionalità di test come un potente test runner, mocking automatico e test snapshot.

Idealmente, queste funzionalità sono utili per ottenere una copertura completa dei test e garantire l'affidabilità della tua applicazione diversi tipi di test.

Crea un'applicazione To-Do Next.js

Ora, approfondiamo il processo di esecuzione di unit test su un'applicazione Next.js utilizzando Jest. Tuttavia, prima di iniziare, crea un progetto Next.js e installa le dipendenze richieste.

Per iniziare, segui questi passaggi:

1. Crea un nuovo progetto Next.js eseguendo il seguente comando nel tuo terminale:

   npx create-next-app@ultimo test-tutorial

2. Dopo aver creato il progetto, naviga nella directory del progetto eseguendo:

   cd nextjs-test-tutorial

3. Installa le dipendenze necessarie come devDependencies eseguendo il seguente comando:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Con il progetto configurato e le dipendenze installate, ora sei pronto per creare l'applicazione Next.js e scrivere unit test utilizzando Jest.

Crea il componente To-Do

Nel /src directory del progetto, apri il file pagine/index.js file, eliminare il codice Next.js boilerplate esistente e aggiungere il codice seguente.

Innanzitutto, effettua le seguenti importazioni e definisci due funzioni che gestiranno le cose da fare dell'utente: addTodo funzione e deleteTodo funzione.

importare { usaStato } da"reagire";
importare stili da"../styles/Home.module.css";
esportarepredefinitofunzioneCasa() {
cost [todos, setTodos] = useState([]);
cost [newTodo, setNewTodo] = useState("");
cost addTodo = () => {
Se (newTodo.trim() !== "") {
cost updatedTodos = [...todos, newTodo];
 setTodos (aggiornatoTodos);
 setNewTodo("");
 }
 };
cost deleteTodo = (indice) => {
cost aggiornatoTodos = [...todos];
 aggiornatoTodos.splice (indice, 1);
 setTodos (aggiornatoTodos);
 };

Il codice utilizza il useState hook per inizializzare e aggiornare le variabili di stato: tutti E newTodo. IL addTodo La funzione aggiunge una nuova cosa da fare all'elenco delle cose da fare quando il valore di input non è vuoto, mentre la funzione deleteTodo La funzione rimuove una specifica attività dall'elenco in base al relativo indice.

Ora, scrivi il codice per gli elementi JSX resi sul DOM del browser.

ritorno (


 tipo="testo"
 className={stili.input}
 valore={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"aggiungi-da fare">
 Aggiungi cose da fare
 </button>
"lista di cose da fare">
 {todos.map((da fare, indice) => (


 {fare}
 </li>
 ))}
 </ul>
 {todos.map((da fare, indice) => (


 onClick={() => deleteTodo (indice)}
 className={styles.button}
 dati-testid={`cancella-da fare-${indice}`}
 >
 Eliminare
 </button>
 </div>
 ))}
 </div>
 );}

Scrivere casi di test

Prima di iniziare a scrivere casi di test, è fondamentale configurare Jest in base ai requisiti di test specifici. Ciò comporta la creazione e la personalizzazione del file jest.config.js file, che funge da base per la configurazione del test.

Nella directory principale, crea un nuovo file jest.config.js file. Quindi, aggiungi il seguente codice per configurare Jest di conseguenza:

cost nextJest = richiedere("successivo / scherzo");
cost createJestConfig = nextJest({
 dir: "./",
});
cost customJestConfig = {
 moduleDirectory: ["moduli_nodo", "/"],
 ambiente di test: "jest-ambiente-jsdom",
};
modulo.exports = createJestConfig (customJestConfig);

Infine, apri il file pacchetto.json file e aggiungi un nuovo script chiamato test che eseguirà il comando jest --watchAll per eseguire tutti i casi di test e osservare eventuali modifiche.

Dopo aver effettuato l'aggiornamento, i tuoi script dovrebbero apparire così:

"copioni": {
"sviluppatore": "prossimo sviluppo",
"costruire": "prossima costruzione",
"inizio": "prossimo inizio",
"pelucchi": "prossimo filo",
"test": "scherza --guarda tutto"
 },

Con le configurazioni in atto, procedere con la scrittura e l'esecuzione dei test.

Test dell'app To-Do Next.js con Jest

Nella directory principale del progetto, crea una nuova cartella chiamata __test__. Jest cercherà i file di prova in questa cartella. All'interno di questa cartella, crea un nuovo file chiamato index.test.js.

Innanzitutto, effettua le seguenti importazioni.

importare Casa da"../src/pagine/indice";
importare"@biblioteca-di-test/jest-dom";
importare { fireEvent, render, screen, waitFor, act } da"@libreria-di-test/reagire";

Scrivi un test per vedere se tutti gli elementi vengono visualizzati correttamente:

descrivere("App Todo", () => {
 Esso("rende l'app todo", () => {
 rendere(<Casa />);

 aspettati (screen.getByTestId("todo-input")).toBeInTheDocument();
 aspettati (screen.getByTestId("aggiungi-da fare")).toBeInTheDocument();
 });
});

Lo scenario di test verifica che l'app To-Do e i relativi elementi vengano visualizzati correttamente. All'interno del banco di prova, il Casa componente è reso utilizzando il rendere funzione dalla libreria di test.

Quindi, le asserzioni vengono fatte usando il aspettarsi funzione per garantire che elementi specifici con ID test, ad esempio todo-input sono presenti nell'output sottoposto a rendering. Se questi elementi vengono trovati nel DOM, il test viene superato; altrimenti fallisce.

Ora, esegui il seguente comando per eseguire il test.

test di esecuzione npm

Dovresti vedere una risposta simile se il test viene superato.

Testare diverse azioni e simulare errori

Descrivi questi casi di test per verificare la funzionalità delle funzionalità Aggiungi attività ed Elimina attività.

Inizia scrivendo il test case per la funzionalità Aggiungi attività.

 Esso("aggiunge una cosa da fare", asincrono () => {
 rendere(<Casa />);

cost todoInput = screen.getByTestId("todo-input");
cost addTodoButton = screen.getByTestId("aggiungi-da fare");
cost todoList = screen.getByTestId("lista di cose da fare");
aspetta atto(asincrono () => {
 fireEvent.change (todoInput, { bersaglio: { valore: "Nuovo Todo" } });
 addTodoButton.click();
 });
aspetta aspettare(() => {
 aspettati (todoList).toHaveTextContent("Nuovo Todo");
 });
 });

Lo snippet di codice sopra simula l'interazione dell'utente digitando in un campo di input e facendo clic sul pulsante Aggiungi. Quindi, utilizzando un finto valore di input To-Do, verifica se il valore di input è stato aggiunto correttamente all'elenco To-Do.

Salva il file e controlla il terminale. Il test dovrebbe essere eseguito automaticamente di nuovo e disconnettersi da risultati di test simili.

Per simulare un errore di test, modificare l'ID del test del pulsante Aggiungi ed eseguire nuovamente il test. Con questo aggiornamento, il test dovrebbe fallire e disconnettersi con un messaggio di errore che indica l'errore specifico riscontrato.

Idealmente, in una base di codice più ampia con più contributori che apportano modifiche frequenti, il test gioca un ruolo cruciale nell'identificare potenziali bug che potrebbero portare a guasti del sistema. Con il test, puoi facilmente contrassegnare le incoerenze, come quella dimostrata sopra, e risolverle durante lo sviluppo.

Infine, scrivi il test case per la funzionalità Elimina attività.

 Esso("elimina una cosa da fare", asincrono () => {
 rendere(<Casa />);

cost todoInput = screen.getByTestId("todo-input");
cost addTodoButton = screen.getByTestId("aggiungi-da fare");

 fireEvent.change (todoInput, { bersaglio: { valore: "Tutto 1" } });
 fireEvent.click (addTodoButton);

cost deleteTodoButton = screen.getByTestId("cancella-tutto-0");
 fireEvent.click (deleteTodoButton);

cost todoList = screen.getByTestId("lista di cose da fare");
aspetta aspettare(() => {
 aspettarsi (todoList).toBeEmptyDOMElement();
 });
 });

Ancora una volta, verifica se l'attività è stata eliminata correttamente. Salvare il file per eseguire il test.

Unità di test utilizzando Jest

Questa guida ti ha fornito le conoscenze per scrivere ed eseguire semplici unit test, utilizzando un componente To-Do come esempio. Per garantire la stabilità e l'affidabilità delle funzionalità principali dell'applicazione e ridurre le possibilità di problemi imprevisti negli ambienti di produzione, è importante dare la priorità ai test di scrittura per la chiave componenti.

Inoltre, puoi migliorare il tuo approccio ai test incorporando test istantanei e test end-to-end.