web-dev-qa-db-fra.com

Comment exécutez-vous des tests mocha dans le navigateur?

Est-ce juste moi ou leur documentation n'explique-t-il pas du tout comment exécuter les tests dans le navigateur?

Dois-je créer ce fichier HTML qu'ils montrent dans l'exemple? Comment puis-je lui faire exécuter mon ensemble spécifique de cas de test pour mon projet?

Je veux la même sortie que l'exécution de mocha à partir de la racine du projet. Tous les sous-répertoires du dossier test doivent être inclus

javascriptreactjsmocha
27
Marco Prins

Si nous devons exécuter nos tests dans un navigateur, nous devons configurer une page HTML simple pour être notre page d'exécution de test. La page charge Mocha, les bibliothèques de test et nos fichiers de test réels. Pour exécuter les tests, nous allons simplement ouvrir le coureur dans un navigateur.

exemple de code html:

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha Tests</title>
    <link rel="stylesheet" href="node_modules/mocha/mocha.css">
  </head>
  <body>
    <div id="mocha"></div>
    <script src="node_modules/mocha/mocha.js"></script>
    <script src="node_modules/chai/chai.js"></script>
    <script>mocha.setup('bdd')</script>

    <!-- load code you want to test here -->

    <!-- load your test files here -->

    <script>
      mocha.run();
    </script>
  </body>
</html>

Configuration d'une structure de répertoire

Vous devez placer vos tests dans un répertoire distinct de vos fichiers de code principaux. Cela facilite leur structuration, par exemple si vous souhaitez ajouter d'autres types de tests à l'avenir (tels que des tests d'intégration ou des tests fonctionnels).

La pratique la plus courante avec le code JavaScript consiste à avoir un répertoire appelé test/dans le répertoire racine de votre projet. Ensuite, chaque fichier de test est placé sous test/someModuleTest.js.

Choses importantes :

  • Nous chargeons les styles CSS de Mocha pour donner à nos résultats de test un formatage agréable.
  • Nous créons un div avec l'ID mocha. C'est là que les résultats des tests sont insérés.
  • Nous chargeons Mocha et Chai. Ils se trouvent dans les sous-dossiers du dossier node_modules depuis que nous les avons installés via npm.
  • En appelant mocha.setup, nous mettons à disposition les assistants de test de Mocha.
  • Ensuite, nous chargeons le code que nous voulons tester et les fichiers de test. Nous n'avons encore rien ici.
  • Enfin, nous appelons mocha.run pour exécuter les tests. Assurez-vous d'appeler cela après avoir chargé les fichiers source et de test
26
Samir

Je pensais que la documentation n'était pas tout à fait claire aussi, mais je l'ai finalement trouvée et je l'ai installée. Voici comment:

Incluez le script Mocha et CSS dans Index.html. Incluez également un div avec l'ID "Mocha" pour la sortie à insérer. Incluez le script de test que vous souhaitez exécuter.

<link href="lib/mocha/mocha.css" rel="stylesheet" />
<script src="lib/mocha/mocha.js"></script>
<script src="test/my_mocha_test.js"></script>
<div id="mocha"></div>

Dans votre fichier de test (my_mocha_test.js dans cet exemple), incluez cette ligne de configuration en haut:

// 'bdd' stands for "behavior driven development"
mocha.setup('bdd');

Maintenant que le test et le contenu Mocha sont tous chargés, vous pouvez exécuter les tests avec cette commande:

mocha.run();

Vous pouvez ajouter cela à un écouteur d'événements et le déclencher sur un bouton Push ou un autre événement, ou vous pouvez simplement l'exécuter à partir de la console, mais il devrait mettre la sortie de test dans la div avec l'ID "mocha". Voici une page avec tout cela mis en place avec du code visible sur GitHub pour vous

https://captainstack.github.io/public-stackhouse/

8
Captain Stack

Ma façon de le faire avec:

ES6, importation, exportation, chai

Utilisé mocha 6.1.4 et chai 4.2.0.

src/MyClass.js:

export default class MyClass { }

test/MyClass.js:

import MyClass from "../src/MyClass.js";

let assert = chai.assert;

describe('MyClass tests', function () {
    describe('The class', function () {
        it('can be instantiated', function () {
            assert.isObject(new MyClass());
        });
    });
});

test/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Mocha</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css">
    <script src="mocha.js"></script>
    <script src="../node_modules/chai/chai.js"></script>

    <script type="module" class="mocha-init">
        mocha.setup('bdd');
    </script>

    <!-- ------------------------------------ -->
    <script type="module" src="test.js"></script>  
    <!-- ------------------------------------ -->

    <script type="module">
        mocha.run();
    </script>
</head>
<body>
    <div id="mocha"></div>
</body>
</html>

Les fichiers mocha.js et mocha.css ont été créés via mocha init test, mais peut également être trouvé dans node_modules/mocha.

Si cela peut être amélioré, faites-le moi savoir. La réponse est inspirée par ce post .

0
robsch