使用开玩笑和酶测试材料 UI 的自动完成

Question

我一直在为我的React应用程序编写开玩笑的测试，并且遇到了问题。

我的组件称为AutoCompletedRopdown，它用作包装器，围绕材料UI组件，称为AutoComplete。

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

我正在使用浅渲染，所以也许我需要用身体标签渲染整个文档，然后在那里检查？我不确定该怎么做，因为我通常对测试非常陌生。任何帮助将不胜感激。

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-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