Question

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

我有一个父组件，该组件在使用React钩子单击子组件时将折叠状态设置为true或false：

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

setCollapsed函数仅将合拢的值取反-true或false。

我正在使用酶在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();
  });
});

但是道具从不更新为真实。

Answer 1

因为您正在测试compund组件并期待道具，所以应该像这样进行测试：

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

并从BrowserRouter明确提供所需的道具

开玩笑/酶测试道具更改onClick

1 个答案: