javascript - 使用 enzyme 进行浅层渲染 : actual and expected output does not match

Question

我只是在个人项目上编写代码以供学习。

我有一个类定义如下:

import React from 'react';
export default class Counter{
    counterValue = 0;


    update(newValue){
        this.counterValue = newValue;
    }

    getValue(){
        return this.counterValue;
    }

    displayValue(){
        return <div>{this.getValue()}</div>
    }

}

我正在尝试在displayValue()上创建一个测试功能。代码如下:

import React from "react";
import Counter from "./Counter";
import Adapter from "enzyme-adapter-react-16";
import { shallow, mount, render, configure } from "enzyme";

configure({ adapter: new Adapter() });
var c1 = new Counter();
c1.update(188);

describe("check displayValue() method", () => {
  it("renders a div", () => {
    const wrapper = shallow(c1.displayValue());
    expect(wrapper.contains(<div>188</div>)).toBe(true);
  });
});

我使用了命令npm test并执行了“react-scripts 测试”。

测试失败。它告诉我，

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

错误是由于这一行造成的:

expect(wrapper.contains(<div>188</div>)).toBe(true);

我很难理解这一点，希望得到建议。谢谢!

Answer 1

您需要将 {} 添加到号码中，如下所示:

import React from "react";
import Counter from "./Counter";
import Adapter from "enzyme-adapter-react-16";
import { shallow, mount, render, configure } from "enzyme";

configure({ adapter: new Adapter() });
var c1 = new Counter();
c1.update(188);

describe("check displayValue() method", () => {
  it("renders a div", () => {
    const wrapper = shallow(c1.displayValue());
    expect(wrapper.contains(<div>{188}</div>)).toBe(true);
  });
});

查看更多详情here