В последнее время я наконец интегрировал тестирование подразделения в свой проект запуска. Я поселился с Шума Я говорю больше об этом в отдельном въезде журнала. При написании своего теста я бежал в немного дилемме попыток написать тесты подразделения для не экспортируемых функций 😖
Тестирование экспортировано функция
Это супер просто для тестирования экспортированных функций.
// utils.js
export function sayHi() {
return '👋';
}
И тест на единицу может быть что-то подобное:
// utils.test.js
import { sayHi } from './utils.js';
describe('sayHi', () => {
it('returns wave emoji', () => {
expect(sayHi()).toBe('👋');
});
});
Не экспортная функция
Теперь, если функция не экспортируется?
function saySecret() {
return '🤫';
}
Ах Yikes, нет способа проверить это! 🤷 ♀️.
// utils.test.js
// ❌
import { saySecret } from './utils.js';
saySecret; // undefined
Представляя перевесывания
А потом я обнаруживаю этот нефтный пакет под названием Перевесить Действительно Вот их официальное описание:
Rewire Добавляет специальный сеттер и добиться до модулей, чтобы вы могли изменять их поведение для лучшего тестирования подразделения. Ты мая
- вводить издевательства для других модулей или глобалей, таких как процесс
- Осмотрите частные переменные
- Переопределить переменные в модуле.
Вторая точка – именно то, что мне нужно!
Установка Rewire для приложения Vue
Вместо использования перевесить Я использовал пакет под названием Babel-Plugin-Rewire Отказ Который по существу ES6 версия перевесить Так что я могу использовать Импорт Отказ Вот их описание:
Он вдохновлен Rewire.js и передает свои концепции ES6, используя Babel.
Шаг 1: Установить пакет
# Yarn yarn add -D babel-plugin-rewire # Npm npm install babel-plugin-rewire --save-dev
Шаг 2: Добавить в Cabel Config
babel.config.js.
module.exports = {
plugins: ['babel-plugin-rewire'],
};
Шаг 3: Используя его
Хорошо, теперь, когда это установлено, давайте пересмотрим нашу не экспортируемую функцию.
function saySecret() {
return '🤫';
}
И теперь, мы можем использовать перевесить Чтобы получить нашу не экспортную функцию:
// utils.test.js
import utilsRewire from './utils.js';
describe('saySecret', () => {
it('returns shh emoji', () => {
const saySecret = utilsRewire.__get__('saySecret'); // 👈 the secret sauce
expect(saySecret()).toBe('🤫');
});
});
Не экспортируемая функция должна называться экспортированной функцией
Одна важная вещь, которую мне нужно указать! Чтобы проверить не экспортируемую функцию, она должна использоваться в экспортированной функции.
❌ Так что это не будет работать самостоятельно.
function saySecret() {
return '🤫';
}
✅ Вам нужно Также Вызовите это в экспортированной функции одного и того же файла.
function sayHi(password) {
if (password) {
saySecret(); // 👈 Calling the non-export function
}
}
Теперь, вы можете проверить это 👍
// utils.test.js
import utilsRewire from './utils.js';
describe('saySecret', () => {
it('returns shh emoji', () => {
const saySecret = utilsRewire.__get__('saySecret');
expect(saySecret()).toBe('🤫');
});
});
Предупреждение! Vuex с перемощностью
К моему смятению, после того, как я наконец получил перевесить Настройте и успешно добавленные тестирование для моих не экспорта функций. Когда я обслуживаю свое приложение Vue, я получил эту ошибку:
❌ Необработанные ошибки: [Vuex] Действия должны быть функцией или объектом с функцией «обработчика», но «Действия. Odefault» в модуле «Редактор» – {}.
🤦♀️. Как и многие разработчики, когда кто-то попадает в прогулку, вы закрыли проект и сдаетесь! НЕТ! Это не тот разработчик – вы идете в LinkedIn и начнем искать новую карьеру 😖 снова Нет 😂 Посмотрим, что должен сказать Google!
Часто я скажу младшим разработчикам просто Google. Но даже Googling – это навык, который требует времени, чтобы отточить. И зная, что для поиска важно. Поэтому я собираюсь поделиться терминами, которые я использовал:
- (скопируйте и вставьте ошибку)
- Перезапись не работает с Vuex
К счастью, на второй поиск, я нашел решение! Оказывается Gitlab имела ту же проблему и даже опубликовала решение Отказ Позвольте мне скопировать и вставить свои выводы:
[Rewire] Добавляет экспорт по умолчанию в любой модуль, который еще не имеет одного. Это вызывает проблемы с нашим нынешним рисунком использования Импорт * как GetTers от './getters.js' Для ресурсов Vuex, потому что по умолчанию будет в конечном итоге неожиданный тип данных (объект, не функция). В результате нам пришлось добавить Экспорт функции по умолчанию () {} К каждому из наших предпочтителей, чтобы гарантировать, что это не вызывает жалобу Vuex.
Отлично, не только они объясняли проблему, они предоставили решение 👏
1. Мой проблемный код
В моем приложении Vue у меня был один и тот же шаблон, что и GitLab. Неудивительно, что я работаю там, поэтому я просто ссылаюсь на один и тот же шаблон с работы 😅. Это была моя оригинальная настройка:
// actions.js
export const someAction = () => {};
// store/index.js
import * as actions from './actions';
export default {
actions,
};
2. Решение
Используя решение, найденное из GitLab, все, что мне нужно было сделать, это добавить экспорт по умолчанию, как так:
// actions.js
export default function() {} // 👈 Add this!
export const someAction = () => {};
Альтернативные решения
Конечно, я мог бы избежать этого экспорта по умолчанию, следуя другой модели. На официальном уровне Vuex Руководство, у них есть Пример корзины Вы можете ссылаться. У них есть что-то подобное:
// modules/cart.js
const actions = {
someAction() {},
};
export default { // 👈 no problem cause there's the default!
actions,
};
// store/index.js
import cart from './modules/cart';
export default new Vuex.Store({
modules: {
cart,
},
});
Знание приводит к результату!
Может быть, по дороге, я изменим это, Но это то, что у меня сейчас, так что я просто оставлю это 😅 В программировании я узнал очень рано, что всегда есть несколько решений. Часто нет лучших способов, есть только способ, которым работает для вас 👍
Мне нравится моя текущая настройка. И, честно говоря, я более опыт с таким способом (поднимается, я работаю в Gitlab). Так для меня это мой лучший способ. И когда вы работаете над стартапом, ключевое владение является ключевым. Вы не хотите тратить свое время вращать свои колеса, чтобы что-то узнать. Это все о результате. Выберите инструмент, вы более знакомы и начните производить 💪
Начинающие дружественные ресурсы
Если вы пришли из моего Тидбит Сообщество, вы будете знакомы с моими более удобными для начинающих постов. Однако с моим журналом сериал некоторые темы будут немного более продвинутыми. Поскольку они темы, которые я встречаюсь, пока я создаю свой проект Startup. Я так учусь от этого, поэтому я просто хочу сохранить обмен знаниями. И чтобы быстро выпустить эти сообщения, я часто не смогу выложить фундамент – поэтому я заранее извиняюсь к большему количеству новичков 😓 Но не волнуйтесь! Мы все когда-то начали как начинающие, пока мы вкладываем на работу, мы все можем выровнять! 🧗♀️.
Вот что я сделаю, я свяжу ресурсы, которые могут помочь вам немного пойти на мою запись немного больше. Еще раз спасибо за чтение моего журнала и не могу дождаться, чтобы поделиться больше!
Устройство тестирования в JavaScript Часть 1 – Почему тестирование подразделения?
Jest Crash Course – тестирование подразделения в JavaScript
Ресурсы
- GitHub: Jest Test On Function, которые не экспортируются
- Устройство тестирования частных, не экспортируемых функций с перемощностью
- Переполнение стека: использование Babel-Plugin-Rewire для тестирования частных невязанных функций
- Gitlab: Удалить Babel-Plugin-Rewire
Спасибо за чтение ❤ Чтобы найти больше кода Tidbits, пожалуйста, посетите Samanthaming.com.
| 🎨 Instagram. | 🌟 Twitter. | 👩🏻💻 samanthaming.com. |
Оригинал: “https://dev.to/samanthaming/testing-non-exported-functions-in-javascript-29le”