JEST STYLOWANE KOMPONENTY - toHaveStyleRule nie znalazła właściwości - reactjs, jestjs, enzym, stylizowane komponenty

Próbuję przetestować moje stylizowane komponenty. Dlatego zainstalowałem jest-styled-components.

Chciałem przetestować, czy mój składnik zmienił krycie po kliknięciu.

Próbowałem tego toHaveStyleRule. Ale mówi:

Property not found: "opacity"

Oto mój stylowy komponent:

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

I importuję go tutaj:

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

Mój setupTest.js plik wygląda następująco:

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

I na koniec mój plik testowy:

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

Debugowanie clueWrapper.debug() wygląda tak:

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

Spodziewałem się od toHaveStyleRule aby uzyskać aktualną wartość nieprzezroczystości, ale zamiast tego mam opisany problem.

Czy ktoś ma podpowiedź?

Z poważaniem

Odpowiedzi:

1 dla odpowiedzi № 1

Problemem jest ClueAnswer naprawdę nie jest renderowany, gdy komponent nadrzędny jest renderowany po prostu używając shallow. Za pomocą mount zamiast tego powinien również wymusić ClueAnswer do oddania

---