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

Question

我正在使用 enzyme 来测试我的 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:无法读取未定义的属性“have”

这是如何工作的？

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

解决了我的问题。