小编Ric*_*aly的帖子

我在使用外部库时无法弄清楚如何设置单元测试套件。我在本例中使用的库是 Phaser。这是我的两个简单的应用程序模块。

应用程序.js

// App.js - will be used to init the app
import Game from './Game';

const app = {
    initialize: function () {
        this.start();
    },
    start: function () {
        new Game();
    }
};

export default app;

游戏.js

// Game.js - used to build out a Phaser Game
// chosen to use classes in this case. (not sure if relevant)
import Phaser from '../libs/phaser/phaser.min';

class Game extends Phaser.Game {

    constructor() {
        super(500, 500, Phaser.AUTO, 'content', null);
    }
}

export …

我们正在尝试创建菜单样式布局.我正在使用css-columns属性来实现列的效果.内容是可变的,因此我们希望坚持使用此解决方案,因为我们希望浏览器组织内容以获得最佳匹配.

在下面的示例中,我们看到Chrome中的一些奇怪行为(版本32.0.1700.77)以及Firefox(版本24.0)中的一些不同(但同样奇怪)的问题,所以我假设它是我们的实现.

在Chrome中,我们看到第一列下面有一个很大的间隙,好像它将第三个LI放在那里开始,然后在渲染过程中的某个点将它移动到第二列的顶部.

在Firefox中,我们看到H3"炒蛋"留在第一列的底部,当第三列的其余内容移到第二列的顶部时.

实例:http://codepen.io/daviddarnes/pen/BeEIp

猜测: - 我们正在使用"break-inside:avoid;" 在OL内的每个元素上.这可能导致问题,但我们似乎无法纠正它. - 基于H3问题......可能与此有关吗？或者这个H3标签附近的元素.

我正在使用一个插件，它使用 json 模式呈现表单。对于输入、按钮等元素，它使用结构中的 React 组件来渲染组件。在我们的应用程序中，我们收到描述布局的模式 json。例如，我们可以收到这样的内容（简化以使其更易于阅读）

{
  component: 'input'
}

我有一个转换器函数，可以将组件放置在结构中检测到的位置。它将发送如下内容：（再次简化）

import Table from './Table';

covert(schema) {
  return {
    component: Table // where table is: (props:any) => JSX.Element
  }
}

我想为此编写一个测试，但无法将结果与预期进行比较。在我的测试中，我模拟了 Table 组件，并通过命名的模拟函数作为第二个参数发送。然后我在预期结果中使用相同的命名参数。

我收到错误：The second argument ofjest.mock must be an inline function。我可以将其更改为内联函数，但是如何在用于比较的预期结构中使用它？

// 测试代码

import React from 'react';

const mockComponent = () => <div>table</div>
jest.mock('./Table', mockComponent);

const schema = {
  component: 'table'
}

describe('Component Structure', () => {
  test('componentizes the schema structure', () => {

    const …