Javascript 使用jest获取测试

我已经实现了如下的获取和测试用例，但它给了我一个错误

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { mount, shallow } from 'enzyme';
import { fetchMock } from 'fetch-mock';
import Main from "../src/Main";
import testData from './_mockData_/testData'

it('should render without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Main />, div);
    ReactDOM.unmountComponentAtNode(div);
  });

describe('should renders Main correctly', () => {
    fetch('http://testurl.com/testData').then(res => {
        expect(res.data).toEqual(testData)
  })
});

import React，{Component}来自'React'；
类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
测试数据：[]
};
}
componentDidMount（）{
取回(`http://testurl.com/testData`)
.then（response=>response.json（））
.then（result=>this.setState（{testData:result}））；
}
render（）{
const{testData}=this.state；
返回(
{testData.data&&(
)}
);
}
}
导出默认主；

Main.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { mount, shallow } from 'enzyme';
import { fetchMock } from 'fetch-mock';
import Main from "../src/Main";
import testData from './_mockData_/testData'

it('should render without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Main />, div);
    ReactDOM.unmountComponentAtNode(div);
  });

describe('should renders Main correctly', () => {
    fetch('http://testurl.com/testData').then(res => {
        expect(res.data).toEqual(testData)
  })
});

我总是犯以下错误

引用错误：未定义提取

任何帮助都将不胜感激

编辑：

根据评论，我编辑了我的代码如下，但没有运气

import testData from './_mockData_/testData'

describe('Main', () => {
    it('renders without crashing', () => {
        const tree = shallow(<Main />);
        expect(tree).toMatchSnapshot();
      });

      beforeEach(() => {
        fetch.resetMocks()
      })

      it('calls API and returns data to me', () => {
        fetch.mockResponseOnce(JSON.stringify({ someData: testData }))

        //assert on the response
        fetch(`http://testurl.com/testData`).then(res => {
          expect(res.data).toEqual(testData)
        })

        //assert on the times called and arguments given to fetch
        expect(fetch.mock.calls.length).toEqual(1)
        expect(fetch.mock.calls[0][0]).toEqual('http://testurl.com/testData')
      })
});

从“/\u mockData\u/testData”导入测试数据
描述（'Main'，（）=>{
它（'渲染而不崩溃'，（）=>{
常数树=浅（）；
expect（tree.toMatchSnapshot（）；
});
在每个之前（（）=>{
fetch.resetMocks（）
})
它（'调用API并将数据返回给我'，（）=>{
fetch.mockResponseOnce（JSON.stringify（{someData:testData}））
//在响应上断言
取回(`http://testurl.com/testData`)。然后（res=>{
expect（res.data）.toEqual（testData）
})
//断言调用的时间和给定的获取参数
expect（fetch.mock.calls.length）.toEqual（1）
expect（fetch.mock.calls[0][0]）.toEqual（'http://testurl.com/testData')
})
});

出现以下错误：

TypeError:无法读取未定义的属性“then”

---

这里是仅使用

enzyme

v3和

jestjs

的解决方案，仅此而已

main.tsx

：

import React, { Component } from 'react';
import { CustomComponent } from './CustomComponent';
import fetch from 'node-fetch';

interface IMainState {
  testData: {
    data: any[];
  };
}

class Main extends Component<any, IMainState> {
  constructor(props) {
    super(props);

    this.state = {
      testData: {
        data: []
      }
    };
  }

  public componentDidMount() {
    fetch(`http://testurl.com/testData`)
      .then(response => response.json())
      .then(result => this.setState({ testData: result }));
  }

  public render() {
    const { testData } = this.state;

    return (
      <div className="main">
        {testData.data && (
          <section>
            <CustomComponent movies={testData.data} />
          </section>
        )}
      </div>
    );
  }
}

export default Main;

import React from 'react';
import { shallow } from 'enzyme';
import Main from './main';
import fetch from 'node-fetch';

const { Response } = jest.requireActual('node-fetch');

jest.mock('node-fetch');

describe('Main', () => {
  it('t1', done => {
    (fetch as jest.MockedFunction<typeof fetch>).mockResolvedValueOnce(
      new Response(
        JSON.stringify({
          data: ['data1', 'data2']
        })
      )
    );
    const wrapper = shallow(<Main></Main>);
    expect(fetch).toBeCalledWith(`http://testurl.com/testData`);
    expect(wrapper).toMatchSnapshot();
    setImmediate(() => {
      expect(wrapper.state()).toEqual({
        testData: {
          data: ['data1', 'data2']
        }
      });
      expect(wrapper).toMatchSnapshot();
      done();
    });
  });
});

具有覆盖率的单元测试结果：

PASS src/stackoverflow/53788454/main.spec.tsx（5.517s）
主要
✓ t1（28毫秒）
›写入1个快照。
---------------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
---------------------|----------|----------|----------|----------|-------------------|
所有文件| 95.83 | 100 | 87.5 | 95.24 ||
CustomComponent.tsx | 85.71 | 100 | 50 | 83.33 | 9|
main.tsx | 100 | 100 | 100 | 100 ||
---------------------|----------|----------|----------|----------|-------------------|
快照摘要
›从1个测试套件中写入1个快照。
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：1个已写入，1个已通过，共2个
时间：6.515秒

组件快照：

// Jest Snapshot v1

exports[`Main t1 1`] = `
<div
  className="main"
>
  <section>
    <CustomComponent
      movies={Array []}
    />
  </section>
</div>
`;

exports[`Main t1 2`] = `
<div
  className="main"
>
  <section>
    <CustomComponent
      movies={
        Array [
          "data1",
          "data2",
        ]
      }
    />
  </section>
</div>
`;

//Jest快照v1
导出[`Main t1 1`]=`
`;
导出[`Main t1 2`]=`
`;

以下是完整的演示：

---

关于如何手动模拟

节点获取

，请查看

查看@ic3b3rg我根据您的建议编辑了我的问题。