JEST STYLED COMPONENTS - toHaveStyleRule n'a pas trouvé de propriété

Question

J'essaie de tester mes composants de style. Par conséquent, j'ai installé jest-styled-components.

Je voulais tester, si mon composant change l'opacité après le clic.

Je l'ai essayé avec toHaveStyleRule. Mais il est dit:

Property not found: "opacity" 

Voici donc mon composant Styled:

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 }; 

Et je l'importer ici:

// 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; 

Mon fichier setupTest.js ressemble à ceci:

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

Et enfin mon fichier de test:

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

Le débogage de clueWrapper.debug() ressemble à ceci:

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

Je me attendais de toHaveStyleRule pour obtenir la valeur actuelle de l'opacité, mais j'ai obtenu le problème décrit.

Quelqu'un at-il un indice?

Meilleures salutations

Answer 1

Le problème est que ClueAnswer pas vraiment rendu lorsque le composant parent est rendu juste en utilisant shallow. En utilisant mount à la place devrait également forcer ClueAnswer à être rendu