Question

我有一个父组件（App.js），有一个子组件（Counter），我正在通过将函数从父组件传递到子组件来更新状态，因此我无法覆盖100％的代码覆盖率。

我正在尝试使app.test.js中的app.js代码覆盖率达到100％。

运行测试命令后，例如：npm test-app.test.js

建议涵盖 setState（）和 setCounter（）方法。请帮助我。

预先感谢。


import { connect } from 'react-redux'
import logo from './logo.svg';
import './App.css';
import {Counter} from './counter';
import MouseTracker from './renderProps/Mouse';

function App(props) {
  const [state, setState] = useState(false);
  const [counter, setCounter] = useState(0);

  const updateMyState = () => {
    setState(true);
    setCounter(counter+1)
  }


  return (
    <div className="App">
      <MouseTracker />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{props.counter}</p>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          onClick={props.onClick}
        >
          Learn React
        </a>
        {/* Passing my updateMyState function as props */}
        <Counter propEvents={updateMyState} /> 
      </header>
    </div>
  );
}

function mapStateToProps(state) {
  return { ...state }
}

export default connect(mapStateToProps)(App);

计数器组件代码

export const Counter = (props) => {
    return (
            <button id="abc" onClick={props.propEvents}>hello</button>
            // {props?.st?.map(i => {
            //     return <p key={i.id}>id {i.id}, name: {i.name}</p>
            // })}
    )
}

***测试代码***

import React from 'react';
import App from './App';
import { render, screen } from '@testing-library/react'
import {BrowserRouter as Router } from 'react-router-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureMockStore from "redux-mock-store";
const initialState = {counter: 'Redux User'};
const mockStore = configureMockStore();
const mStore = mockStore({});

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return [
        {
          counter: state.counter + 1
        },
        ...state
      ]

    default:
      return state
  }
}

function renderC(
  ui,
  {
    initialState,
    store = createStore(reducer, initialState)
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return render(ui, { wrapper: Wrapper })
}

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
import { mount, shallow } from 'enzyme';

const clickFn = jest.fn();

describe('My Test Suite', () => {
  const component = mount(<Provider store={mStore}><Router><App onClick={clickFn}/></Router> </Provider>);
  
  
  it('Test App component', () => {
    const changeCounter = jest.fn();
    const handleClick = jest.spyOn(React, "useState");
    handleClick.mockImplementation(size => [size, changeCounter]);
    console.log(component.debug())
    const code = component.find('code');
    expect(code.text()).toBe('src/App.js');

  })

  it('Renders the connected app with initialState', () => {
    renderC(<App />, { initialState: { counter: '123' } })
    expect(screen.getByText('123')).toBeInTheDocument()
  })
});```

React和JEST中代码覆盖面临的问题

0 个答案: