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')  找到元素，模拟用户交互

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​​​软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。