Question

当前使用Jest和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被替换？

我很想知道是否存在GH问题，或者我在这里做错了什么。

Answer 1

根据enzyme，名称计算如下 type.displayName-> type.name-> type

由于没有自定义组件的名称，因此快照作为类型退回到Component。

解决此问题的一种方法是为组件提供静态的displayName属性。

class Title extends Component {
  static displayName = 'Title';
  ...
}

Jest / Enzyme Shallow混合了子组件名称和存根组件

1 个答案: