reactjs 如何测试表格提交与笑话和酶的React？

yyyllmsg 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(151)

我正在学习reactjs形式与挂钩，现在我想测试形式上提交使用笑话和酶。
下面是我登录组件。

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

下面是login.test.js文件

describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper = shallow(<Login />);
       const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', 'blah@gmail.com')
       const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'death'); 

       expect(updatedEmailInput.props().value).toEqual('blah@gmail.com');
       expect(updatedPasswordInput.props().value).toEqual('death');

       const instance = wrapper.instance()
       const spy = jest.spyOn(instance, 'handleSubmit')
   
       instance.forceUpdate();    
   
       const submitBtn = app.find('#sign-in')
       submitBtn.simulate('click')
       expect(spy).toHaveBeenCalled()

    })
    
  })

不幸的是，当我运行npm test时，我得到了以下错误。

我需要做些什么来解决这个错误，或者有人可以提供如何测试表单提交的教程吗？

reactjs

来源：https://stackoverflow.com/questions/64839452/how-to-test-form-submit-with-jest-and-enzyme-in-react

1条答案

按热度按时间

qybjjes11#

在文档中提到不能对函数组件使用shallow.instance（）它将返回null：https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/instance.html以前也有关于此主题的答案Enzyme instance() returns null
您可以像How to use jest.spyOn with React function component using Typescript那样将经过验证的函数handleSubmit作为prop传递给Login

// Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const handleSubmit = jest.fn();
      const wrapper = mount(
          <Login handleSubmit={handleSubmit}/>
      );
      const instance = wrapper.instance();
      const submitBtn = app.find('#sign-in')
      submitBtn.simulate('click')
      expect(handleSubmit).toHaveBeenCalled();
    });
  }

您需要在登录组件中调用这个测试函数handleSubmit，作为onSubmit的一部分，或者从上层组件导出整个onSubmit。

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onSubmit = async (e) => {
        if (handleSubmit) {
          handleSubmit()
        }
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={onSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

导入提交函数的示例登录代码

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
   
    // handleSubmit is imported with props
 
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何测试表格提交与笑话和酶的React？

1条答案

相关问题

热门标签

最新问答