庭喵的出包星球 – Page 41 – Front End Developer's Note

Eslint + airbnb + prettier

快速指令：

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

React context API

以Provider提供的值為準
createContext 後面提供的預設值，是給上層如果沒有找對應的Provider的component話用的。
每一個context物件都有一個Provider，React會讓它的吸精元件訂閱這些context
需要注意reference identity，避免不必要的re-render

實際使用的教學：
今天我要寫一個🌲🐦🐦的context。

1. 首先先來createContext

const TreeBirdBirdContext = React.createContext(['🌲', '🐦']);

2. 之後來做它的 Provider

const TreeBirdBridProvider = ({children}) => {
  const [state, setState] = useState(['🌲', '🐦', '🐦'])
  return (
    <TreeBirdBirdContext.Provider value={[state, setState]}>
      {children}
    </TreeBirdBirdContext.Provider>
  )
}

3. 接著是顯示畫面、操作的邏輯

const Controller = () => {
  const [state, setState] = useContext(TreeBirdBirdContext);

  const addBird = () => {
    setState(oldArray => [...oldArray, '🐦']);
  }
  return (
    <>
      <div>{state}</div>
      <button onClick={() => addBird()}>Click Me</button>
    </>
  )
}

4. 接下來把他們包起乃

const App = () => {
  return (
    <TreeBirdBridProvider>
      <Controller />
    </TreeBirdBridProvider>
  )
}
export default App;

然後就大功告成溜！

在這裡可以看

Next.js 發佈檔案到自己的網站

跑這個指令，就會有out資料夾出來，再上傳到我的FTP就行惹！

參考文章：
https://nextjs.org/docs/advanced-features/static-html-export

react-testing-library 學習

const Button = ({langHelper, action}) => <button type="button" onClick={action}>{langHelper('clickMe')}</button>;

test('callback is called onClick', () => {
  const langHelper = jest.fn().mockImplementation(key => key);
  const callback = jest.fn();

  render(<Button action={callback} langHelper={langHelper} />);

  // multiple ways to do the same here.
  // - since you have only a single button, cannot possible select anything else here than the one you have
  userEvent.click(screen.getByRole('button'));
  // - using the i18n translation key. since langHelper is mocked, we know that this is the key we should see
  userEvent.click(screen.getByText('clickMe'));
  // - basically the same as yours, just without regex
  userEvent.click(screen.getByRole('button', {name: 'clickMe' }));
  // - yours
  userEvent.click(screen.getByRole('button', {name: /clickMe/i}));

  expect(callback).toHaveBeenCalledTimes(1);
});

這是多語系的範例

TypeScript Tuple

今天乃學突波這個咚咚！就是已知裡面的型別是什麼的固定length的陣列。
舉例：
const x: [string, string, number, string, number, string];
x = [‘Luna’, ‘trees’, 100, ‘birds’, 999, ‘times];

為什麼不用Enzyme要用React Testing Library

這是Enzyme的範例

it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = mount((
      <Foo onButtonClick={onButtonClick} />
    ));
    wrapper.find('#foo').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
});

這個測試需要HTML上有一個id是foo的tag，假設id修改了，它不就爆掉了
使用者看網頁，不會看到它有一個id是foo的東西，他只會看到網頁畫面，例如一個按鈕，上面寫「如果你覺得露娜很可愛，點我」

這些文章解釋了為什麼不用Enzyme
React Testing Library: The Modern Way to Test React Components
How to use React Testing Library Tutorial

重點截取：
React beginners often confuse the tools for testing in React. React Testing Library is not an alternative to Jest, because they need each other and every one of them has a clear task.
In modern React, developers will not get around Jest for testing, because its the most popular testing framework out there for JavaScript applications.

~ How to use React Testing Library Tutorial