好吧,我有一个名为<TestButton />
的组件。 <TestButton />
内部有两个语义UI反应组件,<Button />
和<Header>
。
基本上,点击<Button>
后,它会将display: none;
切换为<Header>
。
我想检查(我想了解)如何在点击<Header>
时断言display: none;
&#39; <Button>
。
TestButton.js
const TestButton = (props) => {
return (
<div id='test-button'>
<Header id='please-hide-me' size='huge'>Please Hide Me</Header>
<Button
onClick={
() => {
hiding = !hiding;
let findDOM = document.getElementById(searchForThisID);
if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; }
return hiding;
}
}
>
Sample Toggle
</Button>
</div>
);
};
我的单元测试基于How to test style for a React component attribute with Enzyme。它看起来像这样:
test(`
`, () => {
const wrapper = shallow(<TestButton />);
const button = wrapper.find('Button');
const header = wrapper.find('Header');
const headerStyle = header.get(0).style;
expect(headerStyle).to.have.property('display', '');
wrapper.find('Button').simulate('click');
expect(headerStyle).to.have.property('display', 'none');
}
);
但它有这个错误:
TypeError: Cannot read property 'have' of undefined
我该怎么办?
答案 0 :(得分:3)
您提供的代码中存在一些错误:
您不应该使用DOM元素的样式属性,因为React不管理它。将hidden
属性转换为state
代替。
我相信headerStyle
是样式对象的浅表副本。模拟单击后,它不会更新。您必须再次为样式对象查询元素。
to.have.property
无效Jest语法。它应该是toHaveProperty
。
请参阅此处更正的代码。如果您将以下内容粘贴到create-react-app
中,它应该可以正常工作。
<强> app.js 强>
import React, { Component } from 'react';
function Header(props) {
return <h1 style={props.style}>Header</h1>;
}
function Button(props) {
return <button onClick={props.onClick}>Click Me</button>;
}
export class TestButton extends React.Component {
constructor(props) {
super(props);
this.state = { hiding: false };
}
render() {
return (
<div>
<Header
id="please-hide-me"
style={{
display: this.state.hiding ? 'none' : '',
}}
>
Please Hide Me
</Header>
<Button
onClick={() => {
this.setState({
hiding: !this.state.hiding,
});
}}
>
Sample Toggle
</Button>
</div>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<TestButton />
</div>
);
}
}
export default App;
<强> app.test.js 强>
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import { TestButton } from './App';
it('renders without crashing', () => {
const wrapper = shallow(<TestButton />);
expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
'display',
'',
);
wrapper.find('Button').simulate('click');
expect(wrapper.find('Header').get(0).props.style).toHaveProperty(
'display',
'none',
);
});