私は私のスタイルのコンポーネントをテストしようとしています。 したがって、私はjest-styled-components
をインストールしました。JEST STYLED COMPONENTS - toHaveStyleRuleはプロパティを見つけませんでした
コンポーネントがクリック後に不透明度を変更するかどうかをテストしたかったのです。
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
から期待されるが、代わりに私が説明した問題を得ました。
誰かがヒントを持っていますか?
敬具
これで 'ClueAnswer'を自分でテストしようとしましたか?問題は、浅い部分が子コンポーネントをレンダリングせず、渡されるコンポーネントだけです。あなたの例で 'shallow( )'で試してみるか、 '' ''の代わりに '' mount'を使うことができます。 –
@AndreasKöberleありがとうございました!あなたはまったく正しい。私は単に、浅いと子コンポーネントをマウントしないことを忘れていました。私は今代わりに "マウント"を使用します。私は期待どおりに動作します。 – codelifter