Question

运行Jest后，我收到以下错误。我在使用Jest方面没有太多经验，所以希望有人可以提供有关此测试失败的信息。

结果： 最佳测试结果：

- Snapshot
+ Received
- <span
-   className="icon icon-dismiss size-2x "
-   style={
-     Object {
-       "color": "inherit",
+ <Fragment>
+   <span
+     className="icon icon-dismiss size-2x "
+     style={
+       Object {
+         "color": "inherit",
+       }
      }
-   }
-   title=""
- />
+     title=""
+   />
+ </Fragment>

  26 |     };
  27 |     const wrapper = shallow(<Icon {...props} />);
> 28 |     expect(toJson(wrapper)).toMatchSnapshot();
     |                             ^
  29 |   });
  30 | });

这是测试文件： 测试文件

Component.spec.jsx

describe('Snapshot test - <Icon />', () => {
  it('renders Icon correctly in clean state', () => {
    const props = {
      icon: 'dismiss',
    };
    const wrapper = shallow(<Icon {...props} />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });
  it('renders Icon correctly when colour provided', () => {
    const props = {
      icon: 'dismiss',
      color: '#000000',
    };
    const wrapper = shallow(<Icon {...props} />);
    expect(toJson(wrapper)).toMatchSnapshot();
  });

});

这是组件文件： component.js


class Icon extends React.PureComponent<IconProps> {
  render() {
    const {
      className, icon, size, colour, style, title,
    } = this.props;

    return (
      <React.Fragment>
        {icon === 'spinner' ? <LoadingSpinnerSmall /> : (
          <span
            title={title}
            className={`${css.icon} ${css[`icon-${icon}`]} ${css[`size-${size}`]} ${className}`}
            style={{ color: colour === null ? 'initial' : colour, ...style }}
          />
        )
      }
      </React.Fragment>
    );
  }
}

export default Icon;

Answer 1

您的快照匹配测试结果

- Snapshot
+ Received
- <span
-   className="icon icon-dismiss size-2x "
-   style={
-     Object {
-       "color": "inherit",
+ <Fragment>
+   <span
+     className="icon icon-dismiss size-2x "
+     style={
+       Object {
+         "color": "inherit",
+       }
      }
-   }
-   title=""
- />
+     title=""
+   />
+ </Fragment>

这表明您的组件在上次运行测试时具有额外的代码，即<Fragment>开始标记和</Fragment>关闭标记。

要解决此问题，只需删除旧快照并重新运行测试即可。

开玩笑-添加'</React.Fragment>'后，快照测试失败

1 个答案: