是否有可能在React片段上使用Enzyme的快照？

Question

我想知道React片段是否与Enzyme的快照兼容.现在看来React 16+的片段在酶的shallow()方法中被渲染为符号,这会导致转换错误:"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)>

值得注意的是:我已经更新了我的酶和React,并且已经使用了一个适配器,正如酶的迁移指南所示.我无法在堆栈溢出或Github上找到其他类似的问题.提前感谢任何见解!

Answer 1

这个酶问题评论有助于有效的测试.(整个线程对于通过酶快照测试更多地了解片段的状态非常有用.)但是这段代码对我有用,并且<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.