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)>

值得注意的是：我已经更新了我的酶和反应，并且已经使用了适配器，正如酶migration guide所建议的那样。我无法在堆栈溢出或Github上找到其他类似的问题。提前感谢任何见解！

Answer 1

此enzyme issue comment对有效测试很有帮助。（整个线程对于了解酶快照测试的片段状态非常有用。）但是这段代码对我有用，并在快照的模板文字中输出<Unknown></Unknown>代替{{1 }}：

<React.Fragment>

以下是示例输出：

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

更新（2018年7月）：

Jest版本23.0.0（https://github.com/facebook/jest/blob/master/CHANGELOG.md#2300）添加了对使用https://github.com/facebook/jest/pull/5816/files#diff-d7b82d8b858fb8e0b01a91859362b75a的快照中呈现exports[`<FragmentComponent /> it renders to match the snapshot 1`] = ` <div> <Unknown> <div></div> <div></div> </Unknown> </div> `;的支持。

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

1 个答案: