이것은 나의 10가지 비결이다. 내가 어떻게 많은 시간을 들여 자원을 개방할 수 있는지.나의 태도는 충분한 동력으로 좌절을 교환하고 자신을 1% 진보시키는 것이다.이 모든 것들은 세계와 약간의 가치를 공유했다.
그래서
hooks를 통해 MailChimp 구독 폼을 블로그에 추가할 생각이 있습니다.나는 그것을 소스 패키지로 격리하는 것이 가장 좋다고 생각한다.갈고리 60 LOC, 섣불리 40 LOC를 테스트하는 데 놀라운 시간이 걸렸다.
이 글은 내가 잘못에서 벗어난 개인 여정you can join and learn for free의 일부분이다.

계획

한 걸음 한 걸음 보완을 거부하고 실용성을 높이며 더 빨리 전진할 수 있도록 한다.

날로 증가하는 복잡성을 합리적인 좌절로 극복한다.

나의 발견을 기록하다.

결과

이것은 react-use-mailchimp 갈고리를 사용하여 MailChimp 양식을 React 응용 프로그램에 삽입하는 예입니다.

export const Form = () => {
  const url = 'URL_YOU_CAN_OBRAIN_FROM_MAILCHIMP_UI'
  const [{ loading, error, data }, subscribe, reset] = useMailchimp({ url })
  const [email, setEmail] = useState('')

  return (
    <form
      onSubmit={e => {
        e.preventDefault()
        subscribe({ EMAIL: email })
      }}
    >
      <input onChange={e => setEmail(e.target.value)} onFocus={reset} />
      <button type={'submit'}>Submit</button>
      <div>
        {!!loading
          ? 'Loading...'
          : error
          ? 'Error during subscription'
          : data && data.result === 'success'
          ? 'Subscribed!'
          : null}
      </div>
    </form>
  )
}

내 거 잡았어.

이것은 내가 개발하는 과정에서의 함정과 수확 목록이다.

#1, Jest 구성

처음부터 나는 적어도 중간 품질의 테스트를 하기로 결정했다.너무 많이 생각하지 마세요. 사람들이 어떻게 테스트를 하는지 보기 위해 소스 코드를 서명했습니다.나에게 적합한 구성을 찾았습니다.jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.jsx$': 'babel-jest',
    '^.+\\.js$': 'babel-jest',
  },
  setupFiles: ['<rootDir>/jest.init.js'],
}

jest.init.js

import '@babel/polyfill'

이것은 나로 하여금 적어도 한동안 문서를 건너뛰고 나서 계속 일을 완성하게 했다.

#2.react hooks 테스트 라이브러리 테스트

우선 설치했습니다react-testing-library.하지만 곧 또 다른react 갈고리를 테스트하는 방법react-hooks-testing-library을 발견했다.
사용 예:

import { renderHook, act } from 'react-hooks-testing-library'
import useCounter from './useCounter'

test('should increment counter', () => {
  const { result } = renderHook(() => useCounter())
  act(() => result.current.increment())
  expect(result.current.count).toBe(1)
})

수동 포장 연결에 사용할 다른 구성 요소가 없습니다.깔끔했어
react-hook 테스트 라이브러리의 또 다른 중요한 점은 react-hook의 비동기성을 처리할 수 있다는 것이다.작은 경고가 있습니다.나중에 자세히 설명합니다.

#3, npm 링크에 대항

이것은 상당히...얄미운 하나.npm link 명령은 로컬 개발에서 패키지를 테스트하는 데 사용할 수 있으며, npm 등록표에 발표할 필요가 없습니다.달콤하고 편리한 것은 나에게 있어서 이미 만들어진 것이 아니다.
React는 같은 응용 프로그램에 두 개의 React 실례가 있습니다. 이것은 오류를 일으킬 수 있습니다.npm 링크에 우드 마법이 있기 때문이다.
간단하고 보기 싫으며 필요한 솔루션입니다.

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder.

myapp와 mylib가 형제 폴더라고 가정하면, 가능한 복구 방법은 npm 링크를 실행하는 것입니다/myapp/node_모듈/react는 mylib에서 왔습니다.이것은 라이브러리에 응용 프로그램의 React 복사본을 사용하도록 해야 합니다.
나는 이것이 npm/react의 미래 버전에서 해결될 것이라고 생각한다.

#4.'더 좋은 npm 발표'

"더 좋은 npm 발표".얼마 전까지만 해도 이 직함은 줄곧 나를 따랐다.나는 지금까지 그것을 검사한 적이 없지만, 구글에서 빠른 검색을 통해 패키지 발표 과정을 자동화할 수 있는 tool called np 를 발견했다.
package.json

{
  "scripts": {
    "publish": "np"
  }
}

이 도구를 사용하면 너무 많은 복잡성을 증가시키지 않고 안전성을 증가시킬 수 있다.설탕의를 함유한다

#5, 자신이 싫어하는 벌레와 싸우기

솔직히 말해서, 이 버그는 100LOC를 쓸 때의 고통의 중요한 부분이다.단지 어리석은 실수 때문에 나의 주의력을 숨기는 데 성공했다.한두 시간, 혹은...
다음은 잘못된 코드입니다.

jsonp(url, opts, callback)

네, 그 줄의 간단한 코드입니다.하지만 url 은 진정한 URL이지만 내가 필요로 하는 것은 아니다.명명도 중요하고 수면도 충분하다.

#6.react 갈고리의 비동기적 특성

만약 갈고리에 비동기적인 사건이 발생한다면, 테스트를 어떻게 하는지 알고 싶을 수도 있습니다.간단한 방법이 있어요.
다음은 테스트의 일부입니다.

act(() =>
  /* this one makes a http request */
  result.current[1]({
    EMAIL: EMAIL,
    NAME: '',
  })
)
/* checks loading before request */
expect(result.current[0].loading).toBe(true)
/*
        sweet part.
        this one «waits» until there state of a hook will change.
    */
await act(async () => {
  await waitForNextUpdate()
})
/* checks loading after request */
expect(result.current[0].loading).toBe(false)

그러나 이 방법을 따르기 위해서는 React의 알파 버전을 사용해야 한다는 것을 깨닫는 데 두 시간이 걸릴 수밖에 없다.package.json

{
  "peerDependencies": {
    "react": "^16.8.6"
  },
  "devDependencies": {
    "react": "16.9.0-alpha.0",
    "react-dom": "16.9.0-alpha.0",
    "react-test-renderer": "16.9.0-alpha.0"
  }
}

개발 과정에서 테스트가 작동할 수 있도록apha버전의react가 필요합니다.그러나 그것을 사용하기 위해서는^16.8.6을 의존항으로 할 수 있습니다.

#7 react apollo에서 API를 훔치래요.

처음에 데이터를 저장하는 mystate는 다음과 같다.

const [{ status, message }, subscribe] = useMailchimp({ url })

그리고 react에서 요청을 처리하는 좋은 API가 있는 것을 기억합니다.그들이 얻은 결론은 다음과 같다.

const = () => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
        /* ... */
    }}
  </Query>
)

나는 더 좋다고 생각한다.나의 갈고리의 API는 야외의 어떤 것들과 유사할 것이다.그리고 문자열 변수는 공개하지 않겠습니다.
따라서 API는 다음과 같이 변환됩니다.

const [{ loading, error, data }, subscribe] = useMailchimp({ url })

또한 data MailChimp의 API 응답을 가진 원본 JSON 표현입니다.

#8, reset () 동작이 필요합니다.

나는 나의 갈고리가 어떤 API를 공개했는지 결정해야 한다.스스로 이 갈고리를 사용함으로써 나는 확실히 reset 갈고리 기능이 필요하다는 것을 깨달았다.
완성!

const [state, subsctibe, reset] = useMailchimp({ url })

#9.0 구성, 다중 버전

내가 우연히 발견한 개원libsmicrobundle를 발굴하다.

The zero-configuration bundler for tiny modules, powered by Rollup.

package.json

{
  "scripts": {
    "build": "microbundle -o dist/ --sourcemap false --compress false"
  }
}

오, 그 아름다운 느낌은 네가 최소한의 노력을 기울였다는 것을 의미한다.

#10, 당신의 일을 폭로하고 가르쳐 줍니다.

마지막 수업.
임무는 간단해 보이지만 놀라운 시간을 소모할 수 있다.이런 상황에서 나는 이 부분은 나 때문이고, 일부는 현실의 매우 복잡하기 때문이라는 것을 기억하려고 한다이런 마음가짐은 나에게 충분한 스트레스를 남겨 주었지만, 나로 하여금 너무 당황하거나 낙담하게 하지는 않았다.
보시다시피 당신은 개원 작업을 통해 많은 것을 배울 수 있습니다.너희도 개인의 동력을 유지하고 일을 완성하는 데 유리한 것들을 뛰어넘어 공부할 수 있다.

개원

이 모든 것은 react-use-mailchimp 패키지에 포장되어 있으며, 우리는react 응용 프로그램에서 사용할 수 있습니다.
만약 어떤 가치가 있다면, 너는 더 많은 것을 얻고 싶다. - 나의 블로그를 보러 가라.좋은 것is waiting for you!