酶测试错误，方法“模拟”意味着在 1 个节点上运行。 0 找到代替

Question

我是测试新手，我正在尝试使用酶测试 React 应用程序，

我想测试（电子邮件输入）值的变化，当我运行我的测试出现这个错误！我觉得一切正常，有什么问题！

""""""""""""{ 方法“模拟”意味着运行在 1 个节点上。找到 0 个。}"""""""""

我的组件：

import React, { useState } from 'react';
import login from '../../../services/accountService';
import validate from '../../../utility/loginValidate';
import { Button, Error, Form, Input, Label, NavLink, Sign, SignBtn } from './signin-style';

/**
 * Component to log in the website if you have valid information, and display errors if the information is invalid!
 */
function Signin() {
  const [email, setemail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState(null);

  /**
   *this methode called when the user presses the submit button, first it will check if there is errors, if not it will submit the form!
   *
   * @param {onSubmit} event click on submit button event!
   */
  const handleSubmit = (event) => {
    event.preventDefault();

    /**
     * Function that check if the user inserted wrong information and put it on @error variable!, then it will update the @errors state!
     */
    const error = validate(email, password);
    setErrors(error);
  };

  /**
   * Method that handle the change on { email input } by taking the input value and setting it on @email state!
   *
   * @param {onChange} event when user type in email input!
   */
  const handleemailChange = (event) => {
    const user = event.currentTarget.value;
    setemail(user);
  };

  /**
   *  Method that handle the change on { password input } by taking the input value and setting it on @password state!
   *
   * @param {onChange} event  when user type in password input!
   */
  const handlePasswordChange = (event) => {
    const pass = event.currentTarget.value;
    setPassword(pass);
  };

  return (
    <Sign>
      <h1>Sign In</h1>
      <NavLink to="/login">Need an account?</NavLink>
      {errors ? <Error>* Invalid email or password!</Error> : null}
      <Form onSubmit={handleSubmit}>
        <div>
          <Label htmlFor="email">
            <Input
              value={email}
              onChange={handleemailChange}
              id="email"
              type="text"
              placeholder="Email"
            />
          </Label>
        </div>
        <div>
          <Label htmlFor="password">
            <Input
              value={password}
              onChange={handlePasswordChange}
              id="password"
              type="password"
              placeholder="Password"
            />
          </Label>
        </div>
        <SignBtn>
          <Button onClick={() => login({ email, password })} type="submit">
            Sign in
          </Button>
        </SignBtn>
      </Form>
    </Sign>
  );
}

export default Signin;

我的测试：

  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<Signin />);
  });

  it('should render Signin component without crashing', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('should check email input value', () => {
    const emailInput = wrapper.find('Input[type="email"]');
    emailInput.simulate('change', { target: { value: 'alaa@gmail.com' } });
    expect(emailInput.prop('value')).toEqual('alaa@gmail.com');
  });

  
});

Answer 1

您正在按 [type="email"] 类型选择输入，但您没有这样的元素，您的输入都是 text 类型；这就是您收到 0 found instead 错误的原因。

您可以尝试选择仅包含其 ID 的输入：

const emailInput = wrapper.find('#email');

此外：

你的句柄回调使用 currentTarget，所以你应该用它模拟而不只是 target：emailInput.simulate('change', { currentTarget: { value: 'alaa@gmail.com' } });
emailInput 仍然指向旧包装器（和值），因此您需要再次 .find() 元素： expect(wrapper.find('#email').prop('value')).toBe('alaa@gmail.com');

酶测试错误，方法“模拟”意味着在 1 个节点上运行。 0 找到代替

Enzyme testing error, Method “simulate” is meant to be run on 1 node. 0 found instead

reactjs

testing

enzyme

酶测试错误，方法“模拟”意味着在 1 个节点上 运行。 0 找到代替

Enzyme testing error, Method “simulate” is meant to be run on 1 node. 0 found instead

reactjs

testing

enzyme

酶测试错误，方法“模拟”意味着在 1 个节点上运行。 0 找到代替