Question

我有一个React应用，我按组件和容器将我的代码分开，在容器Auth中，我在index.js中有我的index.js，我导入由样式化compoennt制作的InputComponent。测试这种组件的最佳方法是什么，因为将来我还会有其他组件，例如按钮Erorr等。

我已经尝试对其进行测试，以在导入我的InputComponent时分别创建input.test.js，但它不起作用，我无法模拟其更改。

也许我应该测试容器而不应该测试组件？

我真的想要一些如何做到这一点的好例子！

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styled from 'styled-components';
import InputComponent from '../../components/InputComponent';

  return (
    <AuthBlock>
      <LogoComponent />
      <ErrorComponent submitted={submitted} value={error} />
      <Form onSubmit={(e) => { submitForm(e); }}>
        <InputComponent
          validation={submitted}
          className="input-form"
          inputType="text"
          name="name"
          placeholder="Логин"
          controlFunc={(e) => { setLogin(e.target.value); }}
          value={login}
        />
        <InputComponent
          validation={submitted}
          className="input-form"
          inputType="password"
          name="password"
          placeholder="Пароль"
          controlFunc={(e) => { setPassword(e.target.value); }}
          value={password}
        />
        <ButtonComponent
          className="btn"
          type="submit"
          name="submit"
          value="Войти"
        />
      </Form>
    </AuthBlock>
  );

这是一个inputComponent.jsx

const Input = styled.input`
  width: 300px;
  height: 45px;
  border: 1px solid #EBEFF3;
  border-radius: 5px;
  padding-left: 30px;
  /* box-shadow: 0px 0px 5px rgba(191, 210, 226, 0.25); */
  font-size: 16px;
  outline: none;
  &::placeholder {
    color: #9FA9AD;
  }

  return (
    <FormGroup>
      <Input
        style={{ border: (validation && !value) && '1px solid #FF767E' }}
        className={className}
        name={name}
        type={inputType}
        value={value}
        onChange={controlFunc}
        placeholder={placeholder}
        onClick={clickFunc}
      />
    </FormGroup>
  );

如何用玩笑来测试样式化组件

0 个答案: