哪个单元测试设置是正确的？这两个测试是否都在检查函数是否正确以及是否正常工作？
哪个单元测试设置是正确的？这两个测试是否都在检查函数是否正确以及是否正常工作？
提问于 2019-01-02 21:43:17
我刚刚开始为React JS做一些单元测试--使用Jest / enzyme。我想知道哪种测试(格式)更有用，更适合用于未来的测试。这是我目前正在做的两个不同的测试。
单元测试1:我的大部分测试都是基于这个设置的编写的
import React from 'react';
import Enzyme from 'enzyme';
import { shallow} from 'enzyme';
import EditWorkflow from './EditWorkflow';
import Adapter from 'enzyme-adapter-react-15';
//render must import shallow = method to show object structure
//Unit Test V
Enzyme.configure({ adapter: new Adapter() })
describe ('<Workflow />', () => {
it( 'renders 1 <Workflow /> Component', () => {
const Component = shallow(<EditWorkflow name= "workflow"/>);
expect(Component).toHaveLength(1);
});
describe('It renders props correctly', () => {
const Component = shallow(<EditWorkflow name= "workflow"/>);
expect(Component.instance().props.name).toBe('workflow');
})
});**单元测试2编写单元测试的不同方式*
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import { Login } from './App';
import renderer from 'react-test-renderer';
Enzyme.configure({adapter: new Adapter()});
let wrapper;
let defaultProps = {
getSessionContext: jest.fn(),
checkSession: jest.fn(),
}
let mockCheckSession;
describe('Login', () => {
beforeEach(() => {
mockCheckSession = jest.fn(()=>{return true})
defaultProps = {
getSessionContext: jest.fn(),
checkSession: mockCheckSession,
}
})
it('should render "authorizing..." if theres no session ', () => {
mockCheckSession = jest.fn(()=>{return false})
defaultProps.checkSession = mockCheckSession;
const tree = renderer
.create(<Login {...defaultProps} />)
.toJSON();
expect(tree).toMatchSnapshot();
})
it('should render null if there is a session ', () => {
mockCheckSession = jest.fn(()=>{return true})
defaultProps.checkSession = mockCheckSession;
const tree = renderer
.create(<Login {...defaultProps}/>)
.toJSON();
expect(tree).toMatchSnapshot();
})
})回答 1
Stack Overflow用户
发布于 2019-01-04 06:41:15
由于您没有提供完整的代码，因此很难帮助您处理当前的组件。以下是一些一般提示：
为您的React组件编写(良好的)单元测试的目标之一是确保您的组件按照您所希望的那样运行和呈现。我通常所做的，在这一部分没有对或错，是从上到下开始阅读渲染函数，并注意每个逻辑部分。
示例#1：
只需测试className是否设置在正确的元素上。
class Screen extends Component {
render() {
return (
<div className={this.props.className}>
<h1>My screen</h1>
</div>
);
}
}
it('should set the className on the first div', () => {
const wrapper = shallow(<Screen className="screen" />);
expect(wrapper.hasClass('screen')).toBeTruthy();
});示例#2：
如果组件有条件地呈现部件，则需要同时测试这两种情况。
class Screen extends Component {
render() {
return (
<div className={this.props.className}>
<h1>My screen</h1>
{this.props.subheading ? <h4>{this.props.subheading}</h4> : null}
</div>
);
}
}
it('should not render the subheading when not given by prop', () => {
const wrapper = shallow(<Screen />);
expect(wrapper.find('h4').exists()).toBeFalsy();
});
it('should render the subheading when given by prop', () => {
const wrapper = shallow(<Screen subheading="My custom subheading!" />);
expect(wrapper.find('h4').exists()).toBeTruthy();
expect(wrapper.find('h4').text()).toEqual('My custom subheading!');
});我可以再举几个例子，但我想你会明白的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54007442
复制相关文章
相似问题