使用 Enzyme Jest 查找 HTML 元素测试 React 组件答案

【问题标题】：Testing React component with Enzyme Jest finding HTML element使用 Enzyme Jest 查找 HTML 元素测试 React 组件
【发布时间】：2020-02-06 10:29:58
【问题描述】：

我有一个名为 Typography 的组件，它采用 variant 属性并相应地呈现一个元素。

Typography.js

为了简洁省略了很多

import { StyledH1, ... } from './Typography.styles';

const variantMapping = {h1: StyledH1, ...};

const Typography = ({ children, ...props }) => {
  const Component = variantMapping[props.variant] ? variantMapping[props.variant] : 'span';

  return <Component {...props}>{children}</Component>;
};

所以我尝试了多种方法来获得有效的测试。现在我正在尝试传递 variant="h1"，取回以下标记 <h1 class="..styled component what nots...">...</h1> 并验证 <h1> 渲染

Typography.spec.js

import { mount } from 'enzyme';
import Typography from '.';

describe('<Typography />', () => {
  it('renders H1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper;
    console.log(elem.debug());
    expect(wrapper.find('h1')).toEqual(true);
  });
});

所以运行调试器我回来了

console.log components/Typography/Typography.spec.js:9
    <Typography variant="h1" bold={false} transform={{...}} small={false}>
      <Typographystyles__StyledH1 variant="h1" bold={false} transform={{...}} small={false}>
        <StyledComponent variant="h1" bold={false} transform={{...}} small={false} forwardedComponent={{...}} forwardedRef={{...}}>
          <h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />
        </StyledComponent>
      </Typographystyles__StyledH1>
    </Typography>

所以我更改了元素变量以找到 h1 元素 const elem = wrapper.find('h1');

调试器返回

console.log components/Typography/Typography.spec.js:9
<h1 transform={{...}} className="Typographystyles__StyledH1-sc-1n6ui1k-0 bvGdAG" />

我不确定这是否是正确的方法，只是尝试获得至少 1 个合理通过的测试。

此时我写的每条expect 语句都会返回错误或失败

expect(elem).to.have.lengthOf(1); TypeError: Cannot read property 'have' of undefined
expect(elem.contains('h1')).to.equal(true); TypeError: 无法读取未定义的“相等”属性
expect(elem.contains('h1')).toEqual(true);expect(received).toEqual(expected) // 深度相等

尝试了更多选项，但没有任何效果。任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

所以看起来我在expect 上使用酶的断言没有设置。进一步阅读 Enzyme 文档后，我的设置仅使用适配器，以便更轻松地渲染/安装组件。我没有能力使用文档中的酶断言，因为它们没有安装。为了回答这个特殊问题，我必须使用 Jest 断言。

describe('<Typography />', () => {
  it('renders h1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper.find('h1');
    expect(elem.length).toBe(1);
  });
});

https://jestjs.io/docs/en/expect

【讨论】：

【解决方案2】：

酶全域安装：

.find(selector) => ReactWrapper 返回一个包装器，而不是布尔值

it('renders H1', () => {
  const wrapper = mount(<Typography variant="h1" />);
  const elem = wrapper;
  console.log(elem.debug());
  expect(elem.find('h1')).to.have.length(1);
});

.contains(nodeOrNodes) => boolean - 这是common gotchas 的链接，特别是它需要一个反应元素，而不是 html 元素或 CSS 选择器

【讨论】：

感谢您的回复，不幸的是这也不起作用。调试问题中出现错误的第一个调试器语句：TypeError: Cannot read property 'have' of undefined
我明白了。无论如何，我只是主要使用开玩笑的匹配器。 jest-extended 也是一个不错的软件包。它帮助我完成了大部分测试需求。