1

我想使用酶检查特定的 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 值。

4

1 回答 1

0

如果您正在使用酶，请使用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');
  });
});
于 2019-11-22T16:05:53.693 回答