ユニットテスト反応コンポーネントへの正しい方法

Question

jestとenzymeを使用して、antd - 第3反応UIライブラリに依存する反応コンポーネントをテストしています。 説明のために、私は質問を表示するのに十分な公正な最小限のコードを生成します。

次のように私のtestコンポーネントを参照してください：

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

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

export default Test; 

Q1を：私はユニットテストは、対象を隔離し、他の依存関係をモックアップするために私たちを必要とするため、以下のようにボタンをモックアップ。 これは間違いありませんか？

__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サイドノート

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 

を警告

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); 
    }); 
}); 

、私は私のpackage.json内の任意のjestのconfigsを持っていません。

誰でも私にこれらを助けることができます。

感謝

Answer 1

Q1：私は以下のようにユニットテストは に私たちを必要とするためのボタンをモックアップは、ターゲットを分離し、他の依存関係をモックアップ。 は正しいですか？

現在、リアクタユニットテストの推奨アプローチはshallow renderingです。基本的には、指定されたコンポーネントを1レベル深くレンダリングします。 Testコンポーネントを浅くレンダリングすると、renderメソッドがTestコンポーネントと呼ばれますが、コンポーネントのrenderメソッドは呼び出されません。 Buttonは第三者のコンポーネントと依存関係ですが、私たちはそれを嘲笑する必要はありません。私たちはそれをレンダリングしないからです。しかし、それでも、コンポーネントツリーにあるかどうか、正しい小道具があるかどうかを確認することができます。これは基本的に私たちも嘲笑的なアプローチで主張するものです。しかし、浅いレンダリングにはほとんど制限がありませんが、通常、ほとんどのシナリオで非常にうまく動作します。

しかし、あなたは明らかに子供をモックし、コンポーネント全体をレンダリングすることもできます。しかし、少なくとも私の経験では、時間がかかり問題になる。

質問2：テストに合格しても、次の警告が表示されます。どうすればいいですか？ 私はそれを解決しますか？

あなたはReact.createElementためnameとして文字列を渡すので、あなたは、通常のHTML要素を作成したいと思うし、コンポーネントを反応しない反応します。しかし、Button（大文字と小文字が区別されます）というHTML要素の呼び出しがなく、htmlTypeと呼ばれる小道具を知らないので、これはunknown prop type warningとなります。この警告が表示されないようにするには、propsをReact.createElementに渡すか、模擬コンポーネントをname文字列の代わりにReact.createElementに渡します。

import React from 'react'; 

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

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

あなたはについての詳細を読むために必要がある場合は、ユニットテストを反応させ、私はあなたがフォーラムを議論反応からこのthreadを通過することをお勧めします。

希望すると便利です。