运行测试时，ShallowWrapper 为空答案

【问题标题】：ShallowWrapper is empty when running test运行测试时，ShallowWrapper 为空
【发布时间】：2019-10-23 08:48:17
【问题描述】：

我是测试新手，所以我正在尝试将 Enzyme 添加到我的一个项目中。我的问题是当使用find() 时，ShallowWrapper 是空的。另外我正在使用 Material UI，所以我不知道这是否是问题的一部分。

我正在测试的组件

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  background: {
    backgroundColor: "#2E2E38"
  },
  title: {
    color: "#FFE600",
    flexGrow: 1
  }
});

const NavBar = ({ classes }) => {
  return (
    <div className={classes.root} data-test="nav-bar">
      <AppBar className={classes.background}>
        <Toolbar>
          <Typography variant="h5" className={classes.title}>
            App
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default withStyles(styles)(NavBar);

测试

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

describe("NavBar component", () => {

  it("Should render without errors.", () => {
    let component = shallow(<NavBar />);
    let navbar = component.find("data-test", "nav-bar");
    console.log("Log is", component);
    expect(navbar).toBe(1);
  });
});

【问题讨论】：

标签： reactjs unit-testing material-ui enzyme

【解决方案1】：

尝试将find(selector) 中的selector 更改为以下内容，以使用data-test="nav-bar" 定位元素。您可能需要使用dive() 才能访问样式组件的内部组件：

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

describe("NavBar component", () => {

  it("Should render without errors.", () => {
    const component = shallow(<NavBar />);
    // Use dive() to access inner components
    const navbar = component.dive().find('[data-test="nav-bar"]');
    // Test that we found a single element by targeting length property
    expect(navbar.length).toBe(1);
  });
});

如果您愿意，也可以使用对象语法：

const navbar = component.find({'data-test': 'nav-bar'});

除了使用dive()，您也可以用mount() 组件代替shallow()，但这取决于您的用例：

import React from "react";
import { mount } from "enzyme";
import NavBar from "./NavBar";

describe("NavBar component", () => {

  it("Should render without errors.", () => {
    const component = mount(<NavBar />);
    // Use dive() to access inner components
    const navbar = component.find('[data-test="nav-bar"]');
    // Test that we found a single element by targeting length property
    expect(navbar.length).toBe(1);
  });
});

希望对您有所帮助！

【讨论】：

感谢您的回答！它仍然无法通过测试。它向我抛出了错误：Expected value to be (using ===): 1 Received: 0。真的不知道发生了什么。
@TheWoodStudio 我更新了答案。您可以使用dive() 访问此样式组件的内部组件。

【解决方案2】：

我因为找不到 SingleDatePicker 元素的不同原因遇到了这个问题。 2. 文档中的 React Component Constructor 中的示例为我修复了它。

https://enzymejs.github.io/enzyme/docs/api/selector.html#1-a-valid-css-selector

使用

    wrapper.find(SingleDatePicker).prop('onDateChange')(now);

而不是

    wrapper.find('SingleDatePicker').prop('onDateChange')(now);

为我做了诀窍。

【讨论】：