使用jest.js断言react组件child(ren)是否存在/不存在 [英] assert react component child(ren) existence/absence using jestjs

问题描述

我有一个组件，该组件根据传递给它的道具呈现不同的子组件.

I have a component that depending on the props passed to it, renders different child components.

我正在使用jestjs进行测试，我想断言父"组件根据在父组件中传递的道具来渲染适当的子代/子代.

I am using jestjs for testing, and I want to assert that that the "parent" component renders the appropriate children/child based on the props passed in the parent component.

一个简化的代码段:

父组件

import ComponentA from './componentA'
import ComponentB from './componentB'

function ParentComponent(props) {
  const { step } = props
  switch(step) {
    case 'A':
      return (<ComponentA />)
    case 'B':
      return (<ComponentB />)
  }
}

测试

import ParentComponent from './ParentComponent'
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

const renderCompo = (props = {}) => mount(
  <ParentComponent step={'A'} {...props} />
)

describe('ParentComponent', () => {

  it('should render the <ComponentA /> as its child when passed `A` as the value of step props', () => {
    const renderedComponent = renderCompo()
    // I know this is not correct use of find but this serve as illustration of what I'm trying to assert
    expected(renderedComponent.find(<ComponentA />).length).toEqual(1)
  })
  it('should NOT render the <ComponentB /> as its child when passed `A` as the value of step props', () => {
    const renderedComponent = renderCompo()
    // I know this is not correct use of find but this serve as illustration of what I'm trying to assert
    expected(renderedComponent.find(<ComponentA />).length).toEqual(0)
  })

  it('should render the <ComponentB /> as its child when passed `B` as the value of step props', () => {
    const renderedComponent = renderCompo({ step: 'B' })
    expected(renderedComponent.find(<ComponentB />).length).toEqual(1)
  })
  it('should render the <ComponentA /> as its child when passed `B` as the value of step props', () => {
    const renderedComponent = renderCompo({ step: 'B' })
    expected(renderedComponent.find(<ComponentB />).length).toEqual(0)
  })
})

我尝试了各种方法来断言这一点，但是没有运气.

I tried various way to assert this but with no luck.

例如，我知道如何使用find方法搜索div或h3，但是我想针对子组件而不是根子DOM节点来测试子组件.可能是不同组件中的同一个DOM节点.

I know how to use the find method to - for instance - search a div or a h3, but I would like to test the children against a react component and not the root DOM node the child renders as it might be the same DOM node in different components.

–––––––––––––––––– 编辑 : –––––––––––––––––

––––––––––––––––––– EDIT : –––––––––––––––––––

使用

expect(renderedComponent.find(ComponentA).length).toEqual(1)

实际上工作完美

我的组件不符合规格.

推荐答案

尝试在每个it中使用所需的道具明确安装组件.然后，当您使用Jest时，可以使用.toMatchSnapshot()方法.然后，您可以打开生成的快照文件，以确保所有内容都按预期呈现.

Try explicitly mounting the component with the props you want in each it. Then as you are using Jest you can use the .toMatchSnapshot() method. You can then open the snapshot files that are generated to make sure everything is rendering as you would expect.

请注意，您需要酶对json 才能正常工作

Note you will need enzyme-to-json for the below example to work

it('should render the <ComponentA /> as its child when passed `A` as the value of step props', () => {
    const wrapper = mount(<ParentComponent step={'A'} />)
    expected(toJson(wrapper)).toMatchSnapshot()
  });
it('should render the <ComponentB /> as its child when passed `B` as the value of step props', () => {
    const wrapper = mount(<ParentComponent step={'B'} />)
    expected(toJson(wrapper)).toMatchSnapshot()
  })

这篇关于使用jest.js断言react组件child(ren)是否存在/不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！