Jest：当同一模块也命名为export时，如何模拟默认导出组件？ [英] Jest: How to mock default export Component when same module also has named export?

问题描述

我有一个ES6模块，默认情况下导出一个React Component类，但也导出一个普通的JS函数作为命名导出。在测试使用此模块的其他软件包时，我想模拟默认导出组件和命名导出函数，以保持单元测试的纯净。

I have an ES6 module that exports a React Component class by default, but also exports a plain JS function as a named export. When testing other packages that use this module, I want to mock both the default exported component and named exported function to keep my unit tests pure.

模块看起来像这样：

import React, { Component } from 'react';

export default class MyComponent extends Component {
  render() {
    return <div>Hello</div>
  }
}

export function myUtilityFunction() { return 'foo' };

我想使用以下语法来模拟导出：

I would like to use the following syntax to mock the exports:

import React from 'react';
import MyComponent, { myUtilityFunction } from './module';

jest.mock('./module');
MyComponent.mockImplementation(() => 'MockComponent');
myUtilityFunction.mockImplementation(() => 'foo');

但是，当我尝试使用这种语法时，MyComponent在其他地方使用时似乎没有被模拟组件。当我尝试像这样模拟MyComponent并自己渲染它时，它会渲染为null。

When I try to use this syntax, however, MyComponent does not appear to be mocked when used within other components. When I try to mock MyComponent like this and render it on its own, it renders out to null.

这种行为很奇怪，因为如果我使用完全相同的语法，但两个导入都是JavaScript函数，模拟工作正如预期的那样。请参阅我在这里打开的StackOverflow问题，确认当导入都是函数时语法有效。

This behavior is very strange, because if I use the exact same syntax, but both imports are JavaScript functions, the mocking works as expected. See the StackOverflow issue I opened here that confirms that the syntax works when the imports are both functions.

这是一个GitHub repo演示问题，以及几个解决方案我尝试过： https://github.com/zpalexander/jest-enzyme-problem

Here is a GitHub repo demoing the problem, as well as several solutions I've tried: https://github.com/zpalexander/jest-enzyme-problem

您可以构建仓库并使用yarn install&&运行测试纱线测试

You can build the repo and run the tests with yarn install && yarn test

谢谢！

推荐答案

我认为问题在于ShallowWrapper类的getElement方法需要传递一个包含render方法的类。为此，MyComponent.mockImplementation需要更完全地模拟类构造函数。

I think the issue is that the ShallowWrapper class's getElement method needs to be passed a class that contains a render method. To do that, your MyComponent.mockImplementation needs to more fully mock a class constructor.

有关如何模拟类构造函数的详细信息，请参阅从mockImplementation开始的Jest文档。也可用于模拟类构造函数： https： //facebook.github.io/jest/docs/en/mock-function-api.html#mockfnmockimplementationfn

For details on how to mock a class constructor, see the Jest documentation starting at "mockImplementation can also be used to mock class constructors:" https://facebook.github.io/jest/docs/en/mock-function-api.html#mockfnmockimplementationfn

使用Jest文档作为模型，我们可以模拟MyComponent类的构造函数和使它可以像酶一样浅呈现：

Using the Jest documentation as a model, we can mock the MyComponent class constructor and make it shallow renderable by enzyme like this:

MyComponent.mockImplementation(() => {
  return {
    render: () => <div>MockComponent</div>
  };
});

现在，当getElement寻找渲染方法时，它会找到它。

Now when getElement goes looking for a render method it will find it.

以下是从您的仓库在App.mockImplementation.test.js文件中实现此更改的要点： https://gist.github.com/timothyjellison/a9c9c2fdfb0b30aab5698dd92e901b24

Here's a gist that implements this change on the App.mockImplementation.test.js file from your repo: https://gist.github.com/timothyjellison/a9c9c2fdfb0b30aab5698dd92e901b24

这篇关于Jest：当同一模块也命名为export时，如何模拟默认导出组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！