JEST STYLED COMPONENTS - toHaveStyleRule 没有找到属性

Posted 2023-03-16

【中文标题】JEST STYLED COMPONENTS - toHaveStyleRule 没有找到属性

【英文标题】：JEST STYLED COMPONENTS - toHaveStyleRule didn't find property

【发布时间】：2018-03-14 23:48:35

【问题描述】：

我正在尝试测试我的样式化组件。 因此我安装了jest-styled-components。

我想测试一下，如果我的组件在点击后改变了不透明度。

我用toHaveStyleRule 试过了。但它说：

Property not found: "opacity"

这是我的样式化组件：

const ClueAnswer = styled.h3`
  transition: opacity 1s;
  transition-timing-function: $props => props.reveal ? 'ease-out' : 'ease-in' ;
  opacity: $props => props.reveal ? 1 : 0;
  cursor: pointer;
`;
ClueAnswer.displayName = 'ClueAnswer';
export  ClueAnswer ;

我在这里导入它：

// Vendor
import React,  Component  from 'react';
// Styled Components
import 
  ClueAnswer,
  ClueWrapper
 from '../style/general';

class Clue extends Component 
  constructor(props) 
    super(props);

    this.state = 
      reveal: false
    ;
  

  render() 
    const  clue  = this.props;

    return (
      <ClueWrapper>
        <h3>Difficulty:  clue.value </h3>
        <hr />
        <p> clue.question </p>
        <hr />
        <ClueAnswer
          reveal= this.state.reveal 
          onClick= () => this.setState(prevState =>  return  reveal: !prevState.reveal  ) > clue.answer </ClueAnswer>
      </ClueWrapper>
    );
  


export default Clue;

我的setupTest.js 文件如下所示：

// Polyfill
import raf from './polyfill';
// Vendor
import  configure  from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-styled-components';

configure( adapter: new Adapter() );

最后是我的测试文件：

// Vendor
import React from 'react';
import  shallow  from 'enzyme';
// Component
import Clue from './clue';
// Fixtures
import  clue  from '../data/fixtures';

const props =  clue ;

describe('Clue Component', () => 
  const clueWrapper = shallow(<Clue  ...props  />);

  describe('and behavior on click', () => 
    const ClueAnswer = clueWrapper.find('ClueAnswer');
    const revealBeforeClick = clueWrapper.state('reveal');
    let revealAfterClick;

    beforeAll(() => 
      ClueAnswer.simulate('click');
      revealAfterClick = clueWrapper.state('reveal');
    );

    it('toggles reveal state on click', () => 
      expect(revealBeforeClick).not.toBe(revealAfterClick);
    );

    it('changes the opacity on click', () => 
      console.log(clueWrapper.debug());
      console.log(ClueAnswer.props());
      expect(ClueAnswer).toHaveStyleRule('opacity', 1);
    );
  );
);

clueWrapper.debug()的调试如下：

<styled.div>
    <h3>
      Difficulty:
      200
    </h3>
    <hr />
    <p>
      q one
    </p>
    <hr />
    <ClueAnswer reveal=true onClick=[Function]>
      a one
    </ClueAnswer>
  </styled.div>

我希望从 toHaveStyleRule 获得不透明度的当前值，但我得到了所描述的问题。

有人有提示吗？

最好的问候

【问题讨论】：

您是否尝试过自己测试ClueAnswer。我认为问题在于，shallow 不会渲染子组件，而只会渲染传入的组件。那么您可以尝试使用shallow(<ClueAnswer/>) 或在您的示例中使用mount 而不是“shallow”。

@AndreasKöberle 非常感谢！你完全正确。我只是忘记了浅不安装子组件。我现在改为使用“mount”。它像我预期的那样工作。

【参考方案1】：

问题是当父组件仅使用shallow 渲染时，ClueAnswer 并没有真正渲染。改用mount 还应该强制渲染ClueAnswer