Правильный способ модульного тестирования / макета совместно используемой функции экспорта с использованием реквизита из компонентов - React - PullRequest
Новая
       11

Правильный способ модульного тестирования / макета совместно используемой функции экспорта с использованием реквизита из компонентов - React

0 голосов
/ 27 марта 2020

В моем проекте React у меня есть общая экспортируемая функция: 

//shared_functions.js
export function buildEndpoint(region, methodName) {
   return (region in this.props.regionalEndpointsMap ? this.props.regionalEndpointsMap[region] : this.props.regionalEndpointsMap["default"]) + "/" + methodName;
}

, которая используется и импортируется в несколько компонентов, таких как: 

//SomeComponent.jsx
import { buildEndpoint } from 'src/util/shared_functions';
....
handleSubmit = async event => {
   let response = await fetch(buildEndpoint(this.state.region, 'methodName'), {
....

Проблема в том, что у меня проблема в модульном тестировании этой функции из-за this.props.regionalEndpointsMap в функции buildEndpoint.

Мой вопрос заключается в том, как правильно применить модульное тестирование этой функции, следуя рекомендациям? Модульное тестирование независимо от любого компонента, который его использует? Проверить это из компонента, который его использует? Не удалось найти способ смоделировать this.props.regionalEndpoints при попытке независимого тестирования функции и при попытке протестировать ее из компонента, функция не распознается: 

//test.jsx
....
//props contains regionalEndpointsMap
wrapper = shallow(<SomeComponent {...props} />);
wrapper.instance().buildEndpoint('region', 'method')
//buildEndpoint is unrecognized

И как другой вопрос, который может сделать вышеупомянутый вопрос спорным, можно попробовать получить доступ к свойству (реквизиту) в экспортируемой функции, даже если это свойство не гарантировано в компоненте, в котором он используется? Или это осуждается? Было бы лучше создать базовый класс компонентов с помощью этой функции и сделать его родительским для классов компонентов, которые его используют?

Извините, если это звучит как глупые вопросы, новшество в React и модульное тестирование с использованием jest и энзима .

1 Ответ

0 голосов
/ 29 марта 2020

Чтобы протестировать функцию независимо, вы могли бы смоделировать ее, что-то вроде этого: 

import { buildEndpoint } from 'src/util/shared_functions';

...

let result = ({
                props : {regionalEndpointsMap : {default : 'd'} }, 
                buildEndpoint : buildEndpoint 
              }).buildEndpoint("r", "m")

Лично, хотя я бы передавал функцию RegionalEndpointsMap во избежание необходимости доступа к контексту this.

...