Question

我一直在为我的React应用程序编写jest测试，但我遇到了一个问题。

我有一个名为AutocompleteDropdown的组件，它作为名为AutoComplete的Material UI组件的包装器。

我需要一个模拟组件点击的测试，然后检查以确保下拉列表已呈现。这里的问题是列表被附加到文档的主体元素而不是组件本身。我无法弄清楚如何检查身体是否有新的清单。

我正在使用浅渲染，所以我可能需要使用body标签渲染整个文档，然后检查那里？我不知道如何解决这个问题，因为我对一般的测试非常陌生。任何帮助将不胜感激。

import React from 'react'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
const chai = require('chai')
const expect = chai.expect

import { AutocompleteDropdown } from './AutocompleteDropdown'
import { apps } from "constants/testData"

Enzyme.configure({ adapter: new Adapter() })

describe('Reporting component', () => {
  const component = shallow( 
    <AutocompleteDropdown
      list={ apps }
    /> 
  )

  it('Component should generate list when clicked', () => {
    component.simulate("click")

    // Somehow check for generated list?

  })

})

Answer 1

您可能想尝试类似

的内容

component.find('<.className> or <#id> or <element>').simulate('click')

其他一些链接：

https://medium.com/netscape/testing-a-react-redux-app-using-jest-and-enzyme-b349324803a9

https://reactjs.org/docs/shallow-renderer.html

https://facebook.github.io/jest/docs/en/tutorial-react.html

使用Jest和Enzyme

1 个答案: