React 测试 + Vue 测试

发表于:2020-6-12 10:37

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

 作者:逍遥_乔治    来源:掘金

#
React
#
测试
分享:
  React 测试
  配置
   import Enzyme from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  Enzyme.configure({ adapter: new Adapter() });
   enzyme 有众多的组合提供才是
  chai-enzyme with Mocha/Chai.
  jasmine-enzyme with Jasmine.
  jest-enzyme with Jest.
  should-enzyme for should.js.
  expect-enzyme for expect.
   import React from 'react';
  import { expect } from 'chai';
  import { shallow } from 'enzyme';
  import sinon from 'sinon';
  import MyComponent from './MyComponent';
  import Foo from './Foo';
  describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });
  it('renders an `.icon-star`', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });
  it('renders children when passed in', () => {
  const wrapper = shallow((
  <MyComponent>
  <div className="unique" />
  </MyComponent>
  ));
  expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });
  it('simulates click events', () => {
  const onButtonClick = sinon.spy();
  const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
  wrapper.find('button').simulate('click');
  expect(onButtonClick).to.have.property('callCount', 1);
  });
  });
   
   import React from 'react';
  import sinon from 'sinon';
  import { expect } from 'chai';
  import { mount } from 'enzyme';
  import Foo from './Foo';
  describe('<Foo />', () => {
  it('allows us to set props', () => {
  const wrapper = mount(<Foo bar="baz" />);
  expect(wrapper.props().bar).to.equal('baz');
  wrapper.setProps({ bar: 'foo' });
  expect(wrapper.props().bar).to.equal('foo');
  });
  it('simulates click events', () => {
  const onButtonClick = sinon.spy();
  const wrapper = mount((
  <Foo onButtonClick={onButtonClick} />
  ));
  wrapper.find('button').simulate('click');
  expect(onButtonClick).to.have.property('callCount', 1);
  });
  it('calls componentDidMount', () => {
  sinon.spy(Foo.prototype, 'componentDidMount');
  const wrapper = mount(<Foo />);
  expect(Foo.prototype.componentDidMount).to.have.property('callCount', 1);
  Foo.prototype.componentDidMount.restore();
  });
  });
  Vue 测试
  最为基础的连个 API
  mount
  shallowMount
   <template>
  <span>{{ message }}</span>
  </template>
  <script>
  export default {
  data () {
  return {
  message: 'hello!'
  }
  },
  created () {
  this.message = 'bye!'
  }
  }
  </script>
 
   // 导入 Vue Test Utils 内的 `shallowMount` 和待测试的组件
  import { shallowMount } from '@vue/test-utils'
  import MyComponent from './MyComponent.vue'
  // 挂载这个组件
  const wrapper = shallowMount(MyComponent)
  // 这里是一些 Jest 的测试,你也可以使用你喜欢的任何断言库或测试
  describe('MyComponent', () => {
  // 检查原始组件选项
  it('has a created hook', () => {
  expect(typeof MyComponent.created).toBe('function')
  })
  // 评估原始组件选项中的函数的结果
  it('sets the correct default data', () => {
  expect(typeof MyComponent.data).toBe('function')
  const defaultData = MyComponent.data()
  expect(defaultData.message).toBe('hello!')
  })
  // 检查 mount 中的组件实例
  it('correctly sets the message when created', () => {
  expect(wrapper.vm.$data.message).toBe('bye!')
  })
  // 创建一个实例并检查渲染输出
  it('renders the correct message', () => {
  expect(wrapper.text()).toBe('bye!')
  })
  })
   潜挂载组件,调用函数之后,会得到一个 wrapper, wrapper 下面的一些方法是我们需要掌握的。
  wrapper.vm
  wrapper.text()
  wrapper.html() 组件渲染出的 html
  wrapper.contains('xxx')  已包含的元素
  wrapper.find('xxx')  找到元素,模拟用户交互

      本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。

《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

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

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

沪ICP备05003035号

沪公网安备 31010102002173号