Question

尝试使用jest运行Sample.test.jsx时，会创建以下快照。

Sample.jsx

class Sample extends React.Component {

  render() {
    return (
      <Link to={'/xyz'}>
        <div className={cx('l-tab')}>
             Click Me
        </div>
      </Link>
    );
  }
  }

Sample.test.jsx

import React from 'react';
import { mount } from 'enzyme';

test('testing Component', () => {
  const component = mount(
    <Sample />
    );

  expect(component).toMatchSnapshot();
});

快照

exports[`testing Component 1`] = `
 <Link to="/xyz" />
`

问题 - 如何在快照中获取链接的子元素？

预期快照：

exports[`testing Component 1`] = `
 <Link to="/xyz" >
   <div className='l-tab'>
         Click Me
    </div>
  </Link>
`

Answer 1

如果您不希望进行浅层渲染，则可以尝试使用react-test-renderer代替enzyme：

import React from 'react';
import renderer from 'react-test-renderer';
import Sample from './Sample';

test('testing Component', () => {
  const component =  renderer.create(<Sample />).toJSON();
  expect(component).toMatchSnapshot();
});

Answer 2

酶装children方法..

.children([selector]) => ReactWrapper

来自酶装载文档：

const wrapper = mount(<ToDoList items={items} />);
expect(wrapper.find('ul').children()).to.have.length(items.length);

参考：http://airbnb.io/enzyme/docs/api/ReactWrapper/children.html

你也可以通过className找到元素：

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

参考：http://airbnb.io/enzyme/docs/api/ReactWrapper/hasClass.html

Jest：将组件子元素添加到快照中

2 个答案: