在反应组件中使用 msw 模拟提取不起作用

编程问答 2022-05-22

问题描述

我目前有这个反应组件，它显示从 api 检索的服务列表（为简单起见，删除了一些代码）：

function Services(props) {
    
    const [services,setServices] = useState([]);
    const [page_nr,setPage_nr] = useState(0);
    const [nameSearch,setNameSearch] = useState("");
    const [domainSearch,setDomainSearch] = useState("");

    let match = useRoutematch();

    let num_on_page = 20;
    

    const get_services = () => {
        let skip = page_nr*num_on_page;
        fetch('https://myurl/api/services?limit={num_on_page}&skip={skip}',{
          method: 'GET'
        })
          .then((res) => res.json()) 
          .then((result) => setServices(result._embedded.serviceList))
          .catch((err) => console.log('error'))
      }

    const listItems = services.map((service) =>
        <li key={service.id}><Link to={`${match.url}/${service.id}`}>
            <Service name={service.name} domain={service.domain} description={service.description} /></Link></li>
    );

    useEffect(() => {
        
        if (nameSearch === "" || domainSearch === "") {
            get_services();
        }
    });

    return (
        <Switch>
        <Route path={`${match.path}/create`} component={ServiceCreate}/>
        <Route path={`${match.path}/:id`} component={ServicePage}/>
        <Route path={match.path}>
            <div className="Services">
                <h1>Diensten</h1>
                <hr id="services_line"/>
                <Link to={`${match.url}/create`}>
                    <button type="button" className="btn btn-primary">Nieuwe Dienst</button>
                </Link>
                <ul>{listItems}</ul>
                <input type="button" value="Vorige" disabled={page_nr == 0} onClick={() => setPage_nr(page_nr-1)}/>
                <input type="button" value="Volgende" disabled={services.length < num_on_page} onClick={() => setPage_nr(page_nr+1)}/>
            </div>
        </Route>
    </Switch>
    );
}

export default Services;

我写了下面的测试代码，我想模拟 fetch 函数，以便我可以测试渲染的数量是否正确，这里我使用了 Mock Service Worker：

import 'whatwg-fetch';
import { setupWorker,rest } from 'msw';
import { setupServer } from 'msw/node';

const fakeData = {
  _embedded: {
    serviceList: [{id: 100,name:"naam 1",description:"een omschrijving van de dienst",domain: "domein 1"},{id: 101,{id: 102,{id: 104,{id: 105,{id: 106,{id: 107,{id: 108,domain: "domein 1"}]
  }
};

const server = setupServer(
  rest.get("https://sel2-4.ugent.be/api/services",(req,res,ctx) => {
    return res(ctx.status(200),ctx.json(fakeData))
  }));

describe('Test Services',() => {
  beforeAll(() => server.listen());
  afterall(() => server.close());
  
  let wrapper = null;
  const history = createMemoryHistory()
  history.push('/services')
  beforeEach(async () => {
    await act(async () => {
      wrapper = mount(<Router history={history}><Services/></Router>);  
    }); 
  wrapper.update();
  })
  afterEach(() => {
    wrapper = null;
    server.resetHandlers()
  })


  it('should render correct fetched amount',async () => {
    expect(wrapper.find(Service).length).toBe(8);
  })
});

当我运行测试时，它失败了，它显示长度为 0（如果我编辑 const [services,setServices] = useState([]); 以在数组中已有项目，则长度与 0 不同）。似乎提取甚至没有被执行。 现在我尝试了很多选项来模拟 fetch 函数，但它们似乎都不起作用。我在这里做错了什么，应该用什么方法来测试使用 fetch 的 React 钩子？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

enzymeenzymejavascriptjestjsmswreactjsreactjsreactjsreactjs