Jest：用不同测试的不同值替换命名导入

9vw9lbht 于 11个月前发布在 Jest

关注(0)|答案(1)|浏览(208)

假设我有一个some-config-package依赖项，它导出一个名为config的命名导出：
some-config-package

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

字符串
假设我有一个组件：

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。
所以我在测试中尝试了这样的东西：

测试AB.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();
    }
  }
});

型
好吧，这不起作用。ComponentAB中的console.log显示的是undefined，而不是true/false，第一个测试用例失败了。第二个测试用例没有失败，因为undefined和false都是falsy。
那么，我想要的东西是可能的吗？如果不可能，我应该如何测试不同的场景呢？在我的真实的世界中，有更复杂的逻辑需要测试，但这个示例代码是我遇到困难的部分。

jestjs

来源：https://stackoverflow.com/questions/77524390/jest-replace-a-named-import-with-a-value-that-is-different-for-different-tests

1条答案

按热度按时间

t3irkdon1#

可以使用jest.replaceProperty(object, propertyKey, value)。
ComponentAB.js：

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

const A = () => <h1>Component A</h1>;
const B = () => <h1>Component B</h1>;

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

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

export default SomeComponent;

字符串
some-config-package.js：

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

型
ComponentAB.test.js：

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

型

赞(0）回复(0）举报 11个月前

我来回答

Jest：用不同测试的不同值替换命名导入

1条答案

相关问题

热门标签

最新问答