Jest / Enzyme Shallow смешивает имена дочерних компонентов и компоненты-заглушки - PullRequest
Новая
       31

Jest / Enzyme Shallow смешивает имена дочерних компонентов и компоненты-заглушки

1 голос
/ 01 мая 2019

В настоящее время использую Jest и Enzyme, чтобы выбрать некоторые элементы для моего компонента верхнего уровня. Используя тестирование снимков, я могу видеть то, что Enzyme мелкий рендеринг для меня, чтобы выбрать элементы. Как бы то ни было, я заметил, что в моментальном снимке некоторые элементы отображаются с именем компонента, а другие заменяются на Component

Мой компонент верхнего уровня ( Примечание. Я удалил и изменил некоторый код, чтобы объяснить мою точку зрения ): 

import React from 'react'
import { observer, inject } from 'mobx-react'

import styles from './awesome.styl'

import { Input } from '../ilovepie/Input'
import { Button } from '../ilovepie/Button'
import { Title } from '../ilovepie/Title'
import { Subtitle } from '../ilovepie/Subtitle'


import { labels } from './labels'

@observer
export default class Awesome extends React.Component<> {

  // Some methods

  render() {
    return (
      <div className={styles.Awesome}>
        <Title>{labels.title}</Title>
        <div className={styles.subTitle}>
          <Subtitle size={2} weight={1} color="light">
            {labels.subtitle}
          </Subtitle>
        </div>

        <Input
          testId={'email'}
          onChange={(email) => {}}
          error={this.isEmailValid ? null : labels.invalidEmail}
          label={labels.email}
          value={this.email}
        />

        <Input
          testId={'password'}
          onChange={(password) => {}}
          label={labels.password}
          value={this.password}
          isPassword
        />

        <div className={styles.actions}>
          <Button
            testId={'login'}
            onClick={() => {}}
            text={labels.signIn}
            isDisabled={this.loginDisabled}
            isLoading={this.isLoading}
          />
          <Button onClick={this.register} isSecondary isDoubleLines>
            {labels.notMember}
            <br />
            {labels.createAccount}
          </Button>
        </div>
      </div>
    )
  }
}

И простой тест 

import React from 'react'
import { shallow, ShallowWrapper } from 'enzyme'

let wrapper: ShallowWrapper

import Awesome from '.'

describe('<Awesome />', () => {
  beforeEach(() => {
    // Somewhere down the road, how we are exporting React Components is exporting
    // it in a wrapper. Hence we need the `.dive()` to see the actual component
    wrapper = shallow(<Awesome />).dive()

  })

  describe("<Awesome /> 's rendering", () => {
    it('should match HTML Snapshot', () => {
      expect(wrapper).toMatchSnapshot()
    })
  })
)}

Выполнение этого с возвращенным снимком: 

// Jest Snapshot v1,

exports[`<Awesome /> <Awesome /> 's rendering should match HTML Snapshot 1`] = `
<div
  className="Awesome"
>
  <Component>
    Hi There!
  </Component>
  <div
    className="subTitle"
  >
    <Component
      color="light"
      size={2}
      weight={1}
    >
      It's a awesome day.
    </Component>
  </div>
  <Input
    error={null}
    label="Email Address"
    onChange={[Function]}
    testId="email"
    value=""
  />
  <Input
    isPassword={true}
    label="Password"
    onChange={[Function]}
    testId="password"
    value=""
  />
  <div
    className="actions"
  >
    <Component
      isDisabled={true}
      isLoading={false}
      onClick={[Function]}
      testId="login"
      text="SIGN IN"
    />
    <Component
      isDoubleLines={true}
      isSecondary={true}
      onClick={[Function]}
    >
      Not a member yet?
      <br />
      Create an account!
    </Component>
  </div>
</div>
`;

Почему некоторые компоненты переименованы в </Component>, а некоторые сохранили свое первоначальное имя, например <Input ... />? Это потому, что имена компонентов тесно связаны с элементами HTML? Если так, то почему Button заменен?

Я бы хотел знать, есть ли проблема с ГР или я что-то здесь не так делаю.

...