Question

我想使用酶检查特定的CSS属性值。为组件设置样式-使用了情感CSS助手。

让我们假设下一种情况：

it('title has font-size 20px', () => {
  const titleCss = css`
    font-size: 20px;
  `;

  const mountedTitle = mountWithTheme(<h1 className={titleCss}>Title</h1>);

  expect(mountedTitle).toHaveStyleRule('font-size', '20px');
});

这里：

mountWithTheme-只是酶渲染方法的包装，但允许传递主题；
toHaveStyleRule是jest-emotion匹配项。

那行不通，我知道了

找不到属性：字体大小

如果您看开玩笑情绪example，就会发现那里使用了“样式化”包装器，因此创建了包装器组件，但使用“ css”辅助器却并非如此。

我还考虑过使用酶渲染助手来创建实际的html，但似乎cheerio包装器也无法访问css值。

Answer 1

如果您正在使用酶，请使用render方法。

import React from 'react';
import { render } from 'enzyme';
import Component from '.';

describe('test css', () => {
  it('test font size', () => {
    const wrapper = render(<Component />);
    expect(wrapper.find('h1')).toHaveStyleRule('font-size', '20px');
  });
});

如何测试React元素的特定CSS属性值？

1 个答案: