title: React Testing: Cannot read property 'toLowerCase' of undefined
body: <p>I am testing a react component using Mocha, Chai and Enzyme. The component is</p>
  
  <p>TodoList.js</p>
  
  <pre><code>export class TodoList extends Component {
      render() {
          var {todos, searchText, showCompleted, isFetching} = this.props;
          var renderTodos = () =&gt; {
                      if(isFetching){
                           return (
                              &lt;div className='container__message'&gt;
                                  &lt;PulseLoader color="#bbb" size="6px" margin="1.5px" /&gt;
                              &lt;/div&gt;
                           );
                      }
                      if(todos.length === 0){
                          return &lt;p className='container__message'&gt;Nothing to show&lt;/p&gt;
                      }
                  return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) =&gt; {
                      return (
                          &lt;Todo key={todo.id} {...todo} /&gt;
                      )
                  });
          }
          return ( 
              &lt;div&gt;
                  {renderTodos()}
              &lt;/div&gt;
          );
      }
  }
  
  export default connect(
    (state) =&gt; {
      return state;
    }
  )(TodoList);
  </code></pre>
  
  <p>This component uses another function which is </p>
  
  <p>TodoAPI.js</p>
  
  <pre><code>import $ from 'jquery';
  
  module.exports = {
      filterTodos: function(todos, showCompleted, searchText){
          var filteredTodos = todos;
  
          filteredTodos = filteredTodos.filter((todo) =&gt; {
              return !todo.completed || showCompleted; // todo is not completed or showCompleted is toggled
          });
  
          console.log(filteredTodos);
  
  
          filteredTodos = filteredTodos.filter((todo) =&gt; {
              console.log(todo.text);
              return todo.text.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
          });
  
          filteredTodos.sort((a, b) =&gt; {
              if(!a.completed &amp;&amp; b.completed){
                  return -1;
              } else if(a.completed &amp;&amp; !b.completed){
                  return 1;
              } else {
                  return 0;
              }
          });
          return filteredTodos;
      }
  };
  </code></pre>
  
  <p>The test which I have written tests that TodoList.js renders 2 Todo components as I have provided an array of two objects.
  TodoList.spec.js</p>
  
  <pre><code>import React from 'react';
  import ConnectedTodoList, {TodoList} from '../../src/components/TodoList';
  
  describe('TodoList', function(){
      let todos = [
              {
                  id: 1,
                  text: 'some dummy text',
              }, 
              {
                  id: 2,
                  text: 'some more dummy text',
              }
      ];
      beforeEach(function(){
           this.wrapper = shallow(&lt;TodoList todos={todos} /&gt;);
      });
  
      it('should exist', function(){     
          expect(this.wrapper).to.exist;
      });
  
      it('should display 2 Todos', function(){
          expect(this.wrapper.find('Todo')).to.have.lengthOf(2);
      });
  })
  </code></pre>
  
  <p>But when I execute this test I get an error which says</p>
  
  <pre><code> 1) TodoList "before each" hook for "should exist":
      TypeError: Cannot read property 'toLowerCase' of undefined
       at F:/Study Material/Web/React Projects/ReactTodoApp/src/api/TodoAPI.js:16:43
  </code></pre>