javascript - Jest - 添加 '' 后快照测试失败

Question

我在运行 Jest 后收到以下错误。我没有太多使用 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>结束标记。

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