Эта статья написана для [email protected] и [email protected]

Mix - это новый инструмент, который помогает вам создавать внешние ресурсы для вашего приложения Laravel, не касаясь напрямую Webpack API.

Хотя это несколько самоуверенно, на самом деле не требуется много усилий, чтобы настроить Mix или интегрировать его с другими инструментами. Здесь мы рассмотрим, как настроить популярный фреймворк для тестирования Jest.

Почему шутка?

Пока вы не столкнетесь с однофайловыми компонентами Vue, Jest требует минимальных усилий для настройки. Он также имеет хороший импульс в отрасли при поддержке Facebook и является официальным фреймворком для тестирования в Create React App. Jest имеет популярные функции, такие как уведомления ОС, кеширование и т. Д., Которые предоставляются прямо из коробки, а последние версии оказались очень быстрыми.

Первым делом необходимо установить необходимые зависимости:

npm install --save-dev jest babel-jest

Затем давайте добавим Jest в наши сценарии npm. Хотя фреймворк уже устанавливает для переменной NODE_ENV значение test, мы явно передаем его сюда, чтобы его значение не было случайно переопределено вашей средой:

"test": "cross-env NODE_ENV=test jest",
"tdd": "npm run test -- --watch --notify",

На этом этапе вы уже можете запустить Jest, и с установленным преобразователем babel-jest он даже попытается преобразовать ваши файлы JavaScript, но наша установка еще не завершена.

Во-первых, мы хотим убедиться, что Jest не обрабатывает ненужные файлы, добавив следующие строки в ваш package.json:

"jest": {
  "roots": ["<rootDir>/resources/assets/js/"]
}

Это укажет Jest искать файлы только в определенном каталоге.

Во-вторых, babel-jest на самом деле не знает, как действовать, потому что Laravel Mix не раскрывает свои настройки babel. Давайте погрузимся в исходный код и перенесем необходимые настройки в .babelrc: нашего проекта.

Теперь это файл, который babel-jest автоматически выбирает при выполнении преобразований. Однако это не сработает, потому что, хотя Webpack 2.0+ может обрабатывать модули ES6, Node.js не может, и могут быть другие варианты, которые мы можем применить специально для наших тестов. Мы хотим использовать .babelrc параметр env, который объединит конфигурации для конкретной среды:

При описанной выше настройке babel-jest получает указание преобразовать операторы import в CommonJS require.

Если случайно вы уже переопределили свой .babelrc и используете предложение синтаксиса динамического импорта, обязательно замените его на babel-plugin-dynamic-import-node для тестовой среды.

Теперь вы готовы использовать Jest в своем приложении Laravel. Вы можете следить за их документацией для получения более подробной информации. Чтобы выполнить тесты, запустите:

npm test

В оставшейся части этой статьи будут рассмотрены некоторые из наиболее популярных приемов и ошибок при использовании Jest. Не стесняйтесь пропускать эти разделы, пока не столкнетесь с проблемами, связанными с этим.

Как сделать так, чтобы Jest знал о resolve.modules

Допустим, вы столкнулись с проблемой импорта, подобного этому:

import MyComponents from './../../../MyComponent.vue'

и хочется чего-то более элегантного. Вы настраиваете базовый экземпляр Webpack в Laravel Mix для поиска общих модулей в выбранном каталоге в дополнение к обычным node_modules:

.webpackConfig({
  resolve: {
    modules: [path.resolve(__dirname, 'resources/assets/js/modules'), 'node_modules']
  }
})

Затем, предполагая, что ваш компонент находится непосредственно в каталоге modules, вы можете импортировать его в более сжатой форме:

import MyComponents from 'MyComponent.vue'

Чтобы Jest узнал об этих махинациях, просто добавьте параметр moduleDirectories в конфигурацию package.json:

"jest": {
  "roots": ["<rootDir>/resources/assets/js/"],
  "moduleDirectories": ["resources/assets/js/modules", "node_modules"]
}

Как имитировать статические активы?

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

{
  "jest": {
    "roots": ["<rootDir>/resources/assets/js/"],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|svg|ttf|woff|woff2)$": "<rootDir>/resources/assets/js/jest/mocks/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/resources/assets/js/jest/mocks/styleMock.js"
    }
  }
}

И сами файлы макетов:

ресурсы / активы / js / jest / mocks / styleMock.js

module.exports = {}

resources / assets / js / jest / mocks / файл Mock.js

module.exports = 'test-file-stub'

Как протестировать однофайловые компоненты Vue (экспериментально)

Мы черпаем вдохновение из этой замечательной статьи, написанной Кристианом Карлессо.

Сначала создайте собственный преобразователь vue-jest.js в каталоге resources / assets / js / jest / transformers:

Затем отредактируйте конфигурацию jest package.json:

"jest": {
  "roots": ["<rootDir>/resources/assets/js/"],
  "moduleNameMapper": {
    "^vue$": "vue/dist/vue.common.js"
  },
  "transform": {
    "^.+\\.vue$": "<rootDir>/resources/assets/js/jest/transformers/vue-jest.js",
    "^.+\\.js$": "babel-jest"
  },
  "coveragePathIgnorePatterns": ["<rootDir>/resources/assets/js/components"]
}

Здесь мы проинструктируем Jest преобразовать файлы vue и разрешить Vue для полной сборки вместо сборки только во время выполнения (потому что это то, что Laravel Mix делает под капотом).

Обратите внимание, что мы также игнорируем компоненты Vue при покрытии кода. Это в значительной степени скрытое решение известной проблемы с Jest, которая не работает должным образом. Однако, если вы знаете, как это исправить, не стесняйтесь комментировать.

Вот и все. Наслаждайтесь своим рабочим процессом модульного тестирования с Laravel Mix и Jest.