javascript - 使用 withRouter 包装的组件测试按钮的状态

Question

我有一个当前用 withRouter 包装的组件(例如，我使用 export default withRouter(myComponent) )，因为我需要使用 history.push对于我在组件中的链接之一。我正在用 Enzyme 编写一个测试，测试该组件中的按钮是否在用户单击时将其状态更改为 true/false。测试失败，错误是它无法读取 null 的 isExpanded 属性。这是我的测试:

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { mount, configure } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import myComponent from './myComponent';

configure({ adapter: new Adapter() });

 describe('Successful flows', () => {
   test('button changes state when clicked', () => {
    const wrapper = mount(<MemoryRouter><myComponent /></MemoryRouter>);
    const moreBtn = wrapper.find('.seeMoreButton').at(0);
    moreBtn.simulate('click');
    expect(wrapper.state().isExpanded).toEqual(true);
  });
}); 

我发现在我使用 withRouter 之前，我刚刚得到了 const wrapper = mount(<myComponent />);在我的测试中，测试通过了。我对路由还很陌生，我觉得这里缺少一些东西，所以我们将不胜感激。

Answer 1

您正在检查错误组件的状态，mount 的结果将是 MemoryRouter，而不是 myComponent。

安装组件后，您需要找到 myComponent 并验证其状态

test('button changes state when clicked', () => {
  const wrapper = mount(<MemoryRouter><myComponent /></MemoryRouter>);
  const comp = wrapper.find(myComponent);
  const moreBtn = comp.find('.seeMoreButton').at(0);
  moreBtn.simulate('click');
  expect(comp.state().isExpanded).toEqual(true);
});