Я хотел узнать немного больше о конвейерах непрерывной интеграции, поэтому воспользовался возможностью вместе с Николь Вудкок, работая над MB Javascript Hacks: Social Justice Hack Week.
Что такое непрерывная интеграция?
Непрерывная интеграция безопасно позволяет нескольким пользователям вносить свой вклад в один репозиторий на Github. По сути, непрерывная интеграция дает нам страховочную сетку, которая не позволяет нам внедрять плохой или сломанный код в нашу производственную сборку и, следовательно, в наше развертывание.
Мы можем писать тесты, используя средство запуска тестов, такое как Jest, чтобы проверить, что функциональная логика, которую мы пишем, делает то, что мы ожидаем (или не выполняем в некоторых случаях). Непрерывная интеграция делает шаг вперед, автоматизируя весь процесс выполнения. наши тесты и развертывание приложения, если все тесты пройдены.
Сначала, когда мы пишем функции или добавляем зависимости, мы можем использовать ветки для создания новой функции для приложения, пока мы не будем довольны ею. Когда наша функция будет удовлетворена, мы объединим наши изменения в основную ветку. Отправка наших изменений в основную ветку репозитория (или ветку, которую вы настроили для наблюдения нашим наблюдателем непрерывной интеграции) на GitHub запустит этот автоматический конвейер.
Настройка вашего проекта Next.JS для CI
Предполагая, что вы настроили свой проект Next.JS, используя:
npx create-next-app <your-app>
У вас должна быть начальная оболочка для проекта Next.JS. Вы можете следовать руководству по началу работы здесь
Следующее, что вам нужно сделать, это добавить тестовые зависимости в свой package.json:
npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
or
yarn add -D jest @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
Следующим шагом является создание файла с именем .babelrc в корневом каталоге (см. Изображение структуры папок ниже).
В этот файл вы захотите вставить следующий код:
{
"presets": ["next/babel"]
}
Теперь вы захотите открыть свой package.json файл, добавьте следующий раздел для jest:
"jest": {
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}Вы также можете добавить приведенный ниже код в раздел скриптов вашего package.json:
"scripts": {
...
"test": "jest"
},После этого вы должны создать папку с именем .circleci в корне проекта и добавить файл конфигурации с именем config.yml внутри папки .circleCI.
Затем в этот файл введите следующий код:
если вы используете NPM:
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: Update NPM
command: "sudo npm install -g npm@5"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: npm install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: Run tests
command: npm run test --passWithNoTestsили если вы используете Yarn:
version: 2.1
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:10.16.3
steps:
- checkout
- run:
name: yarn update
command: "sudo npm install -g yarn"
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install Dependencies
command: yarn install
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- ./node_modules
- run:
name: yarn run tests
command: yarn run test --passWithNoTestsВы заметите флаг - passWithNoTests после команды запуска теста в последней строке файла yml. Это необходимо удалить, когда вы добавляете тесты Jest в свой проект. На данный момент это позволит выполнить команду запуска теста, даже если в вашем проекте нет наборов тестов Jest.
Настройка с помощью CircleCI
После того, как вы настроили свой проект в своей среде IDE, вам нужно будет перейти в CircleCI и, если вы еще не создали учетную запись.
Как только вы войдете, вы увидите панель управления. Отсюда вы можете выбрать в верхнем левом углу, какую учетную запись или организацию на Github вы хотите использовать, и в этих учетных записях будет репо или репозиторий, которые вы хотите подключить к CircleCI. Нажмите кнопку «Настроить проект».
Вам также может потребоваться авторизация CircleCI для доступа к вашему репо или организации, это может быть в форме доступа третьих лиц.
Или через ключ развертывания:
Их нужно будет настроить на Github.
Теперь вы должны увидеть экран, как показано ниже. Помните наш файл config.yml, который мы написали ранее? Вот где мы собираемся задействовать это. Нажмите кнопку Use Existing Config:
Затем вас спросят, добавили ли вы файл config.yml? У нас уже есть, так что вы можете нажать Начать строительство.
Если все в порядке, экран перейдет на экран сборки. Вы также можете просмотреть это на панели управления. Ваша сборка начнет работать со всеми параметрами, которые мы установили в файле config.yml:
Сборка на изображении выше не удалась, потому что добавление пряжи строки было неправильным в файле YML:
- run: name: Install Dependencies //yarn install is the correct syntax also .yml files are white space sensitive which can cause build failurescommand: yarn add
Когда мы исправим эту строку, получился следующий результат:
Поздравляю! Если вы видите результат, аналогичный этому экрану, с зелеными галочками и успешно, ваш автоматизированный конвейер непрерывной интеграции настроен! Если вы этого не видите и сборка не выполняется, внимательно изучите журналы в каждой части сборки, чтобы увидеть, что не удалось, а что нужно исправить. Если у вас есть тесты, запущенные в Jest, возможно, ваши тесты не проходят, но ваша сборка будет компилироваться.
Что происходит теперь, когда я создаю пул-реквест или отправляю что-то в основную ветку?
Когда вы отправляете запрос на вытягивание или отправляете код в основную ветвь с установленным конвейером автоматизации CI, может произойти одно из двух. Ваш код может пройти все тесты и проверки, которые необходимы CircleCI (и вашей платформе развертывания) для создания успешной сборки без сбоев:
Эти изменения нужно объединить в основную ветку с галочкой
Или, если есть проблема с каким-то аспектом вашего кода, у вас также может быть неудачный запрос на перенос, который можно либо отредактировать в GitHub, чтобы исправить рецензент, либо его можно прокомментировать, либо, скорее всего, он будет отклонен.
В некоторых случаях, в зависимости от настроек вашего проекта или организации на github, вы можете увидеть, что запрос на перенос или слияние отображаются с крестиком:
Это не обязательно плохо, поскольку конвейер CI пытается помешать вам развернуть код вживую!
Благодарим за https://circleci.com/blog/building-postman-test-reports/, который содержит еще более подробную информацию о модульном тестировании в Next.JS с Jest!
об авторе
Эндрю - динамичный полнофункциональный разработчик и увлеченный ученик, которому комфортно разговаривать как с клиентами, так и с другими разработчиками. Стремится использовать передовые технологии при создании приложений и веб-сайтов с длительным сроком службы.
Он закончил учебный курс по веб-разработке Lighthouse Lab и является частью сообщества mintbean.io.
Он изучил и реализовал различные навыки, в том числе
- HTML5
- JavaScript
- JQuery
- CSS3
- MySQL / PostgreSQL
- Бутстрап
- MaterialUI
- Реагировать
- Redux
До участия в буткемпе в августе 2020 года его сферами деятельности были: администрирование, чтение лекций, производство фильмов и пост-продакшн, а также обслуживание клиентов в различных секторах.
Он хотел бы подключиться к возможностям и найти способ привнести свои знания и энтузиазм в ваши проекты!
