使用enzyme时， Jest快照会因为Emotion 10 / Babel 7而中断。

Question

我之前使用Babel 6和Emotion 9成功地生成了CSS和HTML的快照，但是我希望升级到Babel 7和Emotion 10。然而，我的快照测试在使用Enzyme时不再起作用。更新所需的代码后，代码能够编译并正常工作，只是测试失败了（迁移文档中没有任何有关测试设置更新的内容）。

test('renders properly', () => {
  // this works generating the correct css / html snapshot output
  expect(renderer.create(<component.Template>test</component.Template>).toJSON()).toMatchSnapshot();

  //this does not
  const wrapper = shallow(<component.Template>test</component.Template>);

  expect(toJson(wrapper)).toMatchSnapshot();
});

酵素版本将产生以下输出：

exports[`renders properly 1`] = `
<ContextConsumer>
  <Component />
</ContextConsumer>
`;

我已经尝试通过将其添加到Jest配置中的snapshotSerializers并手动添加到setupFilesAfterEnv脚本中来添加情感序列化器。任何人知道我为什么会得到这个输出吗？

- ryanzec

---

为什么你的测试显示“正确渲染”，但输出却是“正确渲染1”？ - Vu Luu

@VuLuu 这就是 Jest 生成快照的方式。 - Patrick Hund

Answer 1

如果您已正确配置了所有内容，请执行以下操作

test('renders properly', () => {
  const wrapper = shallow(<component.Template>test</component.Template>);
  expect(wrapper).toMatchSnapshot();
});

这应该按预期工作。

- Mohit Yadav