为什么浅渲染不能按预期工作？答案

【问题标题】：Why does shallow Rendering not work as expected?为什么浅渲染不能按预期工作？
【发布时间】：2017-11-28 06:23:34
【问题描述】：

我正在使用酶来测试我的create-react-app 组件，但它不能直观地工作。我是不是误解什么是浅层渲染？

import React from "react";
import { Card } from "./Card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

.test.js

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { Card } from "./Card";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find(Card)).to.have.length(3);
});

我希望它应该通过测试，因为它在 TestUser 中确实有 3 个 Card 组件

但它输出：TypeError: Cannot read property 'have' of undefined

它是如何工作的？

【问题讨论】：

标签： unit-testing reactjs enzyme airbnb-js-styleguide

【解决方案1】：

我也有同样的问题。它通过使用以下解决。

我在根级别创建了一个jest.config.js 文件并添加了以下代码。

module.export ={
  setupFiles:[ '<rootDir>/src/setUpTests.js']
 }

我已创建setUpTests.js 文件并添加以下代码。

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

并解决了我的问题。

【讨论】：

【解决方案2】：

试试这个。您必须将其作为字符串文字提供。对我来说，您使用的 expect 库也不是您从 chai 获得的库，并且可能有不同的辅助方法集，因此会出现该错误。不幸的是，我没有代码可以进一步检查。浅层渲染完全没有问题。

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { expect } from 'chai';

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).to.have.length(3);
});

另外你也不需要在这里声明，import Card from "./card";

在 TestUser 组件中像这样更改导入语句。

import Card from "./card";

所以现在您的TestUser 组件应该如下所示。

import React from "react";
import Card from "./card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

使用以下命令安装chai库。

npm install --save chai

如果您真的想使用 Jest，请按如下方式更改您的断言。

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).toHaveLength(3);
});

我个人喜欢 mocha，因为它的 API 很流畅。

希望这会有所帮助。快乐编码！

【讨论】：

我正在使用create-react-app。 enzyme doc，除了enzyme，我想我不需要安装其他任何东西。因为他们已经预先配置？我错了吗？
他们似乎在使用 jest 来断言：facebook.github.io/jest/docs/expect.html#content 您可以使用“npm runeject”弹出项目，然后对其进行自定义。然后你有更多的权力和控制权。之后，您可以根据需要安装 mocha。我是摩卡迷。如果您需要使用 Jest，您可能需要进行一些研究并解决问题。

【解决方案3】：

在这种情况下，由于您的 div 嵌套，浅层渲染不会达到您想要的深度。 http://airbnb.io/enzyme/docs/api/shallow.html

使用mount 或使用.dive() API 可以更进一步。请参阅酶文档中的示例： http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

【讨论】：

【解决方案4】：

it("should render right", () => { 
  const component = shallow(<TestUser />);
  const element = component.find('wrapper');
  chai.expect(element.props.children).to.have.length(3); 
});

【讨论】：

【解决方案5】：

使用 ().toEqual() 代替 .to.have.length() 因为 .to.have 不是 jest expect 库中的任何函数 Visit here for more info

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
const component = shallow(<TestUser />);

expect(component.find('Card').length).toEqual(3);
});

【讨论】：