酶在浅层测试中找不到子成分答案

【问题标题】：Enzyme cannot find child component in shallow test酶在浅层测试中找不到子成分
【发布时间】：2018-02-09 21:04:31
【问题描述】：

这不是用酶而不是商店来呈现反应/回流测试的正确方法吗，即"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' /> 被渲染，但酶找不到它作为一个组件。对我来说，docs 表明这正是我应该做的。我想我可以检查那个类的孩子，但这似乎比检查组件本身更混乱，例如 Spinner 组件中的类更改。

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

【问题讨论】：

你使用什么作为测试运行器？您使用的测试运行程序似乎不接受 .to.have 语法
@Grandas 这是 chaijs 语法

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

测试可以使用 shallow 正常工作，但断言有 TypeError，因为它不存在 - 看起来您正在使用 Jest，但酶文档显示使用 chai BDD 库的断言。

改用 Jest 等效项：

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

【讨论】：

【解决方案2】：

你应该使用 mount()。

来自https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md

import test from 'ava';
import React from 'react';
import { mount, shallow, render } from 'enzyme'

import LoadingSpinner, {Controls} from './LoadingSpinner';
// jsdom init start
const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
    userAgent: 'node.js',
};
copyProps(window, global);
// jsdom init end

test('<Controls />' , t => {
    let wrapper = shallow(<Controls />);
    let mntWrapper = mount(<Controls />);
    t.true(wrapper.length == 1);
    t.true(wrapper.find(LoadingSpinner).length === 1);

    t.true(mntWrapper.find("img").length === 1);
    t.true(mntWrapper.render().find('img').length === 1);
    // if you need to test attributes check below.
    t.true(mntWrapper.render().find('img')[0].attribs.src.indexOf('foo') >= 0);
});

【讨论】：