1

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

  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我只看到没有 css 的组件（如上）。

也尝试过酶的dive方法，但没有成功。那么，有没有办法浅渲染一个样式化的组件并在快照中获取 css 呢？

4

0 回答 0