使用 Jest 在 React 中测试输入数据答案

【问题标题】：Testing Input Data in React using Jest使用 Jest 在 React 中测试输入数据
【发布时间】：2020-11-04 21:53:31
【问题描述】：

我在 React 中创建了一个简单的表单，我正在使用 Jest 来练习我的单元测试。我目前正在测试将输入值呈现到 DOM 中的表单组件，并且由于 TypeError：无法读取未定义的属性“firstName”而一直失败。我的目标是让所有输入标签都能通过。

FormComponent.js

import React from 'react'

const FormComponent = (props) => {
return (
    <main>

        <form>
            <input type="text" value = {props.data.firstName}  name = "firstName" placeholder = "First Name" onChange = {props.handleChange} /> <br/>
            <input type="text" value = {props.data.lastName}  name = "lastName" placeholder = "Last Name" onChange = {props.handleChange} /> <br/>
            <input type="text" value = {props.data.age}  name = "age" placeholder = "Age" onChange = {props.handleChange} /> <br/>
            <input type="text" value = {props.data.location}  name = "location" placeholder = "Location" onChange = {props.handleChange} /> <br/>
            <br/>
            <label>
                <input 
                    type = "radio"
                    value = "Male"
                    name = "gender"
                    checked = {props.data.gender === "Male"}
                    onChange = {props.handleChange}
                    /> Male
                    <br/>
            </label>
            <label>
                <input 
                    type = "radio"
                    value = "Female"
                    name = "gender"
                    checked = {props.data.gender === "Female"}
                    onChange = {props.handleChange}
                    /> Female
                    <br/>
            </label>

            <br />
            <br />
            
            <button>Submit</button>
            <br />
            <br />
            <h1>Entered information: </h1>
            <h3>Your name: {props.data.firstName} {props.data.lastName} </h3>
            <h3>Your age: {props.data.age} </h3>
            <h3>Gender: {props.data.gender} </h3>
            <h3>Location: {props.data.location} </h3>
                   
        </form>
    </main>
  )
}


export default FormComponent

FormComponent.test.js

import React from 'react'
import FormComponent from './FormComponent'
import Enzyme,{
configure,
shallow,
mount,
render } from 'enzyme'
import Adapter from "enzyme-adapter-react-16"

Enzyme.configure({adapter: new Adapter() });

global.React = React;
global.Enzyme = Enzyme;
global.shallow = shallow;
global.render = render;
global.mount = mount;

describe("Form Input Data", () => {
    it("should render the first name", () => {
        const component = shallow(<FormComponent 
          name = "firstName" label = "First Name"  />)
        const label = component.find('label')
        expect(label).toHaveLength(1);
        expect(label.prop('htmlFor')).toEqual('firstName');
        expect(label.text()).toEqual('First Name');
    
        const input = component.find('input');
        expect(input).toHaveLength(1)
        expect(input.prop('type')).toEqual('text')
        expect(input.prop('name')).toEqual('firstName')
        expect(input.prop('id')).toEqual('firstName')
    })
})

测试结果

这是我第一次使用 Jest 在 React 中进行测试，我不知道如何让我的组件通过。我非常感谢所有可能的解决方案。谢谢。

【问题讨论】：

在您的测试中没有 data 作为道具传递给 FormComponent。
@SamR。 - 如果没有作为道具传递的数据，我需要在我的代码中修复哪个位置才能读取“firstName”属性？我很困惑。
您正在阅读来自data 对象的firstName、lastName、age 和location。这些需要像 <FormComponent data={{ firstName: '', lastName: '', ... }} /> 在您的测试中一样通过。
知道了。谢谢。

标签： javascript reactjs unit-testing testing jestjs

【解决方案1】：

问题是我从来没有从 props 中传递数据，我也不知道该怎么做。这是解决方案：

describe("Form Input Data", () => {
    it("should render the first name", () => {
        const component = shallow(<FormComponent 
          data = {{firstName: ''}}  />)
        const input = component.find('input').first();
        expect(input).toHaveLength(1)
        expect(input.prop('type')).toEqual('text')
        expect(input.prop('name')).toEqual('firstName')
    })
})

【讨论】：