测试简单的输入更改

Question

我对在React中进行测试非常陌生。我只想在搜索组件中测试我的onChange方法。搜索组件从父组件（App）组件中获取searchQuery和setSearchQuery道具。当搜索组件中的输入值更改时，将在App组件中执行setSeachQuery功能。

简单搜索组件

const Search = ({ searchQuery, setSearchQuery }) => {
  return (
    <div data-test="searchComponent">
      <input
        type="text"
        name="search"
        id="search"
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
      ></input>
    </div>
  );
};

测试

const setUp = (props={}) => {
  const component = shallow(<Search {...props} />);
  return component;
}

const findByTestAttr = (component, attr) => {
  const wrapper = component.find(`[data-test='${attr}']`);
  return wrapper;
}

let component;
beforeEach(() => {
  component = setUp();
})

it('should chnage state', () => {
  const mockEvent = {
    target: {
      name: 'search',
      value: 'test'
    }
  };

  const wrapper = findByTestAttr(component, 'searchComponent')
  //console.log(wrapper.debug()) shows the Search component with all elements div and input
  wrapper.find('#search').simulate('change', mockEvent);
  expect(wrapper.state('query')).toEqual('test');
});

我收到setSearchQuery不是函数错误。正如我所说的，我对测试还很陌生，所以我不知道我是否使事情变得复杂。

Answer 1

[<Search>将setSearchQuery当作props，而当您在此处浅装时]

const setUp = (props={}) => {
  const component = shallow(<Search {...props} />);
  return component;
}

您正在传递空道具。因此出现错误。

解决方案：

[export setSearchQuery，无论您从何处声明它，然后将其导入测试中，并作为道具传递给<Search />