配置
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),我们将立即处理。