javascript - 您如何在 Jest 中手动模拟您自己的文件之一?

标签 javascript unit-testing reactjs jestjs

我试图在 Jest 中模拟一个对象(我创建的),这样我就可以在 react 组件中提供默认行为(因此不使用真正的实现)

这是我的 React 组件 ChatApp(非常简单)

'use strict';
var React, ChatApp, ChatPanel, i18n;

React = require('react');
ChatPanel = require('./chat_panel');
i18n = require('../support/i18n');

ChatApp = React.createClass({
  render() {
    return (
      <div className="chat-app">
        <h1>{i18n.t("app.title")}</h1>
        <ChatPanel />
      </div>
    );
  }
});

module.exports = ChatApp;

所以我有一个自定义的 I18n 依赖项来进行翻译(I18n 是我写的东西,它是 node-polyglot 的包装器)。

所以我想做一个基本测试,看看 H1 中是否有正确的词,但我不想在我的 I18n 对象上设置 jest.dontMock(),因为我不想让它使用ChatApp 测试中的真实对象。

所以按照 jest 网站上的基本说明,我创建了一个 mocks 文件夹并为 i18n 创建了一个 mock 文件,它从原始对象生成一个 mock,然后覆盖 t 方法并添加一个允许我为 t 设置返回字符串的方法。

这是模拟对象

'use strict';
var i18nMock, _returnString;

i18nMock = jest.genMockFromModule('../scripts/support/i18n');

_returnString = "";

function __setReturnString(string) {
  _returnString = string;
}

function t(key, options = null) {
  return _returnString;
}

i18nMock.t.mockImplementation(t);
i18nMock.__setReturnString = __setReturnString;

module.exports = i18nMock;

现在在我的 ChatApp 测试中,我需要在每个之前进行模拟,如下所示:

'use strict';
var React, ChatApp, TestUtils, path;

path = '../../../scripts/components/';
jest.dontMock( path + 'chat_app');

React = require('react/addons');
ChatApp = require( path + 'chat_app');
TestUtils = React.addons.TestUtils;

describe('ChatApp', () => {
  beforeEach(() => {
    require('i18n').__setReturnString('Chat App');
  });

  var ChatAppElement = TestUtils.renderIntoDocument(<ChatApp />);

  it('renders a title on the page', () => {
    var title = TestUtils.findRenderedDOMComponentWithTag(ChatAppElement, 'h1');
    expect(title.tagName).toEqual('H1');
    expect(title.props.children).toEqual('Chat App');
  });
});

如果我 console.log 测试中的 i18n 对象然后我得到正确的模拟对象,__setReturnString 也会被触发(就好像我在该消息中 console.log 我看到了日志)。

但是,如果我在实际的 React 组件中对 i18n 对象进行 console.log,那么它会得到一个 Jest 模拟,但它不会得到我的 Jest 模拟,所以 t 方法是一个不做任何事情的空方法,这意味着测试失败。

知道我做错了什么吗?

非常感谢

最佳答案

我也无法让 __mocks__ 文件夹正常工作。我解决这个问题的方法是使用 jest.setMock(); 方法。

在你的情况下,你会 jest.setMock('../../../scripts/i18n/', require('../__mocks__/i18n');

显然,我不确定你的 mock 的位置和你正在使用的真实库的位置,但第一个参数应该使用你的真实模块的存储路径,第二个应该使用你的路径模拟被存储。

这应该会强制您的模块和您需要的所有模块(包括 React)使用您手动模拟的 i18n 模块。

关于javascript - 您如何在 Jest 中手动模拟您自己的文件之一?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28514868/

相关文章:

javascript - Django 和 React : csrf cookie is not being set in request header

javascript - 如何在 React Hook 表单中将对象传递给 onSubmit

javascript - 重用几何会导致间歇性的 THREE.JS 纹理错误

javascript - 谷歌图表 : condensing hAxis values

javascript - 将可变长度子字符串替换为单个字符 JavaScript

c# - 隐藏类 - 但无法进行单元测试

javascript - Wistia 视频自定义 Action

python - 在应用程序上下文之外工作; FlaskClient 对象没有属性 'app_context'

java - 为自定义迭代器编写测试用例

javascript - React-Router-Dom `Link` 更改路由,但没有组件加载