Jest/Enzyme Test Prop Change onClick答案

【问题标题】：Jest/Enzyme Test Prop Change onClickJest/Enzyme Test Prop Change onClick
【发布时间】：2019-06-09 22:43:30
【问题描述】：

使用 16.8.0-alpha.0 以便我可以使用 React Hooks。

我有一个父组件，它在使用反应钩子点击子组件时将折叠设置为 true 或 false：

const [collapsed, setCollapsed] = useState(true);

setCollapsed 函数只是反转折叠的值 - true 或 false。

我正在使用 Enzyme 在 Jest 中测试子组件（运行 setCollapsed 函数的组件）。

如何模拟或触发 setCollapsed 函数来更改传递给我正在测试的子组件的折叠道具。

结构的一个简单版本是：

const DefaultLayout = ({ children }) => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <Layout>
      <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
      <Layout>
        <Header collapsed={collapsed} setCollapsed={setCollapsed} />
        <Content style={{ paddingTop: 0, margin: '24px' }}>{children}</Content>
      </Layout>
    </Layout>
  );
};

在 Header.js 中：

const Header = ({ collapsed, setCollapsed }) => (
  <HeaderCollapsed onClick={() => setCollapsed(!collapsed)} role="presentation">
    <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
  </HeaderCollapsed>
);

我试过了：

let collapsedMock = true;
const setCollapsedMock = jest.fn(() => (collapsedMock = !collapsedMock));

describe('test Avatar component', () => {    
  it('changes collapsed prop on click', () => {
    const header = mount(
      <BrowserRouter>
        <Header collapsed={collapsedMock} setCollapsed={setCollapsedMock} />
      </BrowserRouter>
    );
    const collapser = header.find('HeaderCollapsed');
    collapser.prop('onClick')();
    header.update();
    console.log(header.props().children.props.collapsed);
    // expect(header.prop('collapsed')).toEqual(false);
    header.unmount();
  });
});

但是 prop 永远不会从 true 更新。

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

因为您正在测试复合组件并期待道具，所以测试如下：

const header = mount(
                 <Header collapsed={collapsedMock} setCollapsed={setCollapsedMock}/>, <optional-context>
              );

并明确提供 BrowserRouter 所需的道具

【讨论】：

如果可能请发送代码沙箱，我会帮你修复它。