Question

我正在测试组件的CSS属性。例如，我需要检查

标记的默认'color'属性是否为黑色

我尝试使用props（）。style，但是如果样式不是内联的则无法使用。我也尝试过toHaveStyleRule（），但这也无济于事

//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');
});
});

我希望测试能够通过（因为段落的默认颜色确实是黑色）。

第一次测试失败，并显示以下消息：

No style rules found on passed Component

第二个失败并显示消息

TypeError: Cannot read property 'color' of undefined

如何使用酶和玩笑测试CSS属性？

0 个答案: