为我的第一个组件编写一个笑话测试

IT技术 javascript reactjs jestjs enzyme
2021-05-19 02:33:27

我刚刚完成了我的第一个Reactjs组件的编写，我准备编写一些测试（我使用了material-ui'sTable和Toggle）。我读过jest，enzyme但我觉得我仍然缺少一些东西。

我的组件看起来像这样（简化）：

export default class MyComponent extends Component {
    constructor() {
        super()
        this.state = {
            data: []
        }

        // bind methods to this
    }

    componentDidMount() {
        this.initializeData()
    }

    initializeData() {
        // fetch data from server and setStates
    }

    foo() {
        // manuipulatig data
    }

    render() {
        reutrn (
            <Toggle
                id="my-toggle"
                ...
                onToggle={this.foo}
            >
            </Toggle>

            <MyTable
                id="my-table"
                data={this.state.data}
                ...
            >
            </MyTable>
        )
    }
}

现在进行测试。我想为以下场景编写一个测试：

  1. 使用模拟数据馈送 initializeData。
  2. 切换我的切换
  3. 断言数据已更改（我应该自己断言数据还是断言 my-table 更好？）

所以我从一开始就开始：

describe('myTestCase', () => {
    it('myFirstTest', () => {
        const wrapper = shallow(<MyComponent/>);
    }
})

我运行了它，但它失败了： ReferenceError: fetch is not defined

我的第一个问题是，我如何模拟initializeData以克服调用使用 fetch 的真实代码的需要？

我遵循了这个答案：https : //stackoverflow.com/a/48082419/2022010并提出了以下内容：

describe('myTestCase', () => {
    it('myFirstTest', () => {
        const spy = jest.spyOn(MyComponent.prototype, 'initializeData'
        const wrapper = mount(<MyComponent/>);
    }
})

但是我仍然遇到相同的错误（我也尝试过使用componentDidMount而不是，initializeData但结果相同）。

更新：我错了。我确实得到了一个 fetch is not defined 错误，但这次它来自 Table 组件（它是 material-ui 表的包装）。现在回想起来，一路上确实有很多“取物”……我想知道如何照顾它们。

1个回答

fetch在浏览器中受支持，但 jest/enzyme 在 Node 环境中运行，因此fetch在您的测试代码中不是全局可用的函数。有几种方法可以解决这个问题：

1：全局模拟fetch- 这可能是最简单的解决方案，但可能不是最干净的。

global.fetch = jest.fn().mockResolvedValue({
  json: () => /*Fake test data*/
  // or mock a response with `.text()` etc if that's what
  // your initializeData function uses
});

2：将您的 fetch 调用抽象到服务层并将其作为依赖项注入 - 这将使您的代码更灵活（尽管更多样板），因为您可以将 fetch 实现隐藏在您选择的任何接口后面。然后在未来的任何时候，如果您决定使用不同的 fetch 库，您可以换出服务层中的实现。

// fetchService.js
export const fetchData = (url) => {
  // Simplified example, only takes 'url', doesn't
  // handle errors or other params.
  return fetch(url).then(res => res.json());
}

// MyComponent.js
import {fetchService} from './fetchService.js'

class MyComponent extends React.Component {
  static defaultProps = {
    // Pass in the imported fetchService by default. This
    // way you won't have to pass it in manually in production
    // but you have the option to pass it in for your tests
    fetchService
  }
  ...
  initializeData() {
    // Use the fetchService from props
    this.props.fetchService.fetchData('some/url').then(data => {
      this.setState({ data });
    })
  }
}

// MyComponent.jest.js
it('myFirstTest', () => {
  const fetchData = jest.fn().mockResolvedValue(/*Fake test data*/);
  const fetchService = { fetchData };
  const wrapper = mount(<MyComponent fetchService={fetchService} />);
  return Promise.resolve().then(() = {
    // The mock fetch will be resolved by this point, so you can make
    // expectations about your component post-initialization here
  })
}
其它你可能感兴趣的问题
上一篇React.js 如何使用虚拟 DOM 加速渲染 下一篇根据条件计算项目