0

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

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

    - 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='User123@bc.com' 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');
    })
  });

感谢您的帮助，我整天都被这个问题困扰着！

4

0 回答 0