Jest / Enzyme Test Prop Change onClick

Question

Используя 16.8.0-alpha.0, чтобы я мог использовать React Hooks.

У меня есть родительский компонент, который устанавливает свернутый в true или false при щелчке по дочернему компоненту с использованием реакционных хуков:

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

Функция setCollapsed просто инвертирует значение свернутого - true или false.

Я тестирую дочерний компонент (тот, который выполняет функцию setCollapsed) в Jest с использованием Enzyme.

Как я могу издеваться или запускать функцию 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 явно