JavaScript 测试工具:Enzyme的基础知识介绍(二)

发表于:2021-7-19 10:08

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:sokach    来源:掘金

#
jest
分享:
  .filterWhere(predicate)
  返回满足断言函数的节点。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </>
    )
  }
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.find('h1').filterWhere(n => n.text() === 'hello').text()).toBe('hello');

    const wrapper = app.find('span').filterWhere(n => n.text().indexOf('h') > -1);
    expect(wrapper.at(0).text()).toBe('haha');
    expect(wrapper.at(1).text()).toBe('hehe');
  })
})
// 测试通过

  .contains(nodeOrNodes)
  返回布尔值,表示给定的节点(nodeOrNodes)是否存在于渲染树中。可以检测props以及相应的值。也就是说,如果预期元素与包装器的元素有相同的props并且共享相同的值就返回true。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>
    )
  }
}
export default App;

// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.contains(<h1>hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'a'}>hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'helloClass'}>Hello</h1>)).toEqual(false);
    expect(app.contains(<h1 className={'helloClass'}>hello</h1>)).toEqual(true);
    expect(app.contains(<h1 className='helloClass'>hello</h1>)).toEqual(true);

    expect(app.contains([
      <h1 id="worldID">World</h1>,
      <span className="spanClass">ya</span>
    ])).toEqual(true)

    expect(app.contains([
      <h1 id="worldID">World</h1>,
      <span>haha</span>
    ])).toEqual(false)
  })
})

  总结:严格匹配,不能差一丝一毫,多个节点必须相邻,否则不成功。

  .containsMatchingElement(node)
  返回浅渲染树中是否存在给定node节点的布尔值。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass' data-fo="foo">hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>
    )
  }
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.containsMatchingElement(<h1>hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 className='helloClass' >hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 data-fo='foo'>hello</h1>)).toEqual(true);
    expect(app.containsMatchingElement(<h1 data-fo='foo-data'>hello</h1>)).toEqual(false);
    expect(app.containsMatchingElement(<h1 data-fo='foo' />)).toEqual(false);
  })
})

  总结下来就是:可少不可多。props和值完全对用即可,不像contains那样严格。

  .containsAllMatchingElements(nodes)
  给定所有元素是否都存在于浅渲染树中。遵循containsMatchingElement匹配原则。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>
    )
  }
}
export default App;

// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.containsAllMatchingElements([
      <h1>hello</h1>,
      <h1 id="worldID">World</h1>
    ])).toEqual(true);

    expect(app.containsAllMatchingElements([
      <h1 className='helloClass'>hello</h1>,
      <h1 id="worldID">World</h1>
    ])).toEqual(true);

    expect(app.containsAllMatchingElements([
      <h1 className='helloClass'>hello</h1>,
      <span>haha</span>
    ])).toEqual(true);
  })
})
// 测试通过

  .containsAnyMatchingElements(nodes)
  给定节点(nodes)中有一个匹配就返回true。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom />
      </div>
    )
  }
}
export default App;
// 测代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.containsAnyMatchingElements([
      <h1>hello</h1>,
      <h1 id="worldIDDDD">World</h1>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>,
      <h1 id="worldIDDDD">World</h1>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>,
      <span>haha</span>
    ])).toEqual(true);

    expect(app.containsAnyMatchingElements([
      <h1 className='helloClass'>hello</h1>,
      <span className='span'>haha</span>
    ])).toEqual(true);
  })
})

  contains总结:匹配规则越来越简单。

  .equals(node)
  返回布尔值:表示当前渲染树的根节点是否和传入的相同,忽略未定义的属性。
  举个例子:
// 待测试组件
import React, { Component } from 'react';
import MyCom from './MyCom';
class App extends Component {
  render() {
    return (
      <div>
        <h1 className='helloClass'>hello</h1>
        {/* <h1 id="worldID">World</h1>
        <span className="spanClass">ya</span>
        <span>haha</span>
        <span fo="heheKey">hehe</span>
        <MyCom /> */}
      </div>
    )
  }
}
export default App;
// 测试代码
import React from 'react';
import App from '../src/App';
import { shallow } from 'enzyme'

describe('component APP test', () => {
  it('测试hello world', () => {
    const app = shallow(<App />);
    expect(app.equals(<div><h1 className='helloClass'>hello</h1></div>)).toEqual(true)
    expect(app.equals(<div><h1>hello</h1></div>)).toEqual(false)
    expect(app.equals(<h1 className='helloClass'>hello</h1>)).toEqual(false)
    expect(app.equals(<div></div>)).toEqual(false)
  })
})

  注意:当组件中注释部分解注释的时候测试不通过。


  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号