React 测试 - 模拟函数答案

【问题标题】：React testing - mock functionReact 测试 - 模拟函数
【发布时间】：2020-08-25 15:15:56
【问题描述】：

以下是输入框组件。我正在测试句柄输入功能。


function PostForm(props) {
    const[ myPost, setMyPost ] = useState( { reply:""} )
    
        
    function updatePost(e){
        e.preventDefault();
        let post = { reply: e.target.value }
        setMyPost(post)
    }

async function handleSubmit(e){   
        e.preventDefault();
        props.submitForm(e);    //this is the callback function onclick the form submitForm is set 'false'
        
        if( myPost.reply != ''){

        let postData = {
            // some data here 
        }
            
        const apiReply = await fetch('/api/reply', 
            {   fetch headers
                },
                body: JSON.stringify(postData)
          }).then( result=>result.json()) ; 

return (
        <div>
            <form >
                
                <textarea type="textarea" name="" id="message" value={myPost.reply} onChange={updatePost} placeholder="Your Message" cols="100" rows="5" ></textarea><br/>
                
                <button type="submit" data-testid="submitButton" onClick={handleSubmit}>Submit</button>                 
            </form>
        </div>
    )
}

export default PostForm

我正在尝试测试 handleSubmit 函数。以下是我写的测试。

describe("handle submit", () => {
    describe("with empty query", () => {
        it("does not trigger request search function", () => {
            const handleSubmit = jest.fn();

            const {queryByTestId} = render(<PostForm />)
            fireEvent.click(queryByTestId('submitButton'))
            expect(handleSubmit).not.toHaveBeenCalled()
        })
    })

    describe("with data inside query", () => {
        it("triggers handlesubmit fn", () => {
            const handleSubmit = jest.fn();

            const {queryByTestId} = render(<PostForm />)
            const searchInput = queryByPlaceholderText('Your Message')
            fireEvent.change(searchInput, {target: {value: "test"}})

            fireEvent.click(queryByTestId('submitButton'))
            expect(handleSubmit).toHaveBeenCalled()
        })
    })
})

两个测试都失败了。控制台显示“props.submitForm 不是函数”。未经测试，此组件可以正常工作。这个测试有什么问题。

【问题讨论】：

标签： reactjs unit-testing react-testing-library

【解决方案1】：

PostForm 组件将submitForm 函数作为道具，但是当您在测试中渲染组件时，您没有传递任何道具。而是这样做：

const submitFormMock = jest.fn();

const {queryByTestId} = render(<PostForm submitForm={submitFormMock} />)

然后你可以检查submitFormMock是否被调用。

【讨论】：

这很好！有效。我需要检查组件中的 props 测试。