Jest 无法读取未定义对象的属性答案

【问题标题】：Jest cannot read property of undefined objectJest 无法读取未定义对象的属性
【发布时间】：2021-04-30 01:34:53
【问题描述】：

在 React Native 中，我创建了一个 theme.js 文件，其中有一些函数可以根据公司的设计系统获取我的颜色。

// theme.js

const PRIMARY_COLORS = {
  900: '#000000',
  800: '#003030',
  700: '#004040',
  600: '#006060',
  500: '#00A090',
  400: '#00C0A0',
  300: '#00E0D0',
  200: '#C0FFF0',
  100: '#E0FFF0',
};

export function _primaryColor(code) {
  return PRIMARY_COLORS[code];
}

当使用 React 的默认测试运行 jest 时，它会抛出一个错误，指出 PRIMARY_COLORS 未定义。

// App-test.tsx

import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';

jest.useFakeTimers();

it('renders correctly', async () => {
  renderer.create(<App />);
});

如果对象在函数内部，则测试将正确运行，但这意味着每次函数运行时都会实例化对象。

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： reactjs react-native jestjs

【解决方案1】：

好像你在你的 App 组件中使用了 theme.js，所以在你的 App 的测试文件中模拟了 theme.js 文件，这应该可以修复错误。

【讨论】：

我在 App-text.tsx 中模拟了它们，但没有用
你是如何模拟它的？你能显示你的测试文件代码
问题中描述了测试文件。这是App-test.tsx
不，我是说你是如何在 App-test.tsx 文件中模拟 theme.js 文件的
尝试像这样模拟它：const mockGetprimaryColor = jest.fn(); jest.mock("provide absolute path here", () => ({ _primaryColor: (...args: any) => mockGetprimaryColor }));

【解决方案2】：

按照@Sakshi 的建议，我将测试文件中的函数模拟如下

import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';

jest.useFakeTimers();

jest.mock('../theme.ts', () => {
  const PRIMARY_COLORS = {
    900: '#000000',
    800: '#003030',
    700: '#004040',
    600: '#006060',
    500: '#00A090',
    400: '#00C0A0',
    300: '#00E0D0',
    200: '#C0FFF0',
    100: '#E0FFF0',
  };

  return {
    _primaryColor: (code) => PRIMARY_COLORS[code],
  };
});

it('renders correctly', async () => {
  renderer.create(<App />);
});

【讨论】：

【解决方案3】：

您必须从 theme.js 文件中手动导入测试文件中的常量。

【讨论】：