如何在 React 组件的渲染函数中测试函数和变量？

Question

我正在努力提高我的 React 组件的测试覆盖率，但我在测试组件的渲染方法中声明的变量和函数时遇到了问题。以下是我无法涵盖的几个示例：

1)

cityStateZip = `${cityStateZip} - ${location.zipExtension}`;

2)

directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;

3)

const onClick = (pricingTileId) => {
  if (store.selectedPharmacy !== pricingTileId) {
    store.setPharmacy(pricingTileId);
  }
};

代码如下：

class Tile extends Component {
  const { location, store } = this.props;
  render() {
    let directionsUrl = `https://maps.google.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    if (navigator.platform.indexOf('iPhone') !== -1
      || navigator.platform.indexOf('iPod') !== -1
      || navigator.platform.indexOf('iPad') !== -1) {
      directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    }

    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`;
    if (location.zipExtension) {
      cityStateZip = `${cityStateZip} - ${location.zipExtension}`;
    }

    const onClick = (pricingTileId) => {
      if (store.selectedLocation !== pricingTileId) {
        store.setLocation(pricingTileId);
      }
    };

    let selectedClass;
    if (store.selectedLocation === id) {
      selectedClass = 'selected';
    }

    return (

    )

是否有有效的方法来测试我忽略的渲染函数中声明的变量和函数？（我正在使用 Jest 和 Enzyme 进行测试）。谢谢！

Answer 1

您可以像这样重构您的组件：

class Tile extends Component {

  isMobile = () => {
    let mob = navigator.platform

    if (mob.indexOf('Iphone')) return true
    if (mob.indexOf('Ipad')) return true
    if (mob.indexOf('Ipod')) return true

    return false
  }

  isZipValid = () => !!this.props.location.zipExtension
  isLocationValid = (id) => this.props.store.location === id


  handleClick = (pricingTileId) => {
    const { store } = this.props;

    if (store.selectedLocation !== pricingTileId) {
      store.setLocation(pricingTileId);
    }
  }

  render() {


    let directionsUrl
    let selectedClass = isLocationValid() && 'selected';
    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`;

    if (!isMobile()) {
      directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    }

    if (isZipValid()) {
      cityStateZip = `${cityStateZip} - ${location.zipExtension}`;
    }
    return (
      <div> Anything</div>
    )
  }

..

============== 第 2 部分 ==================

您可以将它们提取到单独的文件中，例如 lib 或 helpers 然后将其导入到您的组件中。

像这样：

帮手：

//helpers.js

export const isMobile = (mob) => {

    if (mob.indexOf('Iphone')) return true
    if (mob.indexOf('Ipad')) return true
    if (mob.indexOf('Ipod')) return true

    return false
  }

最后在组件上：

   export { isMobile } from './helpers'

   if(isMobile(navigator.platform)){

    //you just abstracted the function

   }

结论：您的 isMobile() 可以很容易地从助手进行测试并提供给任何组件:)

现在您可以轻松地按功能测试功能

希望对你有所帮助:D

此致，

如何在 React 组件的渲染函数中测试函数和变量？

How can you test functions and variables within your react component's render function?

javascript

testing

reactjs

jestjs

enzyme