React - 酶测试 - 如何在模拟点击后检查 class

Question

我是 React 酶测试的新手。我想在单击按钮后检查 class 名称，但对于酶浅包装纸，我变得空 class。

Button.tsx

import React from 'react';
import style from './styles.module.scss';

export interface ButtonPropTypes {
  title?: string;
}

const Button = ({ title }: ButtonPropTypes) => {
  const [active, setActive] = useState(false);

  return (
    <div
      className={cx(style.container, {
        [style.active]: active,
      })}
      onClick={() => setActive(!active)}
    >
      {title}
    </div>
  );
}

export default Button;

Button.test.tsx

import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';

import Button from './index';

let wrapper: ShallowWrapper;

beforeEach(() => {
  wrapper = shallow(<Button titie="Toggle Me"/>);
});

describe('<Button />', () => {
  it('should be defined', () => {
    expect(Button).toBeDefined();
  });

  it('should match snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('should button toggle work', () => {
    wrapper.find('div').first().simulate('click');
    console.log(wrapper.debug()); // log looks like "<div class=""> ... </div>"
    expect(wrapper.find('.active').length).toBe(0);
  });
});

请告诉我如何通过切换操作检查实际包装器 class 是否具有活动字符。

干杯！

Answer 1

确保您的项目在 jest.config.js 文件中注入 css class 添加以下配置的名称。

moduleNameMapper: {
  "^.+\.(css|less|scss)$": "identity-obj-proxy"
}

在您的测试文件中，您可以检查 class 名称，如下所示。

...

it('should toggle action work', () =>. {
    wrapper.simulate('click');
    expect(wrapper.find('.active').length).toBe(1);
    
    wrapper.simulate('click');
    expect(wrapper.find('.active').length).toBe(0);
});

...

祝你好运！

React - 酶测试 - 如何在模拟点击后检查 class

React - Enzyme Test - How to check class after simulate a click

typescript

reactjs

jestjs

enzyme