使用酶测试多个类名
test multiple classname using enzyme
我想测试类名“.button_next accent”是否存在。
<Button
className={`${this.props.nextAccent && "accent"} button_next`}
text={this.props.textNext}
icon={"iconnext"}
onClick={this.props.nextButtonClicked}
/>
我的测试
Then(/^Next button contains accent/, function () {
const wrapper = enzyme.mount(App);
let nextButton = wrapper.find('.button_next').exists(); //here i want to check both
.button_next and accent
return (expect(nextButton).to.be.equal(true));
//gave this a try
// FAILED: let nextButton = wrapper.find('.button_next .accent').exists();
// FAILED: let nextButton = wrapper.find('button_next accent').exists();
// FAILED: let nextButton = wrapper.find('.button_next accent').exists();
});
多个CSS类选择器之间没有空格。
例如
index.jsx
:
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<button className={`${this.props.nextAccent && 'accent'} button_next`}></button>
</div>
);
}
}
index.test.jsx
:
import { mount } from 'enzyme';
import React from 'react';
import App from './';
describe('68381268', () => {
test('should pass', () => {
const wrapper = mount(<App nextAccent />);
let nextButton = wrapper.find('.button_next.accent').exists();
expect(nextButton).toBeTruthy();
});
});
测试结果:
PASS examples/68381268/index.test.jsx (8.76 s)
68381268
✓ should pass (34 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.734 s, estimated 10 s
我想测试类名“.button_next accent”是否存在。
<Button
className={`${this.props.nextAccent && "accent"} button_next`}
text={this.props.textNext}
icon={"iconnext"}
onClick={this.props.nextButtonClicked}
/>
我的测试
Then(/^Next button contains accent/, function () {
const wrapper = enzyme.mount(App);
let nextButton = wrapper.find('.button_next').exists(); //here i want to check both
.button_next and accent
return (expect(nextButton).to.be.equal(true));
//gave this a try
// FAILED: let nextButton = wrapper.find('.button_next .accent').exists();
// FAILED: let nextButton = wrapper.find('button_next accent').exists();
// FAILED: let nextButton = wrapper.find('.button_next accent').exists();
});
多个CSS类选择器之间没有空格。
例如
index.jsx
:
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<button className={`${this.props.nextAccent && 'accent'} button_next`}></button>
</div>
);
}
}
index.test.jsx
:
import { mount } from 'enzyme';
import React from 'react';
import App from './';
describe('68381268', () => {
test('should pass', () => {
const wrapper = mount(<App nextAccent />);
let nextButton = wrapper.find('.button_next.accent').exists();
expect(nextButton).toBeTruthy();
});
});
测试结果:
PASS examples/68381268/index.test.jsx (8.76 s)
68381268
✓ should pass (34 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 9.734 s, estimated 10 s