【Day12】建立React专案并安装Jest，来跑跑看第一个测试吧 -`д´-!

首先!! 我们要先来建立一个React专案

执行以下指令来建立专案

 npx create-react-app  专案名称

如果不是用上述指令来建立专案的话，可以执行以下指令来安装 JEST

npm install --save-dev jest

专案建立完毕以後，点开src目录里会看到App.js (预设的js) 还有App.test.js(App.js的测试)

现在，我们来利用 npm test 来执行测试看看吧 !

(看到以下图片显示的，那代表成功执行测试了~)

• 测试是在当程序码有进行变动时，才会自动重新执行
• 测试失败的时候会显示错误讯息

这边补充一下JEST

• Watch Mode => 这个模式是向上述说的，当程序有变动时(存档後)，测试会自动重新执行
• npm test 相关快捷键
  • a- 执行所有测试
  • o- 执行有变动的测试
  • w- 查看快捷键
  • q- 结束测试
• JEST 会去执行在src目录下，名称含有.test.js的档案

上面有提到，专案建立完毕後有一个App.test.js的档案是给App.js用的测试，

来剖析一下单元测试大概的样子

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

test function 的第一个参数是我们单元测试的名称，
第二个参数是测试所要执行的function，
expect里摆的是我们期望的值，expect後面的function有很多很多种，後续会再细谈这个部分!

对!!基本的单元测试就是各位所看到的那麽~~~简单，
那我们该怎麽搭配Enzyme去写单元测试呢~?

下一篇就要来安装Enzyme啦~ 然後装了Enzyme当然要来试用看看它的function!

所以下一篇除了安装以外，
还会用Enzyme的shallow function 来写写看我们的第一个测试罗 !