好的,我有一个名为 <TestButton />
的组件. <TestButton />
里面有两个 Semantic UI React 组件,<Button />
和 <Header>
.
基本上,当 <Button>
单击,它切换 display: none;
至 <Header>
.
我想检查(我想学习)如何断言 <Header>
的 display: none;
什么时候<Button>
被点击。
测试按钮.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
我该怎么办?
最佳答案
您提供的代码中存在一些错误:
您不应该使用 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',
);
});
关于javascript - 如何使用 Jest + Enzyme 测试 React 组件的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48055712/