Question

我正试图达到100％的测试覆盖率，而且我只一行不知道如何测试。谁能帮我？我正在使用Jest，React-testing-library和ReactJS。

我也希望能得到有关如何测试该行的解释，因为我试图变得更好地进行测试。

const LatestDataListItem = props => {
  const getThemeTone = useThemeTone(); /* this hooks is simply returning a string(whick can be dark or light) */
  return (
      <StyledItem {...props}>
        <StyledValue
          primaryTextProps={{
            style: {
              fontSize: '32px',
              color: isCaution(props) /* this is what i'm trying to cover */ 
                ? getCautionColorByTheme(getThemeTone).red
                : getCautionColorByTheme(getThemeTone).blue
            }
          }}
        />
      </StyledItem>
  );
};

评论行是我要测试的内容：

color: isCaution(props) 
? getCautionColorByTheme(getThemeTone).red : getCautionColorByTheme(getThemeTone).blue

这是isCaution函数：

const isCaution = ({ caution }) => {
  return true; /* returning true only to make easier to post here */
};

这是getCautionColorByTheme：

const colorsByThemeTone = {
  light: {
    blue: '#0d3459',
    red: '#f2463d',
    lightRed: 'rgba(255, 0, 0, 0.07)'
  },
  dark: {
    blue: '#e8e8e8',
    red: '#fa5a4b',
    lightRed: '#fa5a4b'
  }
};

const getCautionColorByTheme = themeTone => {
  return colorsByThemeTone[themeTone];
};

所以发生的是，colorsByThemeTone是具有两种类型的对象：明和暗。如果主题是深色或浅色，则getThemeTone返回，这就是我获得颜色的方式。

我当时在想，也许我需要导出getCautionColorByTheme以导入我的.test.js文件并在内部测试此功能，但是我不知道该怎么做。

这是我尝试过的：

  it('should render the test getCautionColorByTheme receiving light theme', () => {
    const colorsByThemeTone = {
      light: {
        blue: '#0d3459',
        red: '#f2463d',
        lightRed: 'rgba(255, 0, 0, 0.07)'
      },
      dark: {
        blue: '#e8e8e8',
        red: '#fa5a4b',
        lightRed: '#fa5a4b'
      }
    };
    const result = getCautionColorByTheme('light');
    expect(result).toMatchObject(colorsByThemeTone.light);
  });

谢谢！

Answer 1

我建议将getCautionColorByTheme()用作纯函数：

const getCautionColorByTheme = (themeTone) => {
  const colorsByThemeTone = {
    light: {
      blue: '#0d3459',
      red: '#f2463d',
      lightRed: 'rgba(255, 0, 0, 0.07)'
    },
    dark: {
      blue: '#e8e8e8',
      red: '#fa5a4b',
      lightRed: '#fa5a4b'
    }
  };

  return colorsByThemeTone[themeTone];
}

或者为实现更灵活的实现（您必须调整getCautionColorByTheme()的使用者）

const getCautionColorByTheme = ({
  themeTone,
  colorsByThemeTone = {
    light: {
    blue: '#0d3459',
    red: '#f2463d',
    lightRed: 'rgba(255, 0, 0, 0.07)'
  },
  dark: {
    blue: '#e8e8e8',
    red: '#fa5a4b',
    lightRed: '#fa5a4b'
  }
 }
}) => colorsByThemeTone[themeTone]

如果还没有，请使isCaution()变纯。这样，您可以隔离测试逻辑。

it('should render the test getCautionColorByTheme receiving light theme', () => {
  // should be the same what's the value in getCautionColorByTheme()
  // better if the default value in `getCautionColorByTheme()` is
  // exported as a variable and then used in the test.
  const colorsByThemeTone = {
    light: {
      blue: '#0d3459',
      red: '#f2463d',
      lightRed: 'rgba(255, 0, 0, 0.07)'
    },
    dark: {
      blue: '#e8e8e8',
      red: '#fa5a4b',
      lightRed: '#fa5a4b'
    }
  };

  const result = getCautionColorByTheme('light');

  expect(result).toMatchObject(colorsByThemeTone.light);
});

如何在带有Jest的React中测试这一行？

1 个答案: