Тесты Mocha не запускаются с помощью Webpack и mocha-loader

Фон

Я переношу некоторые сценарии npm на загрузчики Webpack, чтобы лучше узнать, как работает Webpack, и Ive получил все, кроме моих тестов Mocha: у меня есть один неудачный тест, но он не показывает, что Mocha запускается с mocha-loader или что тест не работает:

введите описание изображения здесь

Вопрос

Что мне нужно сделать по-другому, чтобы получить все файлы src/**/*.test.js для работы с Mocha в Webpack?

Шаги по воспроизведению

  • Clone https://github.com/trevordmiller/webpack-loaders-playground
  • Запустите npm test, чтобы узнать, как должны работать тесты.
  • Запустите npm run dev, чтобы увидеть, как тесты не запускаются с помощью Webpack

Ответы

Ответ 1

Загрузчик Mocha не будет запускать тесты при построении, он используется для создания пакета, содержащего ваши тесты, которые затем можно запустить из вашего браузера.

Я бы рекомендовал создать отдельный файл конфигурации webpack для ваших тестов, который затем можно разместить на веб-сервере-dev-сервере, который использует другой порт из вашего приложения. Вот пример того, что более или менее шаблон, который я использую для своих собственных проектов (на момент написания этого ответа):

webpack.tests.config.js

module.exports = {
    entry: 'mocha!./tests/index.js',
    output: {
        filename: 'test.build.js',
        path: 'tests/',
        publicPath: 'http://' + hostname + ':' + port + '/tests'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader']
            },
            {
                test: /(\.css|\.less)$/,
                loader: 'null-loader',
                exclude: [
                    /build/
                ]
            },
            {
                test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
                loader: 'null-loader'
            }
        ]
    },
    devServer: {
        host: hostname,
        port: port
    }
};

тесты /index.js

// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

package.json

"scripts": {
    "test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
    "devtest": "webpack-dev-server --config webpack.tests.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mocha</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
        <script src="/tests/test.build.js"></script>
    </head>
    <body>
    </body>
</html>

Затем запустите npm run devtest, откройте http://localhost:<port you picked>/webpack-dev-server/test.html, а mocha должен выполнить ваши тесты.

Если вам не нужны CSS/LESS или изображения через ваши модули, вы можете удалить эти загрузчики с webpack.tests.config.js.

Если включена горячая загрузка, это действительно отличная настройка, потому что у меня есть как приложение, так и мои тесты, запущенные на разных вкладках браузера, затем обновляйте мой код и просматривайте мои изменения, а мои тесты снова запускаются.

Вы также можете запустить npm run test для выполнения тех же тестов с помощью командной строки.

Надеюсь, что это поможет.

Ответ 2

Мне понравился ответ JimSkerritt, но я не мог заставить его работать на моем компьютере по какой-то причине. С двумя конфигурационными файлами ниже вы можете запустить приложение через:

npm start              // then http://localhost:8080/bundle

и выполните ваши тесты с помощью:

npm test              // then http://localhost:8081/webpack-dev-server/test

оба сервера автоматически перезагружают && & && & вы можете запускать оба одновременно!

Файлы конфигурации

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

package.json

{
  "name": "2dpointfinder",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline",
    "test": "webpack-dev-server 'mocha!./tests/test.js' --output-filename test.js --port 8081"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.19.0",
    "style-loader": "^0.12.4"
  },
  "devDependencies": {
    "mocha": "^2.3.3",
    "mocha-loader": "^0.7.1",
    "should": "^7.1.0"
  }
}