Как протестировать простую функцию в приложении «Реагировать»?

Question

Я новичок в тестировании. Я пытаюсь использовать Jest для тестирования 2 функций в моей папке App.js. Я пытаюсь добавить тест в папку App.test.js. Когда я запускаю тест npm, он находит «рендеринг без сбоев» по ​​умолчанию и мой тест. Тест по умолчанию, конечно, проходит, но мой тест не пройден, и шутка говорит ReferenceError: parentFinder is not defined. У меня импортирована папка App.js, поэтому я не уверен, почему она не определена. Разве он не должен найти функцию, которая должна быть протестирована в файле App.js?

App.js:

import React, { Component } from 'react';
import './App.css';
import Input from './components/PageWrapper/Input';
import Output from './components/PageWrapper/Output';
import PageHeader from './components/PageWrapper/PageHeader';
import ResetInputButton from './components/PageWrapper/ValidateButton';
import ValidateButton from './components/PageWrapper/ValidateButton';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      inputData: "",
      outputData:""
    }
  }

  change = e => {
   this.setState({inputData: e.target.value})
   // console.log("e.target.value")
  }

  parentFinder = (data,obj) => {
    let z = 0;
    while (data[z] != null){
      var found = data[z].find((element) => {
        if (element.id === obj.parent_id){
          return element
        }
      });
      if(found != null){
        found.children.push(obj)
      }
      z += 1;
    }
  }

  validationHandler = e => {
    if(this.state.inputData !== "") {
      var data = JSON.parse(this.state.inputData)
      var i = 0;
    while (data[i] != null){
    for (var j = 0; j < data[i].length; j++){
      if (data[i][j].parent_id != null){
      this.parentFinder(data,data[i][j])
      }
     }
    i += 1;
   }
   this.setState({outputData:JSON.stringify(data[0],null,5)})
  } else {
    alert("Please enter some data!")
  }
 }

 resetHandler = (e) => {
   this.setState({inputData:""})
   this.setState({outputData:""})
 } 

  render() { 
    return (  
      <div className="wrapper">
        <PageHeader />
        <Input name="inputData" value={this.state.inputData} onChange={this.change} placeholder={'Paste JSON Here'}/>
        <div className="buttonWrapper">
          <ValidateButton title={'Validate'} onClick={this.validationHandler}/> 
          <ResetInputButton title={'Reset Input'} onClick={this.resetHandler}/>
        </div> 
          <Output type="text" value={this.state.outputData}> </Output>
      </div>
    );
  }
}

export default App;

Вот мой App.test.js:

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

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});



test('parentFinder returns null', () => {
  expect(parentFinder(0,obj)).toBeNull();
});

Answer 1

Вы также можете использовать фермент (https://airbnb.io/enzyme), чтобы получить экземпляр компонента. Код будет выглядеть так:

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';

test('parentFinder returns null', () => {
  const wrapper = shallow(<App />);
  expect(wrapper.instance().parentFinder(0,obj)).toBeNull();
});

Answer 2

parentFinder и obj не объявлены нигде в вашем тестовом файле, и они не определены глобально, поэтому вы получите ошибку «не определено».

Исходя из вашего примера, я предполагаю, что вы имеете в виду следующее:

parentFinder = (data,obj) => { // <---- this?
    let z = 0;
    ...

В этом случае obj относится к элементу, передаваемому в ваш метод App.parentFinder (то есть новый div создается).Поскольку parentFinder является методом для вашего App компонента, вам нужно получить экземпляр вашего App.Я рекомендую использовать Test Renderer .

Вы можете сделать это, выполнив что-то вроде:

import React from 'react';
import App from './App';
import TestRenderer from 'react-test-renderer';

test('parentFinder returns null', () => {
  // have the TestRenderer create your App
  const app = TestRenderer.create(<App />);

  // to get the mounted app component instance
  const appInstance = app.getInstance();

  // not sure what you mean by 0,obj in your example
  // but you would pass in your "data"/"obj" values here
  const result = appInstance.parentFinder();
});

Надеюсь, что это поможет, и дайте мне знать, если у вас есть какие-либо вопросы.