Блог

Я передаю три реквизита внутри компонента, и когда я обращаюсь к ним, только 2 из 3 видны в инструментах разработки. Это также приводит к тому, что все мои тесты проходят, когда я изменяю любое из значений 3-й опоры (которая является объектом внутри массива и не отображается).

Я получаю это сообщение об ошибке:

 'tempArr' is assigned a value but never used  no-unused-vars
 

App.js

 import React from "react";
import Header from "./components/Header/Header";
import Headline from "./components/Headline/Headline";
import { Section } from "./styles/GlobalComps";

const tempArr = [
 {
   fName: "Jane",
   lName: "Doe",
   email: "janedoe@gmail.com",
   age: 23,
   onlineStatus: false,
 },
];

function App() {
 const props = {
   header: "Posts",
   description: "Click the button to render posts!",
   tempArr
 };
 return (
   <div className="App">
     <Header />
     <Section className="main">
       <Headline {...props} />
     </Section>
   </div>
 );
}

export default App;





 

Headline.js

 import React, { Component } from "react";
import { Container, Paragraph, Title } from "./HeadLineStyles";
import PropTypes from "prop-types";

class Headline extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { header, description, tempArr } = this.props;

    if (!header) {
      return null;
    }

    return (
      <Container data-test="headlineComponent">
        <Title data-test="header">{header}</Title>
        <Paragraph data-test="description">{description}</Paragraph>
      </Container>
    );
  }
}

Headline.propTypes = {
  header: PropTypes.string,
  description: PropTypes.string,
  tempArr: PropTypes.arrayOf(
    PropTypes.shape({
      fName: PropTypes.string,
      lName: PropTypes.string,
      email: PropTypes.string,
      age: PropTypes.number,
      onlineStatus: PropTypes.bool,
    })
  ),
};

export default Headline;





 

spec.js

 
import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { shallow, configure } from "enzyme";
import Headline from "./Headline";
import { findByTestAtrr } from "../../../utils/utils";
import checkProptypes from "check-prop-types";

configure({ adapter: new Adapter() });

const setUp = (props = {}) => {
  const component = shallow(<Headline {...props} />);

  return component;
};

describe("Headline Component", () => {
  describe("Checking PropTypes", () => {
    it("Should not throw a warning", () => {
      const expectedProps = {
        header: "Test Header",
        description: "Test Description",
        props: [
          {
            fName: "Test fName",
            lName: "Test lName",
            email: "test@email.com",
            age: 23,
            onlineStatus: false,
          },
        ],
      };
      const propsError = checkProptypes(
        Headline.propTypes,
        expectedProps,
        "props",
        Headline.name
      );

      expect(propsError).toBe();
    });
  });

  describe("Have props", () => {
    let wrapper;

    beforeEach(() => {
      const props = {
        header: "Test Header",
        desc: "Test Description",
      };
      wrapper = setUp(props);
    });

    it("Should render without errors", () => {
      const container = findByTestAtrr(wrapper, "headlineComponent");
      expect(container.length).toBe(1);
    });

    it("Should render h1", () => {
      const h1 = findByTestAtrr(wrapper, "header");
      expect(h1.length).toBe(1);
    });

    it("Should render a description", () => {
      const paragraph = findByTestAtrr(wrapper, "description");
      expect(paragraph.length).toBe(1);
    });
  });

  describe("Have NO props", () => {
    let wrapper;

    beforeEach(() => {
      wrapper = setUp();
    });

    it("Should not render", () => {
      const container = findByTestAtrr(wrapper, "headlineComponent");
      expect(container.length).toBe(0);
    });
  });
});