Ложная функция с отсутствием энтузиазма

Question

Попытка получить простой тест с помощью фиктивной функции, работающей с базовым приложением React, но она терпит неудачу, и я не могу точно определить, где я ошибся. Кто-нибудь может меня поправить?

Main App.js

    import React, { Component } from 'react';
    import './App.css';
    import List from './List';

    class App extends Component {

      state = {
        count: 0,
        newItem: '',
        items: ['apple', 'milk'] 
      }

      addItem = () => {
        if (this.state.newItem) {
       this.setState({ count: this.state.count + 1, items: [...this.state.items, this.state.newItem], newItem: '' })
       } 
      }

      render() {

      return(
      <div className="App">

         <header className="App-header">
          <h1>30 days of React</h1>
          <h2>Day Thirty / Testing React Components</h2>
          <p>Total Items: {this.state.count}</p>
         </header>

         <div className="container">
          <input type='text' value={this.state.newItem} onChange={e => this.setState({ newItem: e.target.value})}></input>
          <button className='main-btn' onClick = {this.addItem}>Add To List</button>
         </div>

        <div>
          <List items={this.state.items}/>
        </div>

        </div>

        ) 
       }
     }

    export default App;

Тест

//define empty mock function to simulate the click 
const mockClick = jest.fn();

describe('App component mock test', () => {
    it('button click should fire function', () => {
        const component = shallow(<App onClick={mockClick} />);

        const input = component.find('input');
        input.simulate('change', {target: {value: 'test'} });

        const button = component.find('button.main-btn');
        button.simulate('click');
        expect(mockClick).toHaveBeenCalled();
    });
}); 

Есть такжеодин функциональный компонент, который отображает список, но так как это неглубокий тест, он не должен вступать в игру.

Answer 1

ОК, разобрался. D'о. По сути, я просто был озадачен тем, как работают макеты и как они используются. Я понял теперь. Создан дочерний компонент с onCick в качестве опоры, чтобы просто проверить, что функция запускается. Теперь она работает.

test

const mockClick = jest.fn();

describe('ListItem component mock tests', () => {
    it('button click should fire function', () => {
        const component = shallow(<ListItem onClick={mockClick} />);

        const button = component.find('button.smallbtn');
        button.simulate('click');
        expect(mockClick).toHaveBeenCalled();
    });
});

дочерний компонентя тестирую

import React from 'react';
const ListItem = ( props ) => {

return (

  <div>
    <p>{props.item}</p>
    <button className="smallbtn" onClick={() => props.onClick(props.id)}>delete</button>  
  </div>

  );
};

export default ListItem;