title: Can't get jest snapshot match to pass
body: <p>I've been playing around with this for a couple days now but can't get a simple '.toMatchSnapshot' to pass.  I clearly don't understand how this works.  Should i be changing the setup of my code or my test?</p>
  
  <p>the code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { ListGroup, ListGroupItem } from 'react-bootstrap';
  import TodoItem from './TodoItem';
  import TodoAPI from '../api/TodoAPI';
  
  export class TodoList extends Component {
      renderTodos = () =&gt; {
          const { todos, toggleShowCompleted, searchInput } = this.props;
          if (todos.length === 0) {
              return (
                  &lt;div&gt;
                      &lt;p&gt;Nothing Scheduled To Do&lt;/p&gt;
                      &lt;hr /&gt;
                  &lt;/div&gt;
              );
          }
          return TodoAPI.filterTodos(
              todos,
              toggleShowCompleted,
              searchInput
          ).map(todo =&gt; {
              return (
                  &lt;ListGroupItem key={todo.id}&gt;
                      &lt;TodoItem {...todo} /&gt;
                  &lt;/ListGroupItem&gt;
              );
          });
      };
      render() {
          return (
              &lt;ListGroup&gt;
                  {this.renderTodos()}
              &lt;/ListGroup&gt;
          );
      }
  }
  
  function mapStateToProps({ todos, toggleShowCompleted, searchInput }) {
      return { toggleShowCompleted, searchInput, todos };
  }
  
  export default connect(mapStateToProps)(TodoList);
  </code></pre>
  
  <p>the test:</p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import { TodoList } from './TodoList';
  
  describe('TodoList', () =&gt; {
      const props = {
          todos: { id: 1234, text: 'walk the cat' },
          toggleShowCompleted: false,
          searchInput: ''
      };
      const todoList = shallow(&lt;TodoList {...props} /&gt;);
  
      it('renders properly', () =&gt; {
          expect(todoList).toMatchSnapshot();
      });
  });
  </code></pre>
  
  <p>the error:</p>
  
  <p>FAIL  src\components\TodoList.test.js
    ● TodoList › encountered a declaration exception</p>
  
  <p>FAIL  src\components\TodoList.test.js
    ● TodoList › encountered a declaration exception</p>
  
  <pre><code>TypeError: filteredTodos.filter is not a function
  
    at Object.filterTodos (src/api/TodoAPI.js:27:33)
  </code></pre>
  
  <p>so it's erroring over my TodoAPI but i'm not sure how to fix this issue.  here is the code for over in the 'TodoAPI.js'</p>
  
  <pre><code>const APIFunctions = {
      setTodos(todos) {
          if (Array.isArray(todos)) {
              localStorage.setItem('todos', JSON.stringify(todos));
              // return original array if if fails
              return todos;
          }
      },
  
      getTodos() {
          const stringTodos = localStorage.getItem('todos');
          let todos = [];
  
          try {
              todos = JSON.parse(stringTodos);
          } catch (e) {
              // stick with default array
          }
  
          // insure we actaully have an array and not any malicious code
          return Array.isArray(todos) ? todos : [];
      },
  
      filterTodos(todos, showCompleted, searchInput) {
          var filteredTodos = todos;
          // filter by showCompleted
          filteredTodos = filteredTodos.filter(todo =&gt; {
              // if todo.completed === false continue to show the todo OR if showCompleted === true continue to show todo
              return !todo.completed || showCompleted;
          });
          // filter by searchText
          filteredTodos = filteredTodos.filter(todo =&gt; {
              const text = todo.text.toLowerCase();
              return searchInput.length === 0 || todo.text.indexOf(searchInput) &gt; -1;
          });
          // sort todos with non-completed first
          filteredTodos.sort((a, b) =&gt; {
              // if a is not completed and b is completed a should come before b
              if (!a.completed &amp;&amp; b.completed) {
                  return -1;
                  // if a is completed and b isn't completed b should come before b
              } else if (a.completed &amp;&amp; !b.completed) {
                  return 1;
              } else {
                  // a is equal to b and thus, no reason to sort
                  return 0;
              }
          });
          return filteredTodos;
      }, ...
  </code></pre>