В прошлом году мои коллеги познакомили меня с Salesforce, и так я начал свое приключение с Salesforce. Вскоре меня перевели на разработку LWC. Где я придумал новый термин JEST.
В то время тестирование JEST было для меня чем-то новым и довольно сложным. После приятного путешествия Сегодня я пишу статью о JEST.
ЗАЧЕМ тестирование!
Тестирование — это процесс разработки нашего программного обеспечения и один из наиболее важных способов экономии средств для нашего бизнеса. Тестирование имеет тенденцию находить и сообщать об ошибках разработчикам. Чем раньше вы обнаружите ошибку, тем лучше. Тестирование очень важно, когда речь идет о расходах или какой-либо опасности. Некоторые баги или ошибки могут привести к денежным и человеческим потерям.
В большинстве случаев ошибки или баги создаются непреднамеренно. Но на самом деле мы допустили несколько ошибок, неправильно истолковав требования, и тогда приложение
ведет себя не так, как ожидалось. Тестирование помогает нам найти такие ошибки. Раньше мы отлаживали эти ошибки, было бы «дешевле». Как только ошибка
достигает стадии разработки, даже в худшем случае, если она включает производство, к исправлению этих ошибок подключается больше людей и процессов.
ЧТО ТАКОЕ JEST?
JEST — это модульный тест для всех веб-компонентов Lightning. Он работает быстрее, так как не подключается к браузеру или организации. JEST — это мощный инструмент для тестирования кода javascript.
Он может имитировать компоненты, данные или функции контроллера вершины, чтобы помочь изолировать тестируемые от сложных зависимостей. Для тестирования нашего кода компонента LWC нам нужно иметь
модуль Node @salesforce/sfdx-lwc-jest, который будет установлен в нашем проекте Salesforce DX.
Чтобы установить модуль JEST, запустите эту команду в своей VS Код sfdx force:lightning:lwc:test:setup. Это закончится некоторыми уязвимостями, но это нормально, мы готовы
идти.
Думаю, вы уже поняли, почему мы используем JEST.
КАК писать JEST?
Здесь я разделил написание JEST на несколько прямых пунктов, и не выполняю JEST на каком-то конкретном проекте, чтобы было легко найти нужный JEST для в нужное время.
ГДЕ начать писать JEST?
1. В компоненте LWC создайте папку _tests_.
2. В папке _tests_ создайте файл с именем yourComponentName.test.js.
3. Открываем файл yourComponentName.test.js, и пишем import, далее будем придумывать разные импорты. У нас будет другой раздел для импорта.
Сейчас вам нужно импортировать это,
import { createElement } из ‘lwc’;
import yourComponentName из ‘c/yourComponentName’;
Нам нужно написать JEST для свойств API и проводов, обработчиков событий и событий отправки, вызовов вершин и некоторых компонентов пользовательского интерфейса. Это основная область,
охватывающая тестирование JEST в нашем компоненте LWC. Я расскажу о каждом из них один за другим. Давайте начнем…
Но сначала мне нужно рассказать вам о компонентах JEST, вы можете пропустить это, если хотите, чтобы следующие несколько строк были посвящены afterEach(), beforeEach(), description() и it().
it(),
Самая внутренняя функция в JEST, она охватывает метод тестирования.
describe(),
он покрывает это(). описать() может наследовать несколько описаний(). Его также можно назвать наборами тестов.
beforeEach(),
строки кода, необходимые для выполнения перед каждым любым it(). Например, любой метод в connectCallBack() компонента или любой вызов апексной проводки.
afterEach(),
строки кода, необходимые для выполнения после каждого it(). Обычно мы используем afterEach() для очистки DOM после каждого it().
Небольшое примечание — -
Нам нужно создать элемент для компонента, для которого мы собираемся написать JEST, поэтому я использую этот прием для создания общего метода const, а затем вызываю этот метод
для всего этого() .
const createComponent = (config) =› {
const component = createElement('c-yourComponentName', {
is: teamList
});
Object.assign(компонент, конфигурация);
document.body.appendChild(компонент);
return {
component,
shadowRoot: component.shadowRoot
};
}
Надеюсь, у вас есть представление о том, как класс JEST может выглядеть в реальности. Нет, в самый раз, давайте наконец-то увидим JEST в действии.
@api
1. Если API находится в компоненте, для которого вы хотите написать JEST,
предположим, что в вашем компоненте у вас есть свойство API с именем @api accountID. . Мы напишем тест для проверки правильности установки свойства API.
it('следует установить правильный projectId', () =› {
const mockAccountID = 'a2i1F000000nODjQAA';
const { component } = createComponent({
accountID: mockAccountID
}) ;
ожидать(component.accountID).toBe(mockAccountID);
});
2. Если API находится в дочернем компоненте, и вы хотите написать JEST для родительского компонента,
в вашем проекте есть 2 компонента. Один из них является родительским, parentComponent.js, а другой — дочерним, childComponent.js. Существует свойство API в имени
childComponent.js как @api RecordID и свойство API в имени parentComponent.js как @api accountID. Здесь мы проверяем, правильно ли установлено свойство API в компоненте child
.
it('должен установить правильный projectId в childComponent', () =› {
const mockAccountID = 'a2i1F000000nODjQAA';
const { shadowRoot } = createComponent({
accountID: mockRecordID
});
const childComponent = shadowRoot.querySelector('c-child-component');
ожидать(childComponent.recordID).toBe(mockAccountID);
});
События
1. В которых событие обрабатывается родительским компонентом, который отправляется из дочернего компонента
Допустим, ошибка имени события отправляется из дочернего компонента.js с подробным описанием ошибки. сообщение. Эти события обрабатываются в parentComponent.js, и сообщение
отображается в ‹lightning-input› и устанавливается как значение ‹lightning-input›. Мы собираемся проверить, где мы собираемся ожидать правильных
деталей от события или нет.
it('следует установить правильное сообщение об ошибке', () =› {
const errorMessage = 'Сообщение об ошибке';
const { shadowRoot } = createComponent();
const childComponent = shadowRoot.querySelector ('c-child-component');
childComponent.dispatchEvent(new CustomEvent('error', {
detail: { value : errorMessage }
}));< br />
const inputBody = shadowRoot.querySelector('lightning-input');
expect(input.value).toBe(errorMessage)
});
2. В котором событие отправляется компонентом родительскому компоненту
Возьмем тот же экземпляр события ошибки, но этот тест предназначен для дочернего компонента.js, чтобы проверить, было ли событие отправлено или нет с правильными деталями. .
В childComponent.js есть предопределенное сообщение об ошибке, которое является «Сообщением об ошибке», поэтому всякий раз, когда событие отправляется, оно будет передано с тем же значением. Кроме того, событие error
возникает при нажатии кнопки ‹молния›, мы не будем вдаваться в подробности, почему возникает ошибка. Здесь мы пишем тест, в котором мы будем ожидать, сколько
раз вызывается событие, например здесь 1, и правильно ли переданы детали или нет.
it('следует установить правильное сообщение об ошибке', () =› {
const { component, shadowRoot } = createComponent();
const errorHandler = jest.fn();
> component.addEventListener('error', errorHandler);
const buttonInput = shadowRoot.querySelector('lightning-button');
buttonInput.dispatchEvent(new CustomEvent('click')) ;
expect(errorHandler).toBeCalledTimes(1);
expect(errorHandler.mock.calls[0][0].detail.value).toBe('Сообщение об ошибке');
});
Прежде чем двигаться дальше, давайте взглянем на некоторые технические особенности фиктивных данных, проводных или апексных методов. Сначала создайте папку _mocks_ в папке компонента LWC.
Внутри папки _mocks_ добавьте файл yourComponentName.js, поместите все свойства @api и импортируйте события. Чтобы сохранить mockData, внутри папки _tests_
создайте новую папку data и добавьте возврат JSON из проводного вызова или вызова вершины, чтобы вы могли передать это перед имитацией данных.
Для свойств проводов нам нужны следующие импорты, я беру пример для 'getRecord',
import { registerLdsTestWireAdapter } from '@salesforce/wire-service-jest-util'; 'молния/uiRecordApi';
Мы можем назначить registerLdsTestWireAdapter в общедоступной константе,
const getRecordWireAdapter = registerLdsTestWireAdapter(getRecord);
Мы берем один и тот же пример для обоих условий свойства проволоки. У нас есть parentComponent.js, вызывающий свойство wire для getRecord. Если данные получены,
назначьте данные свойству API, @api recordID, в childComponent.js, а если получите ошибку, отобразите ошибку в пользовательском интерфейсе с помощью ‹lightning-input›
@wire
1. Если провод выдает результат
it('должно правильно пройти по recordID', async() =› {
getRecordWireAdapter.emit('recordID');
Promise.resolve().then(() =› {
const { shadowRoot } = createComponent();
const childComponent = shadowRoot.querySelector('c-child-component');
expect(childComponent.recordID).toBe('recordID');
});
});
2. Если провод вызывает ошибку, результат
it('следует установить правильное сообщение об ошибке', () =› {
const errorMessage = 'Сообщение об ошибке';
getRecordWireAdapter.error({ message : errorMessage });
Promise.resolve().then(() =› {
const { shadowRoot } = createComponent();
const inputBody = shadowRoot.querySelector('lightning-input');
ожидаем(ввод.значение).toBe(errorMessage);
});
});
Для вызовов apex нам нужен импорт и для имитации вызова apex, здесь у нас есть accountController с методом getAccounts() с @AuraEnabled(cacheable=true), он
вернет все аккаунты.
import getAccounts from '@salesforce/apex/accountController.getAccounts';
jest.mock('@salesforce/apex/accountController.getAccounts', () =› {
() =› {
return {
default: jest.fn()
};
},
{ virtual: true }
});
Мы берем один и тот же пример для всех условий апекс-колла. У нас есть вызывающая вершина, чтобы получить все учетные записи. Если вы получаете данные, назначьте данные
‹lightning-input›, а если получите ошибку, отобразите ошибку в пользовательском интерфейсе с помощью ‹lightning-input›.
Apex
1. Вызов Apex может быть обязательным
1.1 Для разрешенного значения означает, что вызов вершины дает положительный результат
it('следует установить правильные данные в пользовательском интерфейсе', () =› {
getAccounts.mockResolvedValue('Account 1');
const { shadowRoot } = createComponent();
Promise.resolve().then(() =› {
const inputBody = shadowRoot.querySelector('lightning-input');
expect(input.value).toBe('Account 1');
});
});
1.2 Для отклоненного значения означает, что вызов вершины выдает ошибку
it('следует установить правильные данные в пользовательском интерфейсе', () =› {
getAccounts.mockRejectedValue('Сообщение об ошибке');
const { shadowRoot } = createComponent();
Promise.resolve().then(() =› {
const inputBody = shadowRoot.querySelector('lightning-input');
expect(input.value).toBe('Сообщение об ошибке');
});
});
2. Вызов Apex как телеграфный вызов
import { registerLdsTestWireAdapter } из @salesforce/wire-service-jest-util;
Мы можем назначить registerLdsTestWireAdapter в общедоступной константе,
const getRecordWireAdapter = registerLdsTestWireAdapter(getAccounts);
Тест будет работать так же, как провод, теперь, например, чтобы получить положительный результат, будут выдаваться данные, а для выдачи ошибки мы должны вызвать метод ошибки, две строки выше будут дополнительными в
коде для достижения JEST для вершины как провод имущество.
Итак, это долгий путь моего понимания JEST. Пожалуйста, найдите несколько ссылок ниже.
1. https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components/set-up-jest-testing-framework
2. https://developer. salesforce.com/docs/component-library/documentation/en/lwc/testing
3. https://lwc.dev/guide/test
