Enzyme 测试组件的文本内容和样式
在前端开发中, 组件化已经成为了一种主流的开发方式, 简化了代码逻辑, 方便了团队协作和代码重用。而组件的开发与维护离不开测试, 包括单元测试, 集成测试等等。Enzyme 就是一款非常强大的 React 组件测试工具, 可以帮助开发者有效的测试组件的文本内容和样式。
Enzyme 的基本使用方法
首先我们需要安装 Enzyme, 并引入 React 以及 React-DOM:
npm i enzyme react react-dom --save-dev
如果你使用的是 Jest 测试框架, 则需要再安装 Jest 的 Enzyme 适配器:
npm i enzyme-adapter-react-16 --save-dev
然后在测试文件中引入 Enzyme 和适配器:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
Enzyme.configure({ adapter: new Adapter() });其中, shallow 函数可以用来创建组件的浅渲染, mount 函数可以用来进行深度渲染。有了这些准备工作, 就可以尝试 Enzyme 的各种测试方法了。
文本内容的测试
大部分组件都包含了文本内容, Enzyme 可以通过下面几种方法测试文本内容是否符合预期。
- .text()
.text() 方法可以用来获取组件包含的文本内容, 例如下面的 Button 组件:
import React from 'react';
function Button({children}) {
return <button>{children}</button>
}测试代码可以写成这样:
describe('<Button />', () => {
it('should render button text correctly', () => {
const wrapper = shallow(<Button>Hello, World!</Button>);
expect(wrapper.text()).to.equals('Hello, World!');
});
});可以看到, .text() 方法返回了 Button 组件中的文本, 并验证是否和预期值相等。
- .html()
如果组件包含了 HTML 元素, 可以使用 .html() 方法来测试是否正确渲染了 HTML。
例如, 下面的 Title 组件:
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------- -
------ -
-----
----------- -- -- ------------
------- --- --- ---- --- -- ------ ---- ---------
------
-
-可以通过以下方法测试是否正确渲染了 HTML:
describe('<Title />', () => {
it('should render HTML correctly', () => {
const wrapper = shallow(<Title />);
expect(wrapper.html()).to.equals('<div><h1>Welcome to my website</h1><p>Here you can find all my latest blog posts</p></div>');
});
});- .contains()
.contains() 方法可以用来验证组件是否包含了某个文本。
例如, 下面的 Article 组件可能包含了一个标题和正文:
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------------- ------ -
------ -
-----
----------------
-------------
------
-
-可以通过下面的方法测试是否包含了正确的标题和正文:
describe('<Article />', () => {
it('should contain title and body text', () => {
const wrapper = shallow(<Article title='My First Blog Post' body='This is my first blog post' />);
expect(wrapper.contains('My First Blog Post')).to.be.true;
expect(wrapper.contains('This is my first blog post')).to.be.true;
});
});CSS 样式的测试
Enzyme 也可以很好的测试组件的样式, 通过 .hasClass() 和 .prop() 方法来验证组件类名和样式属性是否符合预期。
- .hasClass()
.hasClass() 方法可以用来验证组件是否包含了某个类名。
例如, 下面的 Navigation 组件可以包含多个选项卡:
-- -------------------- ---- -------
------ ------- --------- - ---- --------
----- ---------- ------- --------- -
----- - -
---------- ------
-
-------- -
------ -
---- -----------------------
------- -------------------------------------- --------- ------------------------------- --- ------ - -------- - -----------------
------- -------------------------------------- --------- ------------------------------- --- ------ - -------- - -----------------
------- -------------------------------------- ---------- ------------------------------- --- ------- - -------- - ------------------
------
-
-
-可以使用 .hasClass() 方法来验证是否正确设置了选项卡的类名:
describe('<Navigation />', () => {
it('should set active class on clicked tab', () => {
const wrapper = shallow(<Navigation />);
wrapper.find('button').at(1).simulate('click');
expect(wrapper.find('button').at(1).hasClass('active')).to.be.true;
});
});可以看到, .hasClass() 方法帮助我们验证是否正确设置了选项卡的类名。
- .prop()
.prop() 方法可以用来验证样式属性是否正确设置。
例如, 下面的 Input 组件可以根据 type 属性显示不同的文本框:
import React from 'react';
function Input({type}) {
return (
<input type={type} placeholder='Enter your input here' />
)
}可以使用 .prop() 方法验证文本框的 type 属性:
describe('<Input />', () => {
it('should set correct type attribute', () => {
const wrapper = shallow(<Input type='email' />);
expect(wrapper.find('input').prop('type')).to.equals('email');
});
});可以看到, .prop() 方法帮助我们验证是否正确设置了文本框的 type 属性。
总结
在本文中, 我们介绍了如何使用 Enzyme 测试组件的文本内容和样式。通过 .text(), .html(), .contains(), .hasClass() 和 .prop() 方法, 可以很好的验证组件是否正确的渲染了文本和样式。Enzyme 是一个非常强大的 React 组件测试工具, 在组件开发和测试中非常实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e59015f6b2d6eab31030ed