javascript - Jest 和 enzyme 的问题预期值为(使用===):

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

当使用调试器时，我看到 enzyme 的树为

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

Answer 1

您可以使用反引号来渲染组件中的文本，以避免在没有换行的情况下渲染。渲染组件时您还缺少一个 prop，这意味着该标签将具有 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());