标签: snapshot-testing

我使用 Storyshots 和 Storybook 进行快照测试。参考这里的文档：link1，link2

完整的错误日志

遵循此处的所有步骤，但不知道为什么会出现错误:)

您可以在这里找到代码

我还在互联网上搜索了可能的解决方案，但没有找到任何有帮助的解决方案。

有人可以告诉我如何解决这个问题吗？

如果问题听起来不完整，我们深表歉意。我最近学习了 NgRx，并意识到与 NgRx 情况下的断言相比，快照测试会让生活更轻松。但是，我不想从 Karma 迁移到 Jest（不想为这一部分更改项目的整个流程）。使用 Karma 测试 NgRx 的最佳方法是什么（快照测试的完成方式）？我在 npm 中看到了一些软件包，但是有什么来自 karma 的第一手资料吗？欢迎任何建议。

我有一系列在本地通过的快照测试。但在 Jenkins 上，我的组件似乎正在渲染不同的快照。我的测试是：

import { render } from 'enzyme';
import React from 'react';
import Wizard from '../index';

describe('Wizard', () => {
  describe('Snapshot tests', () => {
    it('Should render the Wizard', () => {
      const container = render(<Wizard />);

      expect(container).toMatchSnapshot();
    });
  });
});

我的组件：

const Wizard = (): JSX.Element => (
  <FTWizard
    tree={root}
    layouts={{
      layout1: Layout1,
      layout2: Layout2,
      layout3: Layout3,
    }}
    stepsContent={{
      layout1: Layout1Content,
      layout2: Layout2Content,
      layout3: Layout3Content,
    }}
  />
);

export default Wizard;

我正在使用酶生成快照，我的组件正在使用 xstate 机器。在本地测试时一切正常，但在 Jenkins 上我收到以下错误：

Stacktrace
Error: …

到目前为止，在我正在处理的项目中，我通常对我的组件进行快照测试，这些组件以这种方式进行异步数据加载：

describe('MyComponent component', () =>{
    test('Matches snapshot', async () => {
        fetch.mockResponse(JSON.stringify(catFacts));

        const { asFragment } = render(<MyComponent />);
        await waitFor(() => expect(asFragment()).toMatchSnapshot());
    })
})

我觉得它非常方便，因为它允许有一个包含组件不同状态（加载、错误、加载数据）的快照。

问题是我刚刚发现根本不推荐这种方法，并且@testing-library/react 包的最新更新不允许我再以这种方式测试我的组件。

根据包的 eslint 规则，我必须像这样修改我的代码：

describe('MyComponent component', () =>{
    test('Matches snapshot', () => {
        fetch.mockResponse(JSON.stringify(catFacts));

        const { asFragment } = render(<MyComponent />);
        expect(asFragment()).toMatchSnapshot();
    })
})

它可以工作，但生成的快照仅包含组件的初始状态（在本例中为“加载”）。

在这种情况下，您将如何有效地对异步加载数据的组件进行快照测试？