How to test the style inside the CSS class for React component using Jest and Enzyme?

Question

Consider in CSS,

.content
{
    width:500px;
    box-sizing: border-box;
}

I have added this css class inside react component as following

const Banner = () => {
   return (<div className="content">This is message content</div>);
}

How to write jest and enzyme test cases to ensure the 'box-sizing' with 'border-box' applied properly?

Notes: I can write the test case to ensure the ".content" class added to this element. But exactly, i need to write test case to ensure the value in 'box-sizing'.

user9760669 · Accepted Answer · 2019-12-26 17:36:00Z

1

I am not sure how to fix your issue, but keep in mind your test will not cover

* {
  box-sizing: border-box;
}

if you will defined somewhere alse.

From my perspective, it does not make sense to test styles, because we can not guaranty from the test perspective that element will look like we want to. So still you will need to open the browser and check your element works properly, but you are writing tests to avoid it.

answered Dec 26, 2019 at 17:36

user9760669

Sign up to request clarification or add additional context in comments.

Comments

alisasani · Accepted Answer · 2019-12-26 17:26:51Z

0

By adding this code to Banner.test.js file, it'll check if className called content have inline style property for box-sizing and is it equal to border-box or not. But it'll test only inline styles.

const banner = shallow(<Banner/>);
it("render propperely", () => {
expect(banner).toMatchSnapshot();
expect(banner.find(".content")
.get(0).props.style).toHaveProperty("box-sizing", "border-box");
  });

edited Dec 26, 2019 at 17:26

answered Dec 26, 2019 at 12:13

alisasani

3,1311 gold badge10 silver badges19 bronze badges

2 Comments

Mehdi LAMRANI Over a year ago

Please update your answer to provide context in plain english

Arun Vinoth PrecogTechnologies Over a year ago

Can you explain a little bit how this answer will solve the problem, instead of posting code-only answer.

Collectives™ on Stack Overflow

How to test the style inside the CSS class for React component using Jest and Enzyme?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related