title: Jest expected 0 received 1 when testing for an array
body: <p>I'm trying to test to see if their is <strong>no list</strong> when no input is entered when executing this test</p>
  
  <p><strong>App.test.tsx</strong></p>
  
  <pre><code>describe('Should test empty array on onSubmit method',() =&gt; {
    it('should test empty array  onSubmit method', ()=&gt;{
      const component = shallow(&lt;App/&gt;)
      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);
  
    })
  })
  </code></pre>
  
  <p>However im gettting this error</p>
  
  <blockquote>
    <p>● Should test empty array on onSubmit method › should test empty array
    onSubmit method</p>
  
  <pre><code>expect(received).toBe(expected) // Object.is equality
  
  Expected: 0
  Received: 1
  </code></pre>
  </blockquote>
  
  <p>I noticed that i have linting error that reads this</p>
  
  <pre><code>Property 'tasks' does not exist on type 'Readonly&lt;{}&gt;'.
  </code></pre>
  
  <p>on this line</p>
  
  <p><code>expect(component.state().tasks.length).toBe(0);</code></p>
  
  <p>What should i change to make this pass ?</p>
  
  <p>I referenced something similar to this question</p>
  
  <p><a href="https://stackoverflow.com/questions/46255991/expected-array-but-received-array-in-jest">Expected Array but received array in Jest</a></p>
  
  <p>but the solution didn't work for me. </p>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>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&lt;string&gt;;
  }
  
  export default class App extends React.Component&lt;{}, IState&gt;{
    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]
      }, () =&gt; {
        console.log(this.state.tasks)
      })
  
  
    }
  
    onChange = (e: any) =&gt; {
      e.preventDefault();
      this.setState({
        currentTask: e.target.value
      })
  
    }
  
    render(){
      return (
        &lt;div className="App"&gt;
          &lt;h1 className="sampleh1"&gt;React Typescript Todo&lt;/h1&gt;
  
          &lt;Form 
            onSubmit={(e)=&gt; this.handleSubmit(e)}
            currentTask={this.state.currentTask}
            onChange={this.onChange}  
          /&gt;
        &lt;/div&gt;
      );
  
    }
  }
  </code></pre>
  
  <p><em>side note</em></p>
  
  <p>if i change code from</p>
  
  <pre><code>expect(component.state().tasks.length).toBe(0);
  </code></pre>
  
  <p>to</p>
  
  <pre><code>expect(component.state().tasks).toHaveLength(0);
  </code></pre>
  
  <p>i get this, im confused because their is no values in the array, so why is it receiving 1 and not 0 ???</p>
  
  <pre><code> Received array:  [""]
  </code></pre>