Question

我是React和React测试的新手，我非常感谢测试部分的帮助。

我将把所有代码都放在这里以供理解，因此很长很抱歉。

我有一些输入字段，需要用户填写。一旦单击它们但未填充文本，它们的边框就会变为红色（validateInput（））。我通过将className设置为“ error”来实现。填充字段时，className更改为null（由于状态更改），因此css停止在该字段上应用。这是我用于名为“ title”的字段的代码。

TripForm.jsx：

class TripForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        title: "",
        //more states ...
      },
      tripErrors: {
        titleError: "",
        //more states ...
      },
    };
  }

validateInput = () => {
    let nam = window.event.target.name;
    let val = window.event.target.value;
    const data = { ...this.state.data, [nam]: val };
    this.setState(() => ({ data }));
    let tripErrors = this.state.tripErrors;
    switch (nam) {
      case "title":
        tripErrors.titleError = val.length > 0 ? "" : "required";
        break;
      //more cases...
    }
  };

 render() {
    const { tripErrors } = this.state;
    return (
      <div>
        <div className="container">
          <h1 style={headerStyles}> Create an individual trip </h1> <br />
          <Form>
            <FormGroup as={Row}>
              <Form.Label column sm={1}>
                Title
              </Form.Label>
              <Col sm={5}>
                <Form.Control
                  className={tripErrors.titleError.length > 0 ? "error" : null}
                  name="title"
                  aria-label="title"
                  type="text"
                  onChange={(e) => {
                    this.props.handleChange(e);
                    this.validateInput();
                  }}
                />
              </Col>
            </FormGroup>
            //more input fields here...
            </FormGroup>
          </Form>
        </div>
      </div>
    );
  }
}

export default TripForm;

App.css：

input.error {
  border: 2px solid #c45c5c;
}

我想编写一个测试来检查className实际上是否设置为“错误”，或者如果用户填写了内容则不包含任何内容。

TripForm.test.js，无需用户输入：

test('check if title field is required',  () => {
    const div = document.createElement('div');
    const utils = render(<BrowserRouter>
      <TripForm />
    </BrowserRouter>, div);
    const input = utils.getByLabelText('title')
    fireEvent.change(input, { target: { value: '' } })
    //here comes the error:
    expect(input).toHaveClass("error");
});

这是错误：

expect(element).toHaveClass("error")
    Expected the element to have class:
      error
    Received:
      form-control

当我以不同的方式编写测试时，由于用户为它提供了一个值，因此它检查className是否为空，我收到一条巨大的错误消息：

TripForm.test.js，带有用户输入：

test('check if title field is required',  () => {
    const div = document.createElement('div');
    const utils = render(<BrowserRouter>
      <TripForm />
    </BrowserRouter>, div);
    const input = utils.getByLabelText('title')
    fireEvent.change(input, { target: { value: 'trip1' } })
    expect(input).toHaveClass(null);
});

这是该错误：

UnhandledPromiseRejectionWarning: TypeError: Caught error after test environment was torn down

Cannot read property 'body' of null
(node:83) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag ...

for the TripForm.jsx:
TypeError: this.props.handleChange is not a function

      60 |                   type="text"
      61 |                   onChange={(e) => {
    > 62 |                     this.props.handleChange(e);
         |                                ^
      63 |                     this.validateInput();
      64 |                   }}
      65 |                 />


for the TripForm.test.js:
 expect(element).toHaveClass(expected)
    At least one expected class must be provided.

    > 26 |     expect(input).toHaveClass(null);

      at Object.<anonymous> (src/tests/TripForm.test.js:26:19)

有谁知道我如何解决这个问题，只是检查输入后className是否为null，没有className是“错误”？我需要在TripForm.jsx中进行更改吗？

非常感谢您阅读。

如何在React测试库中测试输入字段的className？

0 个答案: