使用 react-test-renderer 进行快照测试

Question

我正在尝试为具有以下提供程序的 App 组件创建一个测试用例。

• 商店供应商
• 翻译提供者
• redux-persist
• 路由器

我正在尝试呈现特定状态的应用程序，以确保呈现相同的应用程序。测试用例通过，但我得到以下快照。

// Jest Snapshot v1, [link to jest docs]

exports[`This should Render App 1`] = `null`;

exports[`This should Render App 2`] = `null`;

我的测试用例是这样的，

const component = renderer.create(
         <App store={store} persistor={persistor} />,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

tree 不为 null 并且具有呈现的组件。但是我没有看到这是写在快照中的。

npm 包版本

"jest": "^22.4.4",
"react-test-renderer": "^16.4.0",

Jest doc

Answer 1

我能够通过使用 react-test-renderer 中可用的 .toTree() 方法而不是 toJSON() 来解决问题。

toMatchSnapshot() 的笑话似乎只接受 ReactTestRendererTree 而不是 ReactTestRendererJSON.