单元测试反应组件的正确方法

Question

我正在使用jest和enzyme来测试我的react组件，它依赖于antd --一个第三个react库。为了说明性的目的，我产生的最低限度的代码，是公平的，以显示我的问题。

请参阅我的test组件如下：

import React from 'react';
import { Button } from 'antd';

function Test({onSubmit}) {
  return (
          <div>
           <Button htmlType="submit" type="primary" />
          </div>
         );
}

export default Test;

Q1:我按照下面的方式模拟Button，因为单元测试要求我们隔离目标并模拟任何其他依赖项。对吗？

__mocks__
  antd.js

antd.js

import mockComponent from '../mockComponent';

const list = [
  'Form',
  'Input',
  'Button',
  'Spin',
  'Icon'
];

const mockups = list.reduce((prev, next) => {
  prev[next] = mockComponent(next);
  return prev;
}, {});

mockups.Form.Item = mockComponent('Form.Item');

export const Form = mockups.Form;
export const Input = mockups.Input;
export const Button = mockups.Button;
export const Spin = mockups.Spin;
export const Icon = mockups.Icon;

mockComponent.js

import React from 'react';

export default function mockComponent (name) {
  return props => React.createElement(name, props, props.children);
}

Q2.即使测试通过，我也收到了以下警告。我怎么解决这个问题呢？

test.spec.js

import React from 'react';

import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';

import Test from '../components/question';

describe('mount test', () => {
  let wrapper;

  let props;
  let mountedLogin;

  const test = () => {
    if (!mountedLogin) {
      mountedLogin = mount(<Test {...props} />);
    }

    return mountedLogin;
  };

  beforeEach(() => {
    mountedLogin = null;
  });

  it('always render test as the root', () => {
    const divs = test().find('div');
    expect(divs.length).toBeGreaterThan(0);
  });
});

警告

 console.error node_modules/fbjs/lib/warning.js:36
 Warning: Unknown prop `htmlType` on <Button> tag. Remove this prop from the 
 element. For details, see
    in Button (created by Unknown)
    in Unknown (created by Test)
    in div (created by Test)
    in Test (created by WrapperComponent)
    in WrapperComponent

顺便提一句，我没有任何jest吐露在我的package.json。

有人能帮我解决这个问题吗。

非常感谢

Answer 1

Q1: I模拟Button如下所示，因为单元测试要求我们隔离目标并模拟任何其他依赖项。是这样吗？

目前，反应单元测试的推荐方法是浅渲染。它基本上将给定的组件呈现为一个层次深的。如果我们简单地呈现您的Test组件，它将调用Test组件的render方法，而不是Button组件的render方法。即使Button是第三方组件和依赖项，我们也不需要模拟它。因为我们没有渲染它。但是，我们仍然能够看到它是否在组件树中，它是否得到了正确的支持。从本质上讲，这也是我们将使用的嘲弄方法所断言的。然而，浅层渲染也有很小的局限性，但通常情况下，它能很好地工作在大多数场景中。

但是，您显然可以模拟子组件并呈现整个组件。但这很费时，也有问题，至少我的经验是这样的。

Q2:，我收到了以下警告，即使测试通过了。我怎么才能解决这个问题？

由于您将字符串作为name传递给React.createElement，因此React认为您希望创建一个普通的React.createElement元素，而不是React组件。但是，由于没有一个名为Button (区分大小写的)的HTML元素，而且它不知道名为htmlType的道具，所以您可以得到这个未知支柱式警告。要防止此警告，可以停止将props传递给React.createElement，也可以将模拟组件传递给React.createElement而不是name字符串。

import React from 'react';

function Mock(){
  retun (<div/>);
}

export default function mockComponent (name) {
  return props => {
    return React.createElement(Mock, {...props, name}, props.children);
  }
}

如果您需要阅读更多关于react单元测试的内容，我建议您从react讨论论坛了解这个线程。

希望这能有所帮助！