how to test electron dialog function inside react component with jest?

Viewed 37

i have project develop with electron-react-boilerplate
i have this browse function

// src/renderer/components/InputFolder.tsx

//import blaaaah

export class InputFolder extends React.Component<any, any> {
//blablaaah

browse = () => {
    dialog
      .showOpenDialog({
        properties: ['openDirectory'],
      })
      .then((result) => {
        //  when user doesnt cancel opendirectory
        if (result.canceled === false) {
          const filepaths = result.filePaths[0];
          this.props.filespath(filepaths);
          this.setState({
            filePath: filepaths,
          });
        }
        return null;
      })
      .catch((error) => {
        console.error(`error : ${error}`);
      });
  };
  render() {
  ...
  }
....
}

i need to test the browse function inside the react component so it can filled with a value that will send to other component. How the test should be written so can make a simple check to return a value like "xyz"? something like code below?

// src/__tests__/InputFolder.test.tsx
/* eslint-disable import/first */
jest.mock('@electron/remote', () => ({ exec: jest.fn() }));
import '@testing-library/jest-dom';
import browse from '../renderer/components/InputFolder';

describe('Input Folder Browse', () => {
  it('should browse', () => {
    browse() = jest.fn();
    expect(browse()).toBe("xyz");
  });
});

0 Answers
Related