开玩笑和酶的问题预期值为（使用===）：

Question

我有一个测试用例，它失败了，提供的错误是：

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

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

什么可能导致问题？
如何看jest和enzyme比较的是什么？

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 属性。

下面的例子解决了 prop 问题，但是如果你用 .contains(<li><a onClick={undefined}>Prague, CZ</a></li>)).toBe(true) 替换它也可以让测试通过。只有当你不想不通过 onLocationClick prop.

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

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

import React from 'react';

const Location = ({ onLocationClick, id, name, country }) => (
    <li>
        <a onClick={onLocationClick}>{`${name}, ${country}`}</a>
    </li>
);

export default Location;

=== 调试浅渲染组件

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

console.log(wrapper.debug());

开玩笑和酶的问题预期值为（使用===）：

Issue with jest and enzyme Expected value to be (using ===):

javascript

jestjs

enzyme