All geek questions in one place

How to perform mocha tests in a browser?

Is it just me, or their documentation does not explain how to run tests in the browser at all?

Should I create this HTML file that they show in the example? How do I get it to run my specific set of test cases for my project?

I need the same result as starting mochafrom the root of the project. All subdirectories inside the folder testmust be included

+25
source share
3 answers

If we need to run our tests in a browser, we need to set up a simple HTML page to be our test runner page. The page downloads Mocha, test libraries, and our actual test files. To run the tests, just open the runner in the browser.

Sample html code:

<!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>

Directory structure setup

You should put your tests in a separate directory from your main code files. This simplifies their structuring, for example, if you want to add other types of tests in the future (for example, integration tests or functional tests).

The most popular practice with JavaScript code is to have a directory called test / in the root directory of the projects. Then each test file is located under the /someModuleTest.js test.

Important things:

  • We are loading Mochas CSS styles to give our test results good formatting.
  • div ID-. .
  • . node_modules, npm.
  • mocha.setup, Mochas.
  • , , . - .
  • , mocha.run . ,
+24

, , . :

Mocha CSS Index.html. div "Mocha" , . , .

<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>

(my_mocha_test.js ) :

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

, Mocha , :

mocha.run();

, , div "mocha". , GitHub.

https://captainstack.imtqy.com/public-stackhouse/

+7

:

ES6, , ,

mocha 6.1.4 chai 4.2.0.

SRC/MyClass.js:

export default class MyClass { }

/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());
        });
    });
});

/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>

mocha.js mocha.css mocha init test mocha, node_modules/mocha.

If this is not possible, let me know. The answer to this post .

0
source

Source: https://habr.com/ru/post/1680724/

More articles:


All Articles