Как смоделировать window.gapi.load () React + Jest - PullRequest
Новая
       110

Как смоделировать window.gapi.load () React + Jest

0 голосов
/ 28 апреля 2020

Существует вопрос, который отвечает на этот вопрос для Angular, и вопрос без ответов для Vuejs. Я пытаюсь найти способ смоделировать функцию window.gapi.load() в моих тестах. Я новичок в тестировании React, и это то, что у меня есть: 

it('should render the App component without crashing', function () {
  const component = renderer.create(
    shallow(
      <Root>
        <App/>
      </Root>
    )
  )

  let tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

Я попробовал базовый c beforeEach, чтобы попытаться загрузить его или что-то еще, но это тоже не сработало. Вот код в компоненте: 

const App = () => {
  const { isSignedIn } = useSelector(state => state.auth)

  const renderApp = () => {
    if (isSignedIn) {
      return <Home/>
    } else {
      return (
          <div className='app'>
            <h1 id='logo'>netTube</h1>
            <GoogleAuth/>
          </div>
      )
    }
  }

  return (
      <>
        { renderApp() }
      </>
  )
}

И вызов в компоненте GoogleAuth: 

// GoogleAuth.jsx

componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client.init({
        clientId: process.env.REACT_APP_GOOGLE_CLIENT_ID,
        scope: 'email'
      }).then(() => {
        this.auth = window.gapi.auth2.getAuthInstance()
        this.onAuthChange(this.auth.isSignedIn.get())
        this.auth.isSignedIn.listen(this.onAuthChange)
      })
    })
  }

Если есть что-то, что вы хотели бы, чтобы я добавил, пожалуйста, спросите. Извините, если информации недостаточно, как я уже сказал, я очень новичок в тестировании React. Спасибо!

1 Ответ

1 голос
/ 28 апреля 2020

Вы можете просто посмеяться над каждым из пробелов, которые используют ваши компоненты. (Хотя при мелком рендеринге ваш componentDidMount может не работать.)

что-то вроде: 

window.gapi = {};
window.gapi.auth2.getAuthInstance = () => {isSignedIn : {get : () => true, listen : f => f()}};
window.gapi.client.init = (v) => true;
window.gapi.load = (a, f) => f();

в качестве первых строк вашего it (или даже лучше в before / beforeEach) весело c)

...