Table of Contents

• What is Jest Preview and why I built it?
• What struggles do I have to overcome when building an OSS project?
• What did I receive from doing OSS?
• Some tips to build your own open source project.

What is Jest Preview and why I built it?

Problem:

• When you run a test, you only see the result in the terminal

• You don’t know what your app looks like when the test is running

• It’s very hard to debug a failed test: Very Longgg HTML

Have you ever tried to click on a button, but there is no button, it's just the spinner is loading?

=> Question: If jest can print out the HTML, can we render it on a browser?

=> Yes. We can!!

What is Jest Preview and why I built it?

What is Jest Preview and why I built it?

Benefits of Jest Preview

• Debug a failed test easier

• We can see what our app looks like, so the next testing steps are easily predictable => write test faster

• Closing the gap between unit/ integration tests and e2e tests, but still fast in execution time

=> My personal experience: I write tests 200-300% faster, thanks to jest-preview

What struggles do I have to overcome when building an OSS project?

Struggles

• It’s difficult.

import styles from './styles.module.css';

<div className={styles.button}>Click me</div>
import styles from './styles.module.css';

<div className={styles.button}>Click me</div>

E.g: We might know how to use CSS Modules, but we might not need to know how CSS Modules work under the hood

require('postcss-modules')({
  getJSON: (cssFileName, json, outputFileName) => {
    console.log(JSON.stringify(json));
  },
  generateScopedName: function (name, filename, css) {
    const stringHash = require('string-hash');
    const i = css.indexOf('.' + name);
    const line = css.substr(0, i).split(/[\\r\\n|\\n|\\r]/).length;
    const removedNewLineCharactersCss = css.replace(/(\\r\\n|\\n|\\r)/g, '');
    const hash = stringHash(removedNewLineCharactersCss).toString(36).substr(0, 5);
    return '_' + name + '_' + hash + '_' + line;
  },
})
require('postcss-modules')({
  getJSON: (cssFileName, json, outputFileName) => {
    console.log(JSON.stringify(json));
  },
  generateScopedName: function (name, filename, css) {
    const stringHash = require('string-hash');
    const i = css.indexOf('.' + name);
    const line = css.substr(0, i).split(/[\\r\\n|\\n|\\r]/).length;
    const removedNewLineCharactersCss = css.replace(/(\\r\\n|\\n|\\r)/g, '');
    const hash = stringHash(removedNewLineCharactersCss).toString(36).substr(0, 5);
    return '_' + name + '_' + hash + '_' + line;
  },
})

What did I receive from doing open source software?

• Knowledge. A lot of knowledge.

• Read open source code a lot => code reading/ debugging skills improved

• Understand how the tools you use everyday work under the hood => Better programmer

• Rabbit hole: Jest, Vite core, CRA core, Websocket, chokidar, shebang, PostCSS, Babel…

What did I receive from doing open source software?

• Opportunities:

• Nominated for the Most Exciting Use of Technology, React Open Source Awards, React Summit

• Jobs: Companies reach out

• Conferences/ Tech events

What did I receive from doing open source software?

Know great developers:

• Twitter

What did I receive from doing open source software?

Know great developers:

• In-person (CityJS Singapore 2022)

What did I receive from doing open source software?

Know great developers:

• In-person (JSConf Korea 2022)

What did I receive from doing open source software?

I received a lot of thanks:

How to choose an open source project to work on?

• Should be projects you use every day

• Should solve your own problem

Find a maintainer

Use your own software

• When you use it as a normal user, you know if you need to adjust or add more features to make it usable

Ask for feedback

• Your software can be subjective

Monitor Issues and Pull Requests

• You know your software is being used when people start to report issues and send pull requests
• Have Issue and Pull Request templates
• Reproduction is the most important one
• Use labels, milestones, GitHub Actions

Learn from others