javascript - enzyme 在浅层测试中找不到子组件

Question

这不是用 enzyme 进行 react /回流测试但没有商店的正确方法吗，即"dumb"

import React from 'react'
import { shallow, render } from 'enzyme'
import { Controls } from '../Controls' // named export
import LoadingSpinner from '../LoadingSpinner'
let wrapper
let loadingFlags = {
  controls: true
}
describe('<Controls />', () => {
  it('should render only the loading spinner', () => {
    wrapper = shallow(<Controls loadingFlags={loadingFlags} />) // this ensures the spinner will show until data is ready
    expect(wrapper.length).toEqual(1) // test passes
    expect(wrapper.find(LoadingSpinner)).to.have.length(1)
    // ^ TypeError: Cannot read property 'have' of undefined
  })
})

当我记录 wrapper.html()我可以看到 <img class='spinner' />已呈现，但 enzyme 无法将其作为组件找到。对我来说，docs表明这正是我应该做的。我想我可以检查是否有该类的 child ，但这似乎比检查组件本身更困惑，例如 Spinner 组件内的类更改。

如何测试此子组件是否存在？

Answer 1

测试将在 shallow 下正常工作，但断言有一个 TypeError 因为它不存在 - 看起来你正在使用 Jest，但 enzyme 文档显示使用 chai 的断言 BDD 库。

改用 Jest 等价物:

expect(wrapper.find(LoadingSpinner)).toHaveLength(1)