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

尝试使用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>
    );
  }
  }

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

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

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

类示例扩展了React.Component{
render（）{
返回(
点击我
);
}
}

Sample.test.jsx

class Sample extends React.Component {

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

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

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

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

从“React”导入React；
从“酶”导入{mount}；
测试（'测试组件'，（）=>{
常量组件=挂载(
);
expect（component.toMatchSnapshot（）；
});

快照

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

导出[`testing Component 1`]=`
`

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

需要快照：

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

导出[`testing Component 1`]=`
点击我
`

如果您不想进行浅层渲染，您可以尝试使用

react test渲染器，而不是
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();
});

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“./Sample”导入样本；
测试（'测试组件'，（）=>{
const component=renderer.create（）.toJSON（）；
expect（component.toMatchSnapshot（）；
});
酶装载
儿童
方法

.children([selector]) => ReactWrapper

从文件：

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

const wrapper=mount（）；
expect（wrapper.find（'ul'）.children（））.to.have.length（items.length）；

参考：

您还可以按类名查找元素：

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

const wrapper=mount（）；
expect（wrapper.find（'.my button'）.hasClass（'disabled'））.to.equal（true）；

参考：