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]之类的东西。我可以看到测试生成的快照，并且 it 在HTML呈现中显示了Today。那么，如何从测试代码，HTML的JSON表示或任何实际显示Today标签的值的内容中访问HTML渲染？

Answer 1

您可以在Test Instance上使用find方法来查找所需的特定元素，然后使用children之类的道具对其进行测试：

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']);
  });
});

Answer 2

无论何时进行快照测试，都会创建一个名为快照的文件夹。当您创建内容并运行快照测试时，您将得到error，并且该错误将显示已更改的内容。

Answer 3

我认为这是不可能的。一个问题是，除非您仅使用内联样式，否则快照中没有样式，因此在浏览器中查看的内容都不是实际最终用户看到的内容，因此无论如何都不会很有帮助。

我偶然发现了这篇文章，因为我也希望实现相同的目标，但是我想可以做到的唯一方法是，如果有可用的插件，我没有任何运气。如果您找到解决方法，请告诉我！

如何在测试中查看Jest快照

3 个答案: