reactjs - 是否可以在 React 片段上使用 Enzyme 的快照？

Question

我想知道 React 片段是否与 Enzyme 的快照兼容。现在似乎来自 React 16+ 的片段在 enzyme 的 shallow() 方法中被渲染为 Symbols，这会导致转换错误:"TypeError: Cannot convert a Symbol value to a string ".

这是我的测试:

it('should render successfully', () => {
  const wrapper = shallow(
    <Sections
      data={mappedMockData}
      sections={mappedMockData.sections}
      eligibility={mockEligibility}
    />
);

console.log(wrapper.debug());

expect(wrapper).toMatchSnapshot();

这是我的 console.log 的输出:

  <Symbol(react.fragment)>
    <div className="content-container">
      <div className="flex">
        <div className="sections-wrap">
          <Connect(Section1) />
          <Connect(Section2) />
        </div>
        <Connect(Section3) />
      </div>
    </div>
    <div className="content-container">
      <Connect(Section4) />
      <Connect(Section5) />
    </div>
  </Symbol(react.fragment)>

值得注意:我已经更新了我的 Enzyme 和 React，并且已经在使用适配器，正如 enzyme 的 migration guide 所建议的那样.我无法在堆栈溢出或 Github 上找到与此类似的其他问题。提前感谢您的任何见解!

Answer 1

这enzyme issue comment有助于有效测试。 (整个线程对于通过 enzyme 快照测试了解更多关于片段状态的信息很有用。)但这段代码对我有用，并输出 <Unknown></Unknown>在快照的模板文字中代替 <React.Fragment> :

const component = shallow(<FragmentComponent />)
const fragment = component.instance().render()
expect(shallow(<div>{fragment}</div>).getElement()).toMatchSnapshot()

这是示例输出:

exports[`<FragmentComponent /> it renders to match the snapshot 1`] = `
<div>
  <Unknown>
    <div></div>
    <div></div>
  </Unknown>
</div>
`;

更新(2018 年 7 月):

Jest 版本 23.0.0 ( https://github.com/facebook/jest/blob/master/CHANGELOG.md#2300 ) 添加了对渲染的支持 <React.Fragment>在 https://github.com/facebook/jest/pull/5816/files#diff-d7b82d8b858fb8e0b01a91859362b75a 的快照中.