开玩笑：将命名导入替换为不同测试的不同值

Question

假设我有一个

some-config-package

依赖项，它导出一个名为

config

的命名导出：

一些配置包

export const config = {
  featureToggles: {
    someFeatureToggle: false;
  }
};

并且，假设我有一个组件：

ComponentAB.js

import React from "react";
import { config } from 'some-config-package';

import A from './A';
import B from './B';

function SomeComponent() => {
  console.log('config.featureToggles.someFeatureToggle', config.featureToggles.someFeatureToggle);

  return config.featureToggles.someFeatureToggle ? <A /> : <B />;
  }
}

我想测试是否渲染了正确的内容。在这种情况下，我希望能够将 featureToggle 替换为

true

或

false

。

所以我在测试中尝试了这样的事情：

ComponentAB.test.js

import React from "react";
import { render, screen } from "@testing-library/react";

import { config } from 'some-config-package';

import ComponentAB from './ComponentAB.js';

jest.mock("some-config-package");

describe("ComponentAB", () => {
  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false]
  ])('%s', (_, someFeatureToggle) => {
    config.featureToggles = {
      someFeatureToggle,
    };

    render(<ComponentAB />);
    
    if (someFeature === true) {
      expect(screenGetByRole('heading'{ name: /Component A/i}).toBeInTheDocument();
    }

    if (someFeature === false) {
      expect(screenGetByRole('heading'{ name: /Component B/i }).toBeInTheDocument();
    }
  }
});

好吧，那是行不通的。

console.log

内的

ComponentAB

显示

undefined

，而不是

true

/

false

，第一个测试用例失败。第二个则不然，因为

undefined

和

false

都是

falsy

。

那么，我想要的到底有可能吗？如果没有，我应该如何测试不同的场景？在我的现实案例中，有更复杂的逻辑需要测试，但这个示例代码是我遇到困难的部分。

Answer 1

您可以使用

jest.replaceProperty(object, propertyKey, value)

。

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { describe, expect, it } from '@jest/globals';
import { config } from './some-config-package';
import ComponentAB from './ComponentAB.js';

describe('ComponentAB', () => {
  it.each([
    ['should show A when someFeature is toggled on', true],
    ['should show B when someFeature is toggled off', false],
  ])('%s', (_, someFeatureToggle) => {

    jest.replaceProperty(config.featureToggles, 'someFeatureToggle', someFeatureToggle);

    render(<ComponentAB />);

    if (someFeatureToggle === true) {
      expect(screen.getByRole('heading', { name: /Component A/i })).toBeInTheDocument();
    }

    if (someFeatureToggle === false) {
      expect(screen.getByRole('heading', { name: /Component B/i })).toBeInTheDocument();
    }
  });
});

测试结果：

> jest

  console.log
    config.featureToggles.someFeatureToggle true

      at log (stackoverflow/77524390/ComponentAB.js:8:10)

  console.log
    config.featureToggles.someFeatureToggle false

      at log (stackoverflow/77524390/ComponentAB.js:8:10)

 PASS  stackoverflow/77524390/ComponentAB.test.js
  ComponentAB
    ✓ should show A when someFeature is toggled on (44 ms)
    ✓ should show B when someFeature is toggled off (9 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.677 s, estimated 1 s