0

I'm testing the css attributes of a component. For instance, I need to check if the default 'color' attribute of a <p> tag is black

I tried using props().style but it doesn't work if styling is not inline. I also tried toHaveStyleRule() but it also doesn't help

//imports----------------------------------------------
import React from 'react';
import {shallow,configure,mount,render} from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';
import "jest-styled-components";
//-----------------------------------------------------

configure({adapter: new Adapter()});

//-----------------------------------------------------

describe ('Checking if default color of paragraph is black',() =>{

it("doesn't work",()=>{
  expect(
         mount(<p>Lorem Ipsum</p>).find('p')
      ).toHaveStyleRule('color','black');
});

it("also doesn't work",()=>{
  expect(
        mount(<p>Lorem Ipsum</p>).find('p').props().style.color
      ).toEqual('black');
});
});

I expect that the test should pass (as default color of paragraph is indeed black).

The first test fails with message:

No style rules found on passed Component

The second one fails with message

TypeError: Cannot read property 'color' of undefined
Abhay Aravinda
  • 878
  • 6
  • 17
  • This seems like a duplicate of https://stackoverflow.com/questions/40795850/how-to-test-style-for-a-react-component-attribute-with-enzyme. Try using `get` to get the ReactElement and ask it for the its style – kidney Jun 25 '19 at 10:57
  • @kidney I tried expect(mount(

    Lorem Ipsum

    ).find('p').get(0).style.color).toEqual('black'); But it says it cannot read color of undefined     – Abhay Aravinda Jun 25 '19 at 11:08
  • Ok, I tried it in my tests, do `instance()` instead of `get(0)`. `get` returns a ReactElement, `instance` returns the actual DOM element, which has the `style` property. – kidney Jun 25 '19 at 12:42
  • @kidney Thanks. Could you please give the complete line code? `expect(mount(

    Lorem Ipsum

    ).find('p').instance().style.color).toEqual('black')` gives the error Expected value to equal: "black" Received: ""     – Abhay Aravinda Jun 25 '19 at 13:15
  • Now it seems to be a problem of the style not being applied. Are you using a CSS class or are you setting the style directly? I think I read somewhere that Enzyme does not apply CSS classes when it would have to load them from a separate file... Also, it is logical that `

    Lorem Ipsum

    ` won't have color black, there is no style definition here...     – kidney Jun 25 '19 at 13:21
  • @kidney I'm using a component that calls a component that calls a css class. Any work around? – Abhay Aravinda Jun 25 '19 at 13:24
  • Then why don't you just check for the CSS class instead of comparing the styles? – kidney Jun 25 '19 at 13:25
  • @kidney Yeah. Will do that. Hadn't noticed the classes – Abhay Aravinda Jun 25 '19 at 13:30
  • @kidney. Btw, just learned that you can use the getComputedStyle() to calculate css derived from classes. – Abhay Aravinda Jun 27 '19 at 09:36

0 Answers0