Question

我从最初使用CRA创建的Web应用程序进行了测试。因此，它使用Jest和react-testing-library。我也在TypeScript环境中。

我的考试开始：

import { render, screen } from "@testing-library/react";
import dotenv from 'dotenv';
import App from './App';
. . . .
    jest.mock('dotenv');
//(what goes here?)

但是这里是我需要帮助的地方。我不确定如何模拟该模块。在组件中，我有类似的内容：

if (process.env.REACT_APP_CONSTRUCTION === "true") {
    return (<UnderConstruction />);
} else {
    return (<App/ >);
}

在测试此组件时，我想测试两种情况，一种情况是环境返回“ true”，另一种情况是其他情况。

想法还是建议？

Answer 1

您可以在每次测试后按照如下所述创建模拟env variables。另外，您无需模拟jest.mock('dotenv');，因此可以在测试文件中删除该部分。

const OLD_ENV = process.env

afterEach(() => {
  cleanup()
  jest.clearAllMocks()
  jest.resetModules()
  process.env = { ...OLD_ENV }
  delete process.env.NODE_ENV
})

it('scenario 1', () => {
  // Given
  process.env.REACT_APP_CONSTRUCTION = true // mock variable for scenario 1

  // When
  const { queryByText } = render(<App />)
  const underConstructionText = queryByText('Under Construction')// Just an example

  // Then
  expect(underConstructionText).toBeInTheDocument()

})

it('scenario 2', () => {
  // Given
  process.env.REACT_APP_CONSTRUCTION = false // mock variable for scenario 2
  ...

  // When
  const { queryByText } = render(<App />)
  const underConstructionText = queryByText('Under Construction')
 
  // Then
  expect(underConstructionText).not.toBeInTheDocument()
})

用玩笑嘲笑dotenv

1 个答案: