如何在Jest快照中使用Enzyme Shallow

问题描述：

我正在尝试使用浅来自酶，并且还使用 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

相关推荐