正確的單元測試方法反應組件

Question

我使用jest和enzyme來測試我的反應組件，它依賴於antd - 第三個反應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

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 

一個側面說明，我沒有在我的package.json有任何jest CONFIGS。

任何人都可以幫助我與這些。

非常感謝

Answer 1

Q1：我嘲笑了如下因爲單元測試要求我們 按鈕分離目標和模擬的任何其他依賴。那 是否正確？

目前，React單元測試的推薦方法是shallow rendering。它基本上呈現給定組件一個深度。如果我們淺顯地渲染你的Test組件，它會調用render方法的Test組件，但不是render方法的Button組件。即使Button是第三方組件和依賴項，我們也不需要嘲笑它。因爲我們沒有渲染它。但是，我們仍然可以看到它是否在組件樹中，並且它具有正確的道具。這實際上我們也會用嘲諷的方法來主張。然而，淺層渲染也有一些侷限性，但通常情況下，它在大多數場景下運行得非常好。

但是，你顯然可以模擬兒童並渲染整個組件。但是這是費時和問題的，至少在我的經驗中是這樣。

Q2：即使測試通過，我也得到以下警告。 我怎麼解決這個問題？

既然你傳爲React.createElement字符串作爲name，陣營認爲你想創建一個普通的HTML元素，而不是一個陣營的組成部分。但由於沒有HTML元素調用Button（區分大小寫）並且它不知道名爲htmlType的道具，因此您會得到這個unknown prop type warning。爲防止出現此警告，您可以停止將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); 
    } 
} 

如果您需要了解更多關於反應單元測試，我建議你去通過這個thread從反應討論論壇。

希望這會有所幫助！