时间戳

首页 > 解决方案 > 如何开玩笑地检查消极和积极的情况？

javascript - 如何开玩笑地检查消极和积极的情况？

问题描述

我正在 Jest 中为 React 组件之一编写单元测试但是在这两种情况下，我都得到了错误的响应。

foo.js：

import React from 'react';

function Foo({ data }) {
  if (data === true) {
    return (
      <div className="hello" id="helloId">
        Hello
      </div>
    );
  } else {
    return (
      <div className="hi" id="hiId">
        Hi
      </div>
    );
  }
}

export { Foo };

foo.spec.js：

describe('check foo Component', () => {
  describe('without data', () => {
    const mount = shallow(<Foo data={false} />);
    it('data is false', () => {
      expect(mount.contains('hello')).toBeNull();
    });
  });
  describe('without data', () => {
    const mount = shallow(<Foo data={true} />);
    it('data is true', () => {
      expect(mount.contains('hello')).toBeNull();
    });
  });
});

在这两个测试用例中，我都错了。它必须在一种情况下为真，在另一种情况下为假。在控制台中出现错误

仅用于在单个节点上运行。找到了 0 个。

如果未定义任何元素。

如何为这两种场景编写测试用例？

标签： javascriptreactjsunit-testingjestjsenzyme

解决方案

这是单元测试解决方案：

foo.tsx：

import React from 'react';

function Foo({ data }) {
  if (data === true) {
    return (
      <div className="hello" id="helloId">
        Hello
      </div>
    );
  } else {
    return (
      <div className="hi" id="hiId">
        Hi
      </div>
    );
  }
}

export { Foo };

foo.test.tsx：

import { Foo } from './foo';
import React from 'react';
import { shallow } from 'enzyme';

describe('check foo Component', () => {
  it('data is false', () => {
    const wrapper = shallow(<Foo data={false} />);
    expect(wrapper.contains('Hi')).toBeTruthy();
  });
  it('data is true', () => {
    const wrapper = shallow(<Foo data={true} />);
    expect(wrapper.contains('Hello')).toBeTruthy();
  });
});

带有覆盖率报告的单元测试结果：

 PASS  src/stackoverflow/50540892/foo.test.tsx
  check foo Component
    ✓ data is false (10ms)
    ✓ data is true (1ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 foo.tsx  |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.253s, estimated 9s

源代码：https ://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/50540892

推荐阅读