Как выполнить модульное тестирование в приложении React с помощью JEST

Привет, я новичок в тестировании JEST, поэтому я хочу попросить вас о некоторой поддержке.
Я пытаюсь протестировать функцию из компонента App.js в своем App.test.js но получаю ошибку:

TypeError: _App.default.avg не является функцией.

Вот мой компонент App.js

class App extends React.Component {

 state = { }

 avg = (elements) => {   
 let sum=0;    
 for(let i=0; i<elements.length; i++){
     sum += elements[i].main.temp;
 }
 return (sum/elements.length).toFixed(2);
 }

  render() {
    return(
      <BrowserRouter>
          <AppContext.Provider value = {contextElements}>
              <div className = "App container">             
                <Route path = "/" component = {SettingsBar}/>               
                <Route path = "/settings" component = {SettingsView}/>               
                <Route exact path = "/" component = {RootView}/>
                <Route  path = "/itemview" component = {ItemView}/>
              </div>
          </AppContext.Provider>     
      </BrowserRouter>

    )  
  }
}
export default App;


И Приложение.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

describe('avg', () => {

     it('should return 3 for given array [1,2,3,4,5]', () => {
         expect(App.avg([1,2,3,4,5])).toBe(3);
     });

});

Что я делаю неправильно?

Я бы посоветовал удалить функцию из приложения и поместить ее в другой модуль, файл или класс, который можно протестировать в изолированной среде. В противном случае используйте неглубокий монтаж от чего-то вроде Enzyme, чтобы получить экземпляр вашего приложения.

Emile Bergeron 28.05.2019 20:58

Я действительно должен поддержать этот комментарий — React самоопределяется как A JavaScript library for building user interfaces — поэтому вам действительно не следует использовать компонент React для размещения служебных функций, таких как эта, если только он напрямую не влияет на то, что делает этот компонент. В этом случае вы должны тестировать то, что компонент отображает при определенных условиях, и не обращать внимания на эту функцию. Вы должны быть свободны в рефакторинге компонента, как хотите, и пока он отображает ту же DOM, что и раньше, вам не нужно менять свой тест. Это заставит вас постоянно обновлять тесты.

Jimmay 28.05.2019 21:48

Спасибо за ваш совет, я попытаюсь перестроить свой код.

obaram 28.05.2019 22:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
677
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать создать экземпляр класса App.js.

Итак, после импорта вы можете попробовать что-то вроде

const myApp = новое приложение();

Затем, в ожидании, вызовите myApp.avg(arguments).

Это работает нормально. Большое спасибо! Вы спасли мой вечер :)

obaram 28.05.2019 20:59

Другие вопросы по теме