jestjs - 如何在测试中查看 Jest 快照

Question

有没有办法在运行快照测试时检查 Jest 拍摄的实际快照？因此，如果我有一个带有花哨日期的组件，它应该显示 Today或 Yesterday ，如何将其从快照中拉出以确保显示正确的字符串？这是我当前的代码:

import renderer from 'react-test-renderer';

const props = {
  fancy_date = 'Today'
};

test('ProviderReview renders without crashing', () => {

const component = renderer.create(
  <MyComponent {...props}>
);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();

查看组件和树只是给我填充了诸如 [Objects] 之类的东西的通用结构。和 children: [Array] .可以看到测试生成的快照，里面有 Today显示在 HTML 渲染中。那么我如何从测试代码中访问 HTML 渲染，或者 HTML 的 JSON 表示，或者任何实际显示该值的内容 Today标签？

Answer 1

您可以使用 Test Instance 上的查找方法找到您要查找的特定元素，然后使用类似 children 的 Prop 对其进行测试。 :

const SimpleComponent = () => (
  <div>
      <h1>Today</h1>
  </div>
);

describe('SimpleComponent', () => {
  it('says Today in the h1', () => {
    const component = renderer.create(<SimpleComponent/>);
    expect(component.root.findByType('h1').children).toEqual(['Today']);
  });
});