Как выполнить тесты мокки в браузере?

Это только я, или их документация не объясняет, как вообще запускать тесты в браузере?

Должен ли я создать этот HTML файл, который они показывают в примере? Как мне заставить его запускать мой конкретный набор тестовых примеров для моего проекта?

Мне нужен тот же результат, что и запуск mocha из корня проекта. Все подкаталоги внутри папки test должны быть включены

Ответ 1

Если нам нужно запустить наши тесты в браузере, нам нужно настроить простую HTML-страницу, чтобы быть нашей страницей тестового бегуна. Страница загружает Mocha, библиотеки тестирования и наши фактические тестовые файлы. Чтобы запустить тесты, просто откройте бегун в браузере.

Пример 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>

Настройка структуры каталогов

Вы должны поместить свои тесты в отдельный каталог из ваших основных файлов кода. Это упрощает их структурирование, например, если вы хотите добавить другие типы тестов в будущем (например, интеграционные тесты или функциональные тесты).

Самая популярная практика с JavaScript-кодом - иметь каталог с именем test/в корневой директории проектов. Затем каждый тестовый файл находится под тестом /someModuleTest.js.

Важные вещи:

Мы загружаем стили CSS Mochas, чтобы дать нашим результатам тестирования хорошее форматирование.
Мы создаем div с ID-моккой. Здесь результаты испытаний вставлен.
Мы загружаем Мокку и Чай. Они расположены в подпапках node_modules, так как мы установили их через npm.
Вызывая mocha.setup, мы делаем доступными помощники по тестированию Mochas.
Затем мы загружаем код, который хотим протестировать, и тестовые файлы. Мы не есть что-то здесь еще.
Наконец, мы вызываем mocha.run для запуска тестов. Убедитесь, что вы вызываете это после загрузки исходных и тестовых файлов

Ответ 2

Я думал, что документация тоже не совсем понятна, но в конце концов я понял это и настроил. Вот как:

Включите скрипт 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.github.io/public-stackhouse/

Ответ 3

Мой способ сделать это с:

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.

Если это невозможно, дайте мне знать. Ответ на этот пост.