具有CSS和快照测试的浅渲染样式的组件

Question

我正在使用样式化的组件和jest + enzyme + jest-styled-components测试我的组件。我希望能够shallow渲染组件并使用快照测试：

  const wrapper = shallow(<MyStyledComponent someProp>ASDF</MyStyledComponent>);
  expect(wrapper).toMatchSnapshot();

生成的快照是：

// Jest Snapshot v1

exports[`default 1`] = `
<ComponentStyles__MyStyledComponent>
  <ComponentStyles_Bla>
    ASDF
  </ComponentStyles_Bla>
</ComponentStyles__MyStyledComponent>

问题是不包括样式。我要达到的目标是，快照包括样式化组件的实际CSS。使用酶的mount，我可以在快照中很好地看到css：

exports[`style2 1`] = `
.c0 {
  padding: 12px 16px;
  z-index: 1;
  font-size: 16px;
}

<div
  className="c0"
>
  ...
</div>
`;

但是对我来说，仅渲染shallow很重要，当我使用shallow时，我只能看到没有css的组件（如上所述）。>>

[也尝试过酶dive方法，但未成功。因此，有什么方法可以浅化渲染样式化的组件并在快照中获得CSS？

我正在使用样式化的组件和jest + enzyme + jest-styled-components测试我的组件。我希望能够浅化渲染组件并使用快照测试：const wrapper = shallow（<...>

Answer 1

这不是您想要的方式，因为浅层深度永远不会超过1层深。这就是重点。