如何在Jest快照中使用Enzyme Shallow [英] How to use Enzyme Shallow with Jest snapshots

问题描述

我正在尝试使用浅来自酶，并且还使用 jest 一起.

I'm trying to use shallow from enzyme and also use snapshots from jest together.

我面临的问题是我需要使用

The problem I'm facing is that I need to change something from the state using setState() from enzyme and then match the result with the snapshot.

查看我的组件的代码:

....

getPrevProduct = () => {
  const key = this.state.indexCurrent > 0 &&
   this.productsKeys[this.state.indexCurrent - 1];

  let product = null;

  if (key) {
    product = this.props.products[key];
  }

  return product;
}

renderPrev = () => this.getPrevProduct() && <PrevButton />;

render() {
  return (
    <div>
      ...
      {this.renderPrev()}
      ...
    <div>
  )
}

前面的代码检查从currentIndex中的props传递的产品是否存在.

The previous code checks if the product, passed from props in the currentIndex, exists.

这就是为什么我需要酶来改变状态.然后，如果匹配，则必须呈现< PrevButton/> .

That's why I need Enzyme to change the state. Then, if it matches, <PrevButton /> has to be rendered.

此测试是当我想将组件与快照匹配时

This test is when I want to match the component with the snapshot:

const nextProps = {
  products: {
    test: 'test'
  }
};

const tree = create(<Component nextProps={nextProps} />).toJSON();

expect(tree).toMatchSnapshot();

但是我需要更改状态.我该怎么做?这不起作用:

But I need to change the state. How I can do that? This doesn't work:

it('should render component with prev button', () => {
  const nextProps = {
    products: {
      test: 'test'
    }
  };
  const instance = shallow(<Component nextProps={nextProps} />).instance()

  instance.setState({
    indexCurrent: 1
  });

  const tree = create(<Component nextProps={nextProps} />).toJSON();

  expect(tree).toMatchSnapshot();
});

我还尝试将组件的声明保存到一个变量中，例如下一个未完成的代码，并在 shallow 和 create 中使用它:

I also tried to save the declaration of the component into a variable like the next uncompleted code and use it in shallow and create:

const component = <Component nextProps={nextProps} />;

 shallow(component).instance()).instance()
 create(component).toJSON()`

我也没有碰运气酶到json .

你会怎么做?

推荐答案

经过反复试验，我发现酶具有一种方法，该方法未记录(或未找到)，称为 getRenderOutput .

After trial and error, I found that enzyme has a method, not documented (or I didn't find it) called getRenderOutput.

该方法以JSON格式返回组件，所以我可以这样做:

That method return the component in JSON format so I can do that:

it('should render component with prev button', () => {
  const nextProps = {
    products: {
      test: 'test'
    }
  };
  const render = shallow(mockComponent(nextProps))
  const instance = render.instance();

  instance.setState({
    indexCurrent: 1
  });

  const tree = render.renderer.getRenderOutput();

  expect(tree).toMatchSnapshot();
});

这就是我可以将Jest的快照与酶一起使用的方式.

That's how I can use snapshots from Jest with enzyme.

getRenderOutput 的唯一问题是，如果我放置控制台日志，它将被打印两次.这是因为 instance()和 getRenderOutput()都会触发测试.

The only problem with getRenderOutput is that if I put a console log, it will be printed twice. That's because instance() and getRenderOutput(), both fires the test.

这是快照的输出:

exports[`ProductNavigator should render component with prev button 1`] = `
  <div>
    <FloatingActionButton
      className="NavigatorButton left"
      onTouchTap={[Function]}
      secondary={true}
    >
      <KeyboardArrowLeft />
    </FloatingActionButton>
  </div>
`;

如果有人知道更好的方法，请添加评论.

If someone knows a better way to do that, please, add a comment.

谢谢！

这篇关于如何在Jest快照中使用Enzyme Shallow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！