使用酶进行浅渲染：实际和预期输出不匹配

Question

I am just writing code on a personal project for learning.

I have a class defined as below:

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

}

I am trying to create a test on the displayValue() function. Code is below:

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

I used the command npm test and a 'react-scripts test' was executed.

The test fails. It tells me that

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

Expected: true
Received: false

and the error is due to this line:

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

I have trouble understanding this and would appreciate advice. Thank you!

Answer 1

you need to add {} to the number like this:

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

for more detail check here