Юнит тест с ферментом

Question

В моем приложении React-Native есть следующий компонент.Меня попросили написать модульный тест, использующий для этого шутки и энзимы, но я новичок в модульном тесте.Итак, как разбить это и написать надлежащие тесты, я не знаю.Может ли кто-нибудь помочь мне с этим ??

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import { Button, Loader, ScreenContainer } from '../../../../../components';

import {
  decodeBase64,
  hasWordsInString,
  setFirstAndFamilyName,
} from '../../../../../library/Utils';

import { url, searchWords, signUpMethods } from '../../../../../config';
import { SIGN_UP_FORM } from '../../../../constants/forms';

// tslint:disable-next-line: max-line-length
const response = 'some-token';

class MyWebView extends Component {
  state = {
    loaderStatus: true,
  };

  stopLoader = () => {
    this.setState({ loaderStatus: false });
  }

  startLoader = () => {
    this.setState({ loaderStatus: true });
  }

  displayLoader = () => {
    const { loaderStatus } = this.state;
    return loaderStatus && <Loader />;
  }

  render() {
    const { navigation, addFormData, setSignUpMethod } = this.props;

    return (
      <View style={{ flex: 1 }}>
        <WebView
          source={{ uri: url }}
          onLoadStart={() => this.startLoader()}
          onLoad={() => this.stopLoader()}
          onLoadEnd={(syntheticEvent) => {
            const { nativeEvent } = syntheticEvent;

            if (nativeEvent.title === 'Consent Platform') {
              if (hasWordsInString(nativeEvent.url, searchWords)) {
                const { address, ...rest } = decodeBase64(response).data;
                const userName = setFirstAndFamilyName(rest.name);
                rest.firstName = userName.firstName;
                rest.familyName = userName.familyName;

                addFormData({ form: SIGN_UP_FORM, data: { values: { ...rest, ...address } } });
                setSignUpMethod(signUpMethods.MY_INFO);

                navigation.replace('ConfirmName', rest);
              }
            }
          }}
        />

        {this.displayLoader()}
      </View>
    );
  }
}

export default MyWebView;

Как я могу написать некоторые правильные модульные тесты для приведенного выше кода, используя шутки и энзимы?Каким принципам я должен следовать?Что делает юнит-тест лучше?

Answer 1

Это неглубокий тест, тогда вы можете передать свои собственные фиктивные данные и сравнить снимки, поэтому, в принципе, если кто-либо изменит какие-либо из ваших пользовательских компонентов, которые используются в этом компоненте, ваш тест не пройдёт

import "react-native"
import React from "react"
import { shallow } from "enzyme"

import MyWebView from "../../App/Components/MyWebView"

test("Should render CustomHeader", () => {
  const wrapper = shallow(<MyWebView />)
  expect(wrapper).toMatchSnapshot()
})