Question

我正在使用酶来测试我的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);
});

我希望它应该通过测试，因为Card

中有3 TestUser个组件

但是输出：TypeError：无法读取属性'have'of undefined

这是如何运作的？

Answer 1

试一试。你必须把它作为一个字符串文字。另外，对我来说，您使用的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语句。

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。

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

Answer 2

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

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

Answer 3

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

我已经在根级别创建了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() });

解决了我的问题。

Answer 4

使用（）.toEqual（）代替.to.have.length（），因为.to.have在笑料中没有任何功能 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);
});

Answer 5

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

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

5 个答案: