ShallowWrapper пуст при запуске теста

Question

Я новичок в тестировании, поэтому я пытаюсь добавить энзим в один из моих проектов. Моя проблема в том, что при использовании 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);
  });
});

Answer 1

Попробуйте изменить селектор в find(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() вместо shallow() можно использовать mount() компонент, но это зависит от вашего варианта использования:

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

Надеюсь, это поможет!