How can I test React component's style with Jest + Enzyme?
There are a few mistakes in your provided code:
You should not be using DOM element's style property because React does not manage it. Shift the
hidden
property into thestate
instead.I believe
headerStyle
is a shallow copy of the style object. After you simulate click, it does not get updated. You will have to query the element again for the style object.to.have.property
is not valid Jest syntax. It should betoHaveProperty
.
Please refer to the corrected code here. If you paste the following into create-react-app
, it should just work.
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',
);
});
notalentgeek
Updated on July 20, 2022Comments
-
notalentgeek almost 2 years
Alright I have a component called
<TestButton />
. Inside the<TestButton />
there are two Semantic UI React component,<Button />
and<Header>
.Basically, when the
<Button>
is clicked, it togglesdisplay: none;
to<Header>
.I want to check (I want to learn) on how to assert
<Header>
'sdisplay: none;
when<Button>
is clicked.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> ); };
My unit test is based on How to test style for a React component attribute with Enzyme. It looks like this:
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'); } );
But it has this error:
TypeError: Cannot read property 'have' of undefined
What should I do?
-
notalentgeek over 6 yearsIt solves my problem! Thanks. Is there anyway I can have the TestButton just as a
const
not a class? I learned that most ReactJS devs only useconst
as a component. Additionally: is using in-line style a good practice is ReactJS? -
Yangshun Tay over 6 yearsNope, you need it as a class because you need to store
state
. Pure vanilla React inline styling is bad, but if you use stuff like CSS modules and jss, they do some post-processing to extract the inline styles out into stylesheets, which will be better.