Мелкий рендеринг с ферментом: фактический и ожидаемый результат не совпадает - PullRequest
0 голосов
/ 09 января 2020

Я просто пишу код для личного проекта для обучения.

У меня есть класс, определенный ниже:

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, и был выполнен «тест реагирующих сценариев».

Тест не пройден. Это говорит мне, что

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

Expected: true
Received: false

, и ошибка связана с этой строкой:

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

Мне трудно понять это, и я был бы признателен за совет. Спасибо!

1 Ответ

1 голос
/ 09 января 2020

вам нужно добавить {} к числу, подобному этому:

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

для более подробной проверки здесь

...