Этот пост поможет вам изучить некоторые важные команды Linux для настройки базового проекта JavaScript и соответствующий тестовый файл Jest. Это означает, что вы можете быстро использовать его в качестве шаблона для ката, технических тестов и так далее.
Мы все находимся на пути обучения, поэтому, если у вас есть какие-либо конструктивные отзывы об этом посте, я буду только рад!
И если этот пост поможет, вы можете: подписать меня на Medium (Люси Айронмонгер), до 50 хлопков 👏, и поймайте меня в твиттере :)
Некоторые важные команды
Некоторые полезные команды Linux для использования в командной строке (терминале), прежде чем мы перейдем к ним — вы можете связать их вместе, что я покажу вам по мере прохождения.
Как добраться до нужного места
В этом примере я буду использовать VS Code, но вы можете использовать любую IDE по вашему выбору, команды Linux будут такими же.
Мы будем использовать команды Linux для перемещения по папкам на вашем компьютере, начиная с домашнего каталога. Мы доберемся до того места, где хотим создать проект (в моем случае это папка Katas).
Моя структура папок выглядит так — у вас будет иначе!
- Откройте VS Code и в верхнем меню выберите:
Файл > Новое окно - В новом окне откройте новый терминал:
Терминал -> Новый терминал (снова из верхнего меню.) - Теперь в терминале введите ls(укажите, что находится в папке, в которой вы сейчас находитесь.)
Это даст вам представление о том, где вы находитесь в файловой структуре. Вы должны начать в своем домашнем каталоге.
Самое время представить ~ . Если вы хотите погуглить, это называется «тильда», которая является символом «домашнего каталога» компьютера. Вы можете увидеть его в своем терминале в этот момент.
Вы когда-нибудь хотели вернуться домой? Если вы когда-нибудь просто наберете cd и нажмете Enter, вы вернетесь прямо в домашний каталог (~).
Предполагая, что вы находитесь в домашнем каталоге, мы хотим перейти к папке, в которой находятся проекты кодирования.
- Для этого нужно набрать ls (и нажать Enter), чтобы увидеть, в какие папки можно перейти, а затем cdимя_папки (нажмите Enter), чтобы перейти в эту папку. Промойте и повторите — ls, посмотрите, cdимя папки
Таб твой друг! Не думайте, что вам нужно вводить слово целиком, вы можете ввести cd Docu, а затем нажать Tab, он должен автоматически заполнить его, например. компакт-диск Документы.
- Если вы случайно зашли не в ту папку, вы можете ввести cd .., чтобы вернуться на уровень папки.
- В тот момент, когда я нахожусь в моей основной папке BoilerPlate (и вы находитесь в аналогично подходящей папке), пришло время создать новую папку для этого проекта.
Настройка проекта
Мы собираемся сделать базовый проект ката FizzBuzz, чтобы начать.
Инициализировать модули проекта и узла
- mkdir fizzbuzz (создается новая папка с именем fizzbuzz)
- Введите: cd fizzbuzz (это входит в только что созданную папку)
- Оказавшись в нем, введите: npm init -y . Это создаст пакеты узлов и настроит файл package.json, а также автоматически ответит «да» на вопросы настройки. Если вы хотите ответить на вопросы, не добавляйте флаг -y.
- Затем введите: npm i jest -D (это установит среду тестирования Jest и добавит ее в качестве зависимости от среды разработки). Загрузка может занять около минуты, так что наберитесь терпения.
- Когда это будет сделано, введите: code package.json, чтобы открыть файл package.json.
Настройте package.json для запуска Jest.
В файле package.json вы хотите найти этот бит:
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1"
},
- Вместо этого измените это на jest — это означает, что когда вы запускаете свои тесты (npm run test), он запускает jest. Это должно выглядеть так после ваших изменений:
“scripts”: {
“test”: "jest"
},
Вы заметите в package.json, что «main» в строке 5 связан с index.js, это делается по умолчанию при выполнении шага npm init -y ранее.
Index.js устанавливается в качестве основного входа в программу. Поскольку мы собираемся создать fizzbuzz.js в качестве основного файла проекта, мы можем изменить index.js на fizzbuzz.js.
Добавление папок и файлов
Убедитесь, что вы все еще находитесь в корневой папке проекта fizzbuzz (помните ls).
Вы должны иметь возможность просматривать: папки package.json, package-lock.json и node_modules на этом уровне.
Если вы случайно поднялись на 1 уровень, вы можете ввести cd fizzbuzz, чтобы вернуться в папку. Если вы случайно зашли в папку, такую как node_modules, вы можете подняться на уровень, набрав cd ..
- Введите: mkdir src (создайте папку с именем src (сокращение от source)).
- Затем введите cd src, чтобы перейти в папку src.
- Оказавшись там, введите touch fizzbuzz.js. При этом создается файл с именем fizzbuzz.js.
- Затем введите cd .., что выведет вас из папки src и создаст резервную копию уровня.
Теперь мы проделаем аналогичный процесс, но на этот раз создадим тестовый раздел папки проекта.
- Введите mkdirtests, чтобы создать другую папку.
- Затем cd тесты, которые переведут вас в эту папку.
- Наконец, введите touch fizzbuzz.test.js. Общепринятой практикой является добавление «.test.js» в конце имени файла, который вы тестируете, в качестве соглашения об именах.
Отлично, вы сделали все свои файлы!
А теперь классная команда, чтобы связать воедино то, что мы узнали:
- Находясь в папке с тестами, введите: cd ../src
Как вы думаете, что это делает?! Если вы догадались, что он поднимает вас на уровень из папки с тестами, то в папку src, вы были правы!
Теперь мы хотим запустить наш файл кода fizzbuzz.js, введя code fizzbuzz.js. Здесь мы начнем получать удовольствие от связывания вашего тестового файла с вашим основным файлом js.
Настройка: связывание вашего Jest и вашего файла кода вместе
Следующее, что нам нужно учитывать, это то, что наш тестовый файл в настоящее время не подключен к нашему файлу кода. Он не может видеть код в файле кода. Итак, что нам нужно сделать, это процесс, состоящий из двух частей:
В открытом файле кода нам нужно экспортировать код в наш тестовый файл.
- В нашем файле кода fizzbuzz.js давайте настроим базовую функцию стрелки ES6. Попробуйте напечатать это для себя:
2. Теперь мы хотим экспортировать эту функцию fizzBuzz, которую мы написали. Мы делаем это, добавляя в конец кода:
module.exports = fizzBuzz
Вы должны оставить его примерно таким (для ясности я также добавил простой console.log() в нашу функцию fizzBuzz).
В тестовом файле нам нужно импортировать этот код, чтобы протестировать его. Мы делаем это с помощью функции require.
Итак — давайте перейдем к тестовому файлу с помощью терминала — предполагая, что у нас открыт терминал в нашем файле fizzbuzz.js, в котором мы находимся, мы должны ввести:
- cd ../tests, чтобы перейти в папку с тестами.
- А затем код fizzbuzz.test.js, который запустит файл fizzbuzz.test.js, который находится в папке с тестами.
После запуска тестового файла мы хотим использовать функцию require, чтобы потребовать написанную нами функцию и сохранить ее в переменной, хранящейся в нашем тестовом файле. Мы бы использовали что-то вроде этого:
const thisCanBeAnyName = require("../src/fizzbuzz")
В переменной thisCanBeAnyName будут храниться результаты экспорта из файла fizzbuzz.
Вещи, которые люди всегда склонны ошибаться в этом:
- Не использовать « » внутри функции require().
- Недостаточно добавления .. по исходному пути. Мы знаем, сколько нужно добавить (2!), поскольку несколько раз просматривали дерево папок вверх и вниз!
- Обратите внимание, что путь указан к имени файла fizzbuzz — здесь нам не нужен .js.
- Также обратите внимание, что нам требуется имя файла, а не название функции, которую мы экспортируем, например, fizzBuzz.
- Хотя в этом примере мы назвали переменную thisCanBeAnyName, рекомендуется называть ее так же, как исходное имя файла. Так, например, мы могли бы сделать:
const fizzbuzz = require("../src/fizzbuzz")
Но на самом деле, для этой демонстрации я назову его «шипучий», просто чтобы отличить его и, надеюсь, сделать другие части этого поста более понятными позже.
Разрушение
Давайте сделаем небольшую паузу, чтобы подумать — что, если мы экспортируем более одной функции из файла кода? Не бойтесь — мы все еще можем подключиться к ним всем.
Допустим, мы настроили другую функцию в нашем проекте кода, называемую hiThere.
Мы можем изменить наш module.exports в нижней строке, чтобы теперь он охватывал обе функции, используя скобки { } — не забудьте также запятую!
Это означает, что обе функции будут экспортированы и могут быть импортированы тестовым файлом.
module.exports = { fizzBuzz, hiThere }
В нашем тестовом файле мы сохраняем его точно так же, как и раньше — помните — мы импортируем файл, который включает в себя отдельные функции, которые мы установили для экспорта.
Это означает, что мы можем подключиться к этим функциям, используя запись через точку в тестовом файле, и вызвать их.
Таким образом, мы в основном говорим:
- Посмотрите на переменную fizzy (которая является файлом кода fizzbuzz): fizzy
- Нажмите на это и в функцию fizzBuzz: .hiThere
- Вызовите функцию fizzBuzz: ()
И то же самое для функции fizzBuzz. Мы можем видеть, что когда мы затем запустим npm test в Терминале для запуска наших наборов тестов, он выдаст ошибку (поскольку мы еще не написали никаких правильных тестов!), но он выведет на консоль :
Потрясающий! Мы на связи!
Подводя итог, мы настроили базовый проект JavaScript со связанным тестовым файлом Jest. Вы также знаете, как экспортировать одну или несколько функций в тестовый файл и как импортировать их в тестовый файл.
Если вам понравилось, посмотрите мой следующий пост о классическом ката FizzBuzz на JavaScript, в котором я подробно расскажу о написании тестов в Jest.
Еще раз, если вы нашли это полезным, пожалуйста, нажмите Подписаться, и вы можете дать до 50 хлопков 👏 и, надеюсь, алгоритм будет работать благоприятно, чтобы помочь большему количеству новичков найти этот пост!
Хорошего дня и удачного кодирования.
@lucyironmonger в твиттере
