Jest ожидается 0 получил 1 при тестировании для массива

Question

Я пытаюсь проверить, является ли их нет списка , когда при выполнении этого теста не вводится никаких данных

App.test.tsx

describe('Should test empty array on onSubmit method',() => {
  it('should test empty array  onSubmit method', ()=>{
    const component = shallow(<App/>)
    const form = component.find('Form').at(0);
    const preventDefault = jest.fn();
    // const items = ['Learn react', 'rest', 'go out'];
    // component.setState({
    //  currentTask:"test-task",
    //  tasks:[...items, 'test-task']
    // })

    // form.simulate('submit', { preventDefault });
    // expect(preventDefault).toBeCalled();
    // form.props().onSubmit();
    form.simulate('submit', {preventDefault})
    expect(component.state().tasks.length).toBe(0);

  })
})

Однако я получаю эту ошибку

● Следует ли проверять пустой массив с помощью метода onSubmit метод onSubmit

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: 1

Я заметил, что у меня есть ошибка linting, которая читает это

Property 'tasks' does not exist on type 'Readonly<{}>'.

на этой строке

expect(component.state().tasks.length).toBe(0);

Что я должен изменить, чтобы пройти?

Я ссылался на что-то похожее на этот вопрос

Ожидаемый массив, но полученный массив в Jest

но решение не сработало для меня.

App.tsx

import React from 'react';
import logo from './logo.svg';
import Form from './Form';
import './App.css';
// we need an interface to be able to use the state properties, if not error.
// the same rule applies when using props
// so here we call Istate
interface IState {
  currentTask: string;
  tasks: Array<string>;
}

export default class App extends React.Component<{}, IState>{
  constructor(props: {}){
    super(props);
    this.state = {
      currentTask: "",
      tasks:[]
    }
  }

  // when using e.preventDefault in typescript, or any paramater, it has to be followed
 //  by the following any, array, string, etc. in this case we use any

  handleSubmit(e: any){
    e.preventDefault();
    this.setState({
      currentTask: "",
      tasks: [...this.state.tasks, this.state.currentTask]
    }, () => {
      console.log(this.state.tasks)
    })


  }

  onChange = (e: any) => {
    e.preventDefault();
    this.setState({
      currentTask: e.target.value
    })

  }

  render(){
    return (
      <div className="App">
        <h1 className="sampleh1">React Typescript Todo</h1>

        <Form 
          onSubmit={(e)=> this.handleSubmit(e)}
          currentTask={this.state.currentTask}
          onChange={this.onChange}  
        />
      </div>
    );

  }
}

примечание

если я изменю код с

expect(component.state().tasks.length).toBe(0);

до

expect(component.state().tasks).toHaveLength(0);

я понимаю, я в замешательстве, потому что в массиве нет значений, так почему он получает 1, а не 0 ???

 Received array:  [""]

Answer 1

Ошибка действительна, потому что в коде handleSubmit вы помещаете пустую строку как элемент в массив tasks и, следовательно, длина отображается как 1.

this.setState({
      currentTask: "",
      tasks: [...this.state.tasks, this.state.currentTask]
    }

поэтому после выполнения кода выше, state.tasks = [""] // длина которого теперь будет равна 1. Итак, если ваша цель состоит в том, чтобы нажать currentTask, если он присутствует, используйте здесь условный оператор.

this.setState(prevState => ({
      currentTask: "",
      tasks: prevState.currentTask ? [...prevState.tasks, prevState.currentTask] : prevState.tasks
    })