Question

我正在尝试测试我的样式组件。因此我安装了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获取不透明度的当前值，但我得到了所描述的问题。

任何人都有提示吗？

祝你好运

Answer 1

问题是当父组件仅使用ClueAnswer呈现时，shallow没有真正呈现。使用mount代替也应强制ClueAnswer呈现

JEST STYLED COMPONENTS - toHaveStyleRule找不到属性

1 个答案: