JEST STYLED COMPONENTS - toHaveStyleRuleはプロパティを見つけませんでした

Question

私は私のスタイルのコンポーネントをテストしようとしています。 したがって、私はjest-styled-componentsをインストールしました。

コンポーネントがクリック後に不透明度を変更するかどうかをテストしたかったのです。

toHaveStyleRuleで試しました。しかし、それは言う：

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ファイルには、次のようになりますので、ここで

Property not found: "opacity" 

は私のスタイル付きコンポーネントです

// 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から期待されるが、代わりに私が説明した問題を得ました。

誰かがヒントを持っていますか？

敬具

Answer 1

問題は、親コンポーネントがちょうどshallowを使用してレンダリングされたときClueAnswerが実際にレンダリングされないということです。 mountを代わりに使用すると、ClueAnswerが強制的にレンダリングされます。