2

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

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

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

这是如何运作的？

4

5 回答 5

2

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

我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() });

并解决了我的问题。

于 2019-06-19T18:14:12.110 回答
1

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

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

于 2017-06-27T10:37:37.427 回答
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 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 很流畅。

希望这可以帮助。快乐编码！

于 2017-06-25T02:11:00.343 回答
-1 
it("should render right", () => { 
  const component = shallow(<TestUser />);
  const element = component.find('wrapper');
  chai.expect(element.props.children).to.have.length(3); 
});
于 2017-06-25T02:19:14.673 回答
-1

使用 ().toEqual() 而不是 .to.have.length() 因为 .to.have 不是 jest expect 库中的任何函数 访问此处了解更多信息

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);
});
于 2018-11-20T15:02:25.520 回答