开玩笑的快照用酶打破了情感 10 / babel 7答案

【问题标题】：jest snapshot breaks with emotion 10 / babel 7 using enzyme开玩笑的快照用酶打破了情感 10 / babel 7
【发布时间】：2019-07-25 16:46:14
【问题描述】：

所以我让 jest 快照正常工作，在带有 babel 6/emotion 9 的快照中生成 css 和 html，但是我需要更新到 babel 7 和emotion 10，但是我使用酶的快照测试不再起作用。更新所需代码后，代码编译并正常工作，只是测试被破坏（迁移文档中没有任何内容显示与测试设置更新相关的任何内容）。

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 脚本中来添加情感序列化程序。

有人知道我为什么会得到这个输出吗？

【问题讨论】：

为什么你的测试是renders properly，而输出是renders properly 1？
@VuLuu 这正是 Jest 生成快照的方式

标签： javascript reactjs jestjs enzyme emotion

【解决方案1】：

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

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

这应该可以按预期工作。

【讨论】：