反应测试 - 模拟功能

Question

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


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 不是函数”。未经测试，该组件工作正常。这个测试有什么问题。

Answer 1

PostForm 组件将 submitForm 函数作为 prop，但在测试中渲染组件时没有传递任何 props。相反：

const submitFormMock = jest.fn();

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

然后你可以检查 submitFormMock 是否被呼叫。

反应测试 - 模拟功能

React testing - mock function

unit-testing

reactjs

react-testing-library