陣營與酶

Question

組件的測試，我有這樣的組件：

component.js

import React from "react"; 
import PropTypes from "prop-types"; 

const Test = ({ text }) => (
<div> 
    {text.split("\n").map((item, key) => { 
    return (
    <span key={key}> 
     {item} 
     <br /> 
    </span> 
    ); 
    })} 
    </div> 
); 

Test.propTypes = { 
text: PropTypes.string.isRequired 
}; 

export default Test; 

我怎樣寫元件測試使用酶對此做出何種反應成分？我是新來的反應和酶。任何幫助都會非常可觀。

Answer 1

這可能是一個測試用摩卡：

import {shallow} from 'enzyme' 
import assert from 'assert' 
import Test from './Test' 

describe('component Test',() => { 
    it('should show a span for each line of "text" prop',() => { 
    const text = `foo 
    bar 
    ` 
    const wrapper = shallow(<Test text={text} />) 
    const spans = wrapper.find('span') 
    assert.equal(spans.length, 2) 
    assert.equal(spans.at(0).text(), 'foo') 
    assert.equal(spans.at(1).text(). 'bar') 
    }) 

    it('should throw if "text" prop is not provided',() => { 
    assert.throws(() => { 
     shallow(<Text />) 
    }) 
    }) 
}) 

Answer 2

下面是使用酶+玩笑耍賴採取測試DOM的example（從笑話web site）：

// __tests__/CheckboxWithLabel-test.js 

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

test('CheckboxWithLabel changes the text after click',() => { 
    // Render a checkbox with label in the document 
    const checkbox = shallow(
    <CheckboxWithLabel labelOn="On" labelOff="Off" /> 
); 

    expect(checkbox.text()).toEqual('Off'); 

    checkbox.find('input').simulate('change'); 

    expect(checkbox.text()).toEqual('On'); 
}); 

我建議你去，雖然我給的鏈接 - 它包含了測試的很好的例子發生反應，用玩笑成分+酶。