当我通过使用react-test-library测试具有不同prop值的一个组件时，它给我错误

问题描述

我正在尝试编写测试电子邮件输入验证的测试，当电子邮件有效时，EmailValidation应该具有<flex display= 'flex'>，而当电子邮件无效时，EmailValidation应该具有<flex display= 'none'> 。

问题是：我的第一个测试可以通过，但是我不确定第二个单元测试总是使我失败的原因，如下：

    - Expected

    - display: none;
    + display: block;

      53 |     })
      54 |     expect(checkValidation).not.toHaveBeenCalled()
    > 55 |     expect(vaildation).toHaveStyle('display: none');
         |                        ^
      56 |     })
      57 |   });
      58 | 

这是我在signup.js中的代码的一部分：

  const [Emailvalidation,setEmailValidation] = useState(false);

          <UserInput
              Icon={FaEnvelope}
              type={'email'}
              placeholder={'Email Address'}
              handleChange={handleChange}
              register={register}
              name={'email'}
              value={values.email}
         />
            {/* Email Validation */}
         <EmailValidation
              email={values.email}
              validation={(value) => setEmailValidation(value)}
              isValid={Emailvalidation}
         /> 

这是我在Validation.js中的代码的一部分：

const EmailValidation = (props) => {
    const pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
    const validEmail = props.email.match(pattern);
    if (
      (validEmail && props.isValid === false) ||
      (!validEmail && props.isValid === true)
    ) {
      setTimeout(() => {
        props.validation(!props.isValid);
      },10);
    }
  
    return (
      <Flex
        data-testid="email-validation"
        display={props.isValid || props.email === "" ? "none" : "flex"}
      >
        <Flex>
          <Text>Invalid Email Address</Text>
        </Flex>
      </Flex>
    );
  };

这是我的测试代码：

import { fireEvent,screen,cleanup } from '@testing-library/react'
import { render,wait} from '../../tests/test-utils'
import { browserRouter } from 'react-router-dom'
import React from 'react'
import SignUpFieled from './SignUpField'
import { act } from 'react-dom/test-utils'
import {EmailValidation} from './Validations'

  afterEach(cleanup)

  describe("Email Address",()=>{
    it("vaild with correct email input",() => {
      jest.usefaketimers();
      const checkValidation = jest.fn();
      const {getByTestId} = render(<EmailValidation email='[e-mail]' validation={checkValidation} isValid={false}/>)
      const vaildation = getByTestId("email-validation")
      act(() => {
        jest.advanceTimersByTime(10)
      })
      expect(checkValidation).toHaveBeenCalled()
      expect(vaildation).toHaveStyle('display: flex');
    });
  });
  
  describe("Email Address",()=>{
    it("invaild with incorrect email input",() => {
    jest.usefaketimers();
    const checkValidation = jest.fn();
    const {getByTestId} = render(<EmailValidation email='User123com' validation={checkValidation} isValid={false}/>)
    const vaildation = getByTestId("email-validation")
    act(() => {
      jest.advanceTimersByTime(10)
    })
    expect(checkValidation).not.toHaveBeenCalled()
    expect(vaildation).toHaveStyle('display: none');
    })
  });

谢谢您的帮助，我整天都受不了！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）