Question

我有一个测试用例，但是提供的错误是：

Expected value to be (using ===):
      true
    Received:
      false

我不明白为什么，组件的属性为true，结果dom应该是正确的。

可能导致问题的原因是什么？
如何看待开玩笑和酶的比较？

import React from 'react'
import { shallow } from 'enzyme'

import Location from './Location'

describe('A suite', function () {
  it('should render without throwing an error', function () {
    expect(shallow(
      <Location
        id={3067696}
        name='Prague'
        country='CZ'
      />).contains(<li><a>Prague, CZ</a></li>)).toBe(true)
  })
})

import React from 'react'

const Location = ({ onLocationClick, id, name, country }) => (
  <li>
    <a onClick={onLocationClick}>{name}, {country}</a>
  </li>
)

export default Location

此测试用例改为：

  it('should render to static HTML', function () {
    expect(render(
      <Location
        id={3067696}
        name='Prague'
        country='CZ'
      />
      ).text()).toEqual('Prague, CZ')
  })

使用调试器时，我看到来自酶的树

 <li>
        <a onClick={[undefined]}>
          Prague
          ,
          CZ
        </a>
      </li>

Answer 1

您可以使用反向标记来渲染组件中的文本，以避免在没有新行的情况下进行渲染。您在渲染组件时也错过了一个道具，这意味着当标记呈浅层渲染时，该标记会附加undefined onClick属性。

以下示例解决了道具问题，但如果将其替换为.contains(<li><a onClick={undefined}>Prague, CZ</a></li>)).toBe(true)，也可以通过测试。只有当您不想通过onLocationClick道具时，才会这样做。

一个方便的提示是，您可以通过渲染它来调试浅渲染组件，然后附加.debug（）以查看它不匹配的原因。您可以在列出的2个代码段下方找到一个示例来解决您的问题。

＆＃13;

describe("Test Suite", () => {
  it("renders", () => {
    expect(shallow(
      <Location
        id={3067696}
        name='Prague'
        country='CZ'
        onLocationClick='test'
      />).contains(<li><a onClick="test">Prague, CZ</a></li>)).toBe(true)
  });
});

＆＃13;

import React from 'react';

const Location = ({ onLocationClick, id, name, country }) => (
    <li>
        <a onClick={onLocationClick}>{`${name}, ${country}`}</a>
    </li>
);

export default Location;

＆＃13;

===调试浅层渲染组件

＆＃13;

const wrapper = shallow(
  <Location
    id={3067696}
    name='Prague'
    country='CZ'
    onLocationClick='test'
  />
);

console.log(wrapper.debug());

＆＃13;

jest和enzyme的问题预期值为（使用===）：

1 个答案: