Как написать тестовый пример для родительского компонента, который использует дочерний элемент, возвращенный HO C в реакции - PullRequest
0 голосов
/ 07 января 2020
**App.test.js**

describe('App', () => {
  it('should match snapshot', () => {
    const wrapper = shallow(<App {...props} />)
    expect(toJson(wrapper)).toMatchSnapshot()
  })
  it('check article accessibility issues', async () => {
    const wrapper =  mount(<App {...props} />)
    expect(await axe(wrapper.html())).toHaveNoViolations()
  })
})


**Parent Component:-** 

import React from 'react';
import Child from './Child';
function App() {
  return (
    <div className="App">
      This is parent page
      <Child name="parent" />
    </div>
  );
}
export default App;

**Child Component:-** 

import React from 'react';
import {withLocale} from './withLocale';
class Child extends React.Component {
    render(){
        const {name,lang} = this.props
        return (
            <div>
              This is Child page!!!
              Lang is {lang} for name {name}
            </div>
          );
    }

  }
export const Component = Child
export default withLocale(Component)

**HOC:-** 

export function withLocale(WrappedComponent) {
    // ...and returns another component...
    return class extends React.Component {
      constructor(props) {
        super(props);
        this.state= {
            lang: 'eng'
        }
      }
      render() {
        return <WrappedComponent lang={this.state.lang} {...this.props} />;
      }
    };
  }

нужна помощь, чтобы написать тест для компонента приложения, используя энзим и шутку. Я использую « jest-a11y-scanner » для проверки доступности. когда я пытаюсь смонтировать компонент App, в этом случае не передается сообщение об ошибке lang prop, которая передается из withLocale (lang) в дочерний компонент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...