Why Enzyme not load style from React component?

Question

I was trying to test my component style with Jest and Enzyme. I'm using TailwindCSS as my CSS framework and non ejected create-react-app. So here is my component:

import React from 'react'
import './tailwind.css' // the tailwind css

export function Alert({ children, className, icon, ...resProps }) {
  return (
    <div data-testid="qa-alert" className="my-2 p-3 text-lg bg-red-200 rounded-md flex items-center justify-center} {...resProps}>
      {icon && React.createElement(icon, { className: 'mr-2 text-xl' })}
      {children}
    </div>
  );
}

I want to test that the background color is red (bg-red-200 or #fed7d7) by using the getComputedStyle method, here is my test:

it('Should have red background color', () => {
      const wrapper = mount(<Alert />);
      const alert = wrapper.find('div');
      const style = getComputedStyle(alert.getDOMNode());
      console.log(style);

      expect(style.backgroundColor).toBe('#fed7d7');
    });

but the test fails because I don't get the background style. The received value is empty string. and the log of style is

CSSStyleDeclaration {
      '0': 'display',
      _values: { display: 'block' },
      _importants: { display: '' },
      _length: 1,
      _onChange: [Function]
    }

how can i get the style?

user3335966 · Accepted Answer · 2020-09-25 05:04:13Z

0

You can try to use jest-dom method toHaveStyle():

expect(alert).toHaveStyle({backgroundColor: '#fed7d7'});

answered Sep 25, 2020 at 5:04

user3335966

2,7494 gold badges32 silver badges33 bronze badges

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

Comments

Vu Luu · Accepted Answer · 2020-09-30 04:01:14Z

0

You can archive it by update:

The selector wrapper.find('div') is too generic. Use wrapper.find('div[data-testid="qa-alert"]') or wrapper.find({'data-testid': "qa-alert"]})
use Enzyme hasClass to test

Example:

       it('Should have red background color', () => {
        const wrapper = mount(<Alert />);
        const alert = wrapper.find({'data-testid': "qa-alert"]});
        expect(alert.hasClass('bg-red-200')).toEqual(true);
       });

answered Sep 30, 2020 at 4:01

Vu Luu

8005 silver badges16 bronze badges

2 Comments

Salma Over a year ago

I dont need the className. I need the computed style

Vu Luu Over a year ago

I see. Testing of CSS is not a best practice. For better testing you should try to use testing via snapshots and visual testing

Collectives™ on Stack Overflow

Why Enzyme not load style from React component?

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