reactjsgraphqljestjsenzymerelaymodern

How to do testing with Relay modern with jest and enzyme?


How to test this kind of file with jest and enzyme...

   

class App extends React.Component{
    constructor(){
        super()
    }

    render(){
        const { viewer, children, isLoading } = this.props
        return(
          <div>
              <div id="container">
                {children}
              </div>
              {isLoading && <Loading />}
          </div>  
        );
    }
}

export default createFragmentContainer(
    App,
    graphql`
        fragment App_viewer on User{
            id
            email   
        }
    `
)


Solution

  • You can do something like this

    const React = require('React');
    const App = require('App.react');
    jest.mock('react-relay', () => ({
      createFragmentContainer: App =>
        App,
    }));
    
    const {shallow} = require('enzyme');
    const {shallowToJson} = require('enzyme-to-json');
    
    describe('App', () => {
      it('renders the dashboard section correctly', () => {
        const wrapper = shallow(
          < App
            title="Test Dashboard Section"
            charts={[]}
          />,
        );
        expect(shallowToJson(wrapper)).toMatchSnapshot();
      });
    

    We need to mock react-relay . As mentioned above.