반응과 테스트(약간 전면적인 지침일 수도 있다)

소개하다.
프로그래머로서, 신구를 막론하고, 우리는 우리의 코드를 가능한 한 완벽에 가까워지도록 노력해야 한다. 그렇지 않으면, 적어도 그것을 기능화해야 한다.물론 이것은 말하기는 쉬워도 실행하기는 어렵다. 기능에 따라 인코딩은 엄청난 노력을 기울여야 하기 때문에 우리가 사용할 수 있는 도구를 사용하는 것이 매우 중요하다.
테스트는 이 도구들 중 하나일 뿐만 아니라, 아마도 가장 중요한 도구일 것이다. 다행히도 우리는 쉽게 신속하게 테스트를 진행할 수 있다.

리액션
React는 전체 페이지를 로드할 필요 없이 효율적인 탐색을 위한 프레임워크입니다.이것은 우리의 사이트가 모든 설비에서 더욱 빠르다는 것을 의미한다.이것은 비교적 느린 장치(예를 들어 이동 네트워크)나 미약한 가정 신호에 특히 유익하다.
React는 우리 개발자에게도 좋은 점이 있다. 왜냐하면 우리는 응용 프로그램/사이트를 구성 요소로 나눌 수 있기 때문이다. 이 구성 요소들은 우리의 수요를 충족시키기 위해 전문적으로 사용되고, 다시 사용되고, 조작할 수 있기 때문이다.

React 애플리케이션 작성
React 애플리케이션을 만드는 것은 매우 간단합니다.컴퓨터에 Nodejs를 설치하고 Visual Studio 코드를 연 후 파일을 만들기 전에 터미널을 열고 다음 명령을 입력해야 합니다(마침표를 포함합니다. 그렇지 않으면 작동할 수 없습니다).

npx install create-react-app .

그리고 React 프로그램의 모든 불필요한 부분을 삭제하고 절대 최소값만 보존할 수 있습니다.이렇게 하려면 원하는 대로 파일을 삭제합니다.favicon.ico logo192.png logo512.png manifest.json robots.txt App.test.js logo.svg reportWebVitals.js setupTests.js이 파일들에 대한 모든 인용을 삭제해야 합니다. React가 매우 취약하기 때문에 파일을 찾지 못하면 붕괴됩니다.삭제된 파일을 참조하는 파일은 다음과 같습니다.App.js index.js이렇게 하면 설정된 React 응용 프로그램이 있습니다.터미널에서 다음 명령을 입력하여 React 애플리케이션을 테스트하십시오!

npm start

제조 어셈블리
조립품을 만드는 것도 간단하다.이 전시에 대해 나는 나의 파일을'comp1'이라고 부른다.
src 폴더에'components' 라는 새 폴더를 만듭니다.이것은 선택할 수 있지만 강력히 추천합니다.그런 다음 components 폴더에 다음 두 개의 파일을 만듭니다.Comp1.js Comp.cssitem에서 '*.js' 를 입력하고value에서' javascriptreact '를 입력함으로써 VScode 설정의 파일 연결을 변경하여React 형식과 일치하도록 하는 것도 권장합니다.
Comp1 1회js 제작이 완료되면 css를 가져옵니다. 코드는 다음과 같습니다.

import './Comp1.css';

그리고 매개 변수로 함수를 만들고 내보냅니다.나는 그것을 Comp1이라고 부르지만, 모든 것이 발생할 것이다.HTML 요소를 포함하는 반환문을 만들고 클래스를 만들어야 합니다. (중요한 것은 HTML이 아닌 자바스크립트이기 때문에 일반 HTML에서'className '이 아니라'className' 을 호출해야 합니다.)
다음 그림과 같이 MyH1 요소의 여러 괄호 안에 매개변수를 입력하여 매개변수를 호출할 수도 있습니다.

export default function Comp1({header}) {
    return (
        <section className="Comp1">
            <h1>{header}</h1>
        </section>
    )
}

완성되면 응용 프로그램에 들어가세요.일반 자바스크립트에서처럼 js를 가져오고 구성 요소를 가져옵니다.

import Comp1 from './components/Comp1';

구성 요소를 가져온 후 원하는 횟수만큼 HTML에 삽입할 수 있습니다.나로서는 프로그램에서div의 모든 내용을 삭제했습니다.js, 내 구성 요소로 대체합니다.
제목의 매개 변수도 현재 사용될 것입니다. 왜냐하면 나는 그 위치에 다음 예시와 같은 모든 텍스트를 삽입할 수 있기 때문입니다.

function App() {
    return (
        <div className="App">
            <Comp1 header="Hello"/>
            <Comp1 header="World"/>
        </div>
    );
}

현재 구성 요소를 만들어서 가져왔습니다.지금은 테스트할 때다.

테스트
물론 테스트가 중요하다.나는 설명할 필요가 없다. 그렇지?
어쨌든 내가 보여줄 테스트는 테스트 문서에 요소가 존재하는지에 관한 것이지 사이트 자체를 실제적으로 검사하는 것이 아니다.
이것은 이러한 기본적인 응용 프로그램에 있어서 결코 특별히 유용하지는 않지만, 대형 프로젝트에 있어서는 매우 유용하다. 테스트가 필요한 모든 구성 요소를 신속하게 실행할 수 있고, 사이트에서 그것들을 보여줄 필요가 없다.

테스트를 하다
이 예제에서는 components 폴더에 다음과 같은 테스트 파일을 만듭니다.Comp1.test.js테스트 파일에서 다른 가져오기와 같이 테스트할 구성 요소를 가져오고, 나처럼 React 테스트 라이브러리에서 {render}를 가져옵니다.

import Comp1 from './Comp1';
import { render } from '@testing-library/react';

완성되면 실제 설치 테스트를 할 때가 되었다.이 모든 것은 "test"함수에서 발생할 것입니다. 따라서 우선 이것을 하고 괄호에 문자열을 넣으십시오.문자열은 테스트의 내용을 설명합니다.

test("If my component is functioning as intended")

메시지 다음에 테스트가 실제적으로 테스트해야 할 내용을 입력해야 하기 때문에 문자열 뒤에 쉼표를 추가한 다음에 함수를 생성합니다.

test("If my component is functioning as intended", function() {

})

이 함수에서 다음 변수를 생성합니다.

var { getByText } = render(<Comp1 header="test" />);

이것은 "test"로 설정된Comp1 구성 요소를 보여 줍니다.문자열만 있으면 매개 변수에 입력한 내용은 중요하지 않습니다.
다음 줄에'expect'표현식을 만들고'expect'문장에'getByText'를 인자로 입력하십시오.getByText 다음에 괄호를 놓고, 위의 매개 변수의 문자열을 두 개의 빗장으로 묶은 다음, 그 다음에 'i' 를 붙인다.이것이 바로 그것이 보이는 모습이다.

expect(getByText(/test/i));

이때 사용자의 기능/문서는 다음과 같아야 합니다.

import Comp1 from './Comp1';
import { render } from '@testing-library/react';

test("If header is displaying properly", function() {
    var { getByText } = render(<Comp1 header="test" />);
    expect(getByText(/test/i));
});

이것은 페이지에 이 구성 요소가 존재하는지, 인자에 있는 텍스트가 getByText 함수에서 지정한 텍스트와 일치하는지 테스트합니다.
테스트를 활성화하려면 터미널에 다음 줄을 입력하면 모든 테스트를 실행할 수 있습니다.우리의 예 중 하나.

npm test

만약 모든 것이 정상이라면, 그것은 반드시 테스트를 통과해야 한다.없으면 블로그에서 검토하고 다시 시도하십시오.너는 아마 이 과정에서 타자 오류나 다른 오류를 범했을 것이다.

결론
그것으로, 매개 변수가 있는 구성 요소를 만들고, 이 구성 요소를 테스트할 수 있는 React 프로그램을 만들었습니다.이 도구들을 확장해서 더 많은 것을 얻을 때가 되었다.인코딩 시작!