vue3 单元测试jest笔记

安装

npm install --save-dev jest

demo

//sum.js
module.exports = (a, b) => {
  return a + b;
}

//sum.test.js //sum.spec.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

//package.json
scripts: {
  "test": "jest"
}

//运行
npm run test

esm

//sum.js
export default (a, b) => {
  return a + b;
}

//测试
import sum from './src/sum'

describe('sum', () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

//运行出错 
//cannot use import statement outside a module
npm run test

//解决1
//////////////////////////////////
// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
};

//安装依赖
npm install --save-dev babel-jest @babel/core @babel/preset-env


//解决2
//////////////////////////////////////
//package.json
scripts: {
  "test": "NODE_OPTIONS=--experimental-vm-modules jest"
}

测试vue界面内容

import { mount } from '@vue/test-utils'
describe('MyComponent.vue', () => {
  it('displays message', () => {
    // const wrapper = shallowMount(MyComponent)
    const wrapper = mount(MyComponent);
    // 断言组件的内容
    expect(wrapper.text()).toMatch('Hello, world!');
  })
});

条件逻辑

describe('Foo', () => {
  //常在
  it('a 标签内容'， () => {
    const wrapper = mount(Foo);
    const profile = wrapper.get('#profile');
    expect(profile.text()).toBe('Profile');
  });
  //v-if
  it('查看元素是否存在'， () => {
    const wrapper = mount(Foo);
    const admin = wrapper.find('#admin');
    expect(admin.exists()).toBe(false);
  });
  it('存在'， () => {
    const wrapper = mount(Foo,{
      data(){
        return {
          isAdmin: true
        }
      }
    });
    const admin = wrapper.find('#admin');
    expect(admin.exists()).toBe(true);
  });

  //v-show
  it('是不是显示'， () => {
    const wrapper = mount(Foo);
    const user = wrapper.find('#user');
    expect(user.isVisible()).toBe(false);
  });
});

事件

describe('Emit', () => {
  it('点击事件'， () => {
    const wrapper = mount(Emit);
    const button = wrapper.get('button');
    button.trigger('click');
    //查看有过对应字段 toHaveProperty
    expect(wrapper.emitted()).toHaveProperty('increment');
    expect(wrapper.emitted('increment')).toBetruthy();//判断有值
  });

  it('点击事件 数据'， () => {
    const wrapper = mount(Emit);
    const button = wrapper.get('button');
    button.trigger('click');
    button.trigger('click');

    expect(wrapper.emitted('increment')[0]).toEqual([1]);//判断值
    expect(wrapper.emitted('increment')[1]).toEqual([2]);//判断值
  });
});

props

describe('Props', () => {
  const wrapper = mount(Props,{
    props:{
      minLength: 10
    }
  });

  //找 input 标签
  const input = wrapper.get('input');
  //给input 赋值
  await input.setValue('123');
  expect(wrapper.text()).toContain('密码不能少10位');
  expect(wrapper.find("[data-test='error']").exists).toBe(true);

  //改变传值
  wrapper.setProps({
    minLength: 5
  });
});

slot

describe('Slot', () => {
  it('插槽', () => {
    const wrapper = mount(Slot,{
      slots:{
        default:'hello world'
      }
    });
    expect(wrapper.text()).toContain('hello world');
  });
  it('插槽多个', () => {
    const wrapper = mount(Slot,{
      slots:{
        default:["<div id='one'>one</div>","<div id='two'>two</div>"]
      }
    });
    expect(wrapper.find("#one").text()).toContain('one');
    expect(wrapper.find("#two").text()).toContain('two');
  });
  //插槽具名
  // slots:{
  //   header:'hello world',
  //   footer:'footer',
  // }

  //作用域插槽
  //<slot :msg="msg" name="header" />
  it('作用域插槽', () => {
     const wrapper = mount(Slot,{
      slots:{
        header:`
          <template #slot="data">
            hello {{data.msg}}
          </template>
        `
      }
    });
    expect(wrapper.find("header").text()).toContain('hello message');
  });

  //接收组件
  // default:Foo
  //接收对象
  // default:{templater:'<div>foo</div>'}
  //接收数据
  // default:h('div','foo')
});