使用 react-testing-library 运行 jest 测试时出错答案

【问题标题】：Error in running jest test with react-testing-library使用 react-testing-library 运行 jest 测试时出错
【发布时间】：2019-07-08 10:11:45
【问题描述】：

这是我第一次编写测试。我正在为使用钩子编写的 ReactJS 应用程序编写测试，并使用 Jest 和 react-testing-library 进行测试。

这是我的功能组件：

const ItemDetails = ({ item }) => {
  const { code } = item;
  const { getBarcode } = useStationContext();

  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          getBarcode(code);
        }}
        style={{ float: 'right' }}
      >
        Print Barcode
      </Button>
      <List
        bordered
        dataSource={formatData(item)}
        renderItem={({ title, value }) => (
          <List.Item>
            <List.Item.Meta
              description={
                <Wrapper>
                  <p>{upperCase(title)}</p>
                  <div>{value}</div>
                </Wrapper>
              }
            />
          </List.Item>
        )}
      />
    </>
  );
};

export default ItemDetails;

和测试文件：

import React from 'react';
import { render, cleanup } from 'react-testing-library';
import ItemDetails from '../containers/Items/ItemPage/ItemDetails';

afterEach(cleanup);

describe('formatData()', () => {
  it('Return Details about item', async () => {
    const { getByText, getByTestId, container, asFragment } = render(
      <ItemDetails
        item={{
          id: '296-c-4f-89-18',
          barcode: 'E-6',
        }}
      />,
    );

    global.console = {
      log: jest.fn(getByText, getByTestId, container, asFragment),
    };

    expect(global.console.log).toHaveBeenCalledWith('test');
  });
});

当我运行测试时，我得到了这个错误：

TypeError: 无法读取 null 的属性“getBarcode”

我不知道如何解决这个问题？

【问题讨论】：

这可能取决于 useStationContext 是什么。请为您的案例提供stackoverflow.com/help/mcve。
这是一个上下文。

标签： reactjs testing jestjs react-testing-library

【解决方案1】：

期望是错误的，因为console.log 没有在任何地方调用。像 global.console = ... 这样模拟 console 对象是一种不好的做法，因为它会在测试之间持续存在并且可能会破坏依赖它的东西，包括测试运行器本身。

与项目code 密钥不一致，提供为barcode。

上下文值应为undefined，除非提供了默认值。应该在测试中提供。

应该是这样的：

const getBarcodeMock = jest.fn();

const { getByText, getByTestId, container, asFragment } = render(
 <StationContext.Provider value={{ getBarcode: getBarcodeMock }}>
  <ItemDetails
    item={{
      id: '296-c-4f-89-18',
      code: 'E-6',
    }}
  />
 </StationContext.Provider>
);

// ...simulate button click...

expect(getBarcodeMock).toBeCalledWith('E-6');

【讨论】：